vue第一天

什么vue

vue是一个渐进式javascript框架

开发vue

传统的开发 通过html的页面引入 vue官方提供@vue-cli创建vue项目

安装过程

1.window键+r输入cmd

2.国外下载速度慢，转国内网络，复制 npm config set registry registry.npmmirror.com

3.输入npm install -g @vue-cli （-g为全局安装）

4.输入vue-V查看版本，能看到版本就安装成功

5.在根目录的导航栏输入cmd

6.版本号选择2

7.创建文件名，npm create 文件名

8.输入npm run serve 开启服务器

vue.config.js

打开vue.config.js ,该文件为配置文件

自定义服务配置： derServer:{port:服务号}

poen:true,自动开启网页

lintOnSave为eslint自动检查代码，当代码中有错误，或者没使用的变量，都会报错提示，关闭值为false，开启值为true

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{//自定义服务配置
    port:3000,//服务号
    // poen:ture,自动开启网页
  },
  lintOnSave:false //eslint检查代码，关闭
})

文件含义

main.js是webpack 打包入口文件，流程为main.js打包src/App.vue的文件渲染到public/index.html

App.vue

里面有template，script，css组成 template只能有一个根标签 js有独立的作用域 css属性要配合scoped来使用，只作用于当前文件，不加scoped就为全局变量

快捷键生成 v ( with default.vue)

vue含义

vue是一个mvvm框架，v：view视图 m：model数据 mvvm是一个双向数据绑定，v变了m也会变，m变了v也会变 数据驱动视图，不推荐操作dom，直接操作数据

插值表达式

含义：把表达式的内容插入到插值所在的位置 语法：{{表达式}} 表达式可以为：变量，数字，字符窜，方法调用，属性，三元表达式 声明的变量需要在data方法的返回值对象中

<template>
<div>
  <h1>{{message}}</h1>
  <h2>{{obj.name}}</h2>
  <h2>{{obj.age}}</h2>
  <h2>{{obj.age>=2 ? '成年':'未成年'}}</h2>
  <h2>这位先生{{message}},那位先生{{message}}</h2>
</div>
</template>

<script>
export default {
  data(){
    return{
      message:'你好',
      obj:{
        name:'京巴',
        age:3
      }

    }
  }
}
</script>

<style>

</style>

v-bind(给绑定属性)

写法：v-bind:属性名="vue变量" 简写：:属性名="vue变量" vue声明的变量在data方法的返回的对象里

<template>
<div>
    <!-- 正常写 -->
  <a v-bind:href="url">百度</a>
  <!-- 简写 -->
  <a :href="url">百度2</a>
</div>
</template>

<script>
export default {
  data(){
    return{
      url:'https://www.baidu.com'
    }
  }
}
</script>

<style>

</style>

v-on(给绑定事件)

写法：v-on:事件类型="方法(参数)" 简写：@事件类型="方法(参数)" 方法声明在methods对象里

<template>
<div>
  <h1>{{count}}</h1>
    <!-- 正常写 -->
  <button v-on:click="count=count+1">加一</button>
  <!-- 简写 -->
  <button @click='count=count+2'>加二</button>
  <!-- 方法() 方法写在methods的对象中-->
  <button @click='fn'>加五</button>
  <!-- 方法(参数) -->
  <button @click='fan(6)'>加六</button>
</div>
</template>

<script>
export default {
  data(){
    return{
      count:0
    }
  },
  methods:{
    fn(){
      this.count+=5
    },
    fan(num){
      this.count+=num
    }
  }
}
</script>

<style>

</style>

修饰符用法

<template>
<div>
  <!-- 阻止标签的默认样式 -->
  <a href="https://www.baidu.com" @click='fn'>百度一下</a>
  <!-- 有参数时阻止默认样式  $event为固定写法-->
  <a href="https://ww.baidu.com" @click="en(10,$event)">百度一下</a>
  <!-- 修饰符阻止默认样式  .pervent-->
  <a href="https://ww.baidu.com" @click.prevent="kn">百度一下</a>
  <!-- 修饰符阻止冒泡行为 .stop-->
  <div @click='an'>
    ok
    <div @click.stop='bn'>en</div>
  </div>
  <!-- 修饰符只触发一次 .once -->
  <button @click.once="btn">按钮</button>

</div>
</template>

<script>
export default {
  methods:{
    fn(event){
      event.preventDefault()
    },
    en(num,event){
      event.preventDefault()
    },
    kn(){},
    an(){
      console.log('an')
    },
    bn(){
      console.log('bn')
    },
    btn(){
      console.log('ok');
    }
  }
}
</script>

<style>

</style>

按键修饰符

<template>
<!-- 键盘抬起时间，enter，其他按键也一样，用哪个写哪个 -->
  <button @keyup.enter="fn">按钮</button>
</template>

<script>
export default {
  methods:{
    fn(){
      console.log('ok');
    }
  }
}
</script>

<style>

</style>

案例1：翻转世界

<template>
  <div>
    <!-- 点击翻转 -->
    <!-- 1.点击时将字符串拆分为数组，再将数组翻转，再将翻转的数组转成字符串 -->
    <!-- 2.将等到字符串赋值给message -->
    <h1>{{message}}</h1>
    <button @click="btn">点击翻转</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:'HELLO WORLD'
    }
  },
  methods:{
    btn(){
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

<style>

</style>

v-model(双向绑定)

作用：给表单value和vue变量的双向绑定 语法：v-model="vue变量" 变量声明在data方法返回的对象中

在表单中的使用 1.下拉列表（select) v-model绑定是选中的option的value值

<template>
  <div>
    <select v-model="selects">
      <option value="上海">上海</option>
      <option value="北京">北京</option>
      <option value="攀枝花">攀枝花</option>
    </select>
  </div>
</template>

<script>
export default {
  data(){
    return{
        //默认值为北京
      selects:"北京"
    }
  }
}
</script>

<style>

</style>

2.复选框（checkbox）

当v-model="变量"，变量赋值为数组时，v-model绑定的是选中的value的值， 当v-model="变量"，变量赋值为其他时，v-model绑定的是选中value的布尔值

<template>
<!-- 变量赋值为数组时，v-model绑定的是选中value的值-->
<!-- 变量赋值为其他时，v-model绑定的是选中的布尔值 -->
  <div>
    多选：
      <input type="checkbox" v-model="animal" value="象" />象
      <input type="checkbox" v-model="animal" value="鸭" />鸭
      <input type="checkbox" v-model="animal" value="狗" />狗
      <input type="checkbox" v-model="animal" value="猪" />猪
      <input type="checkbox" v-model="flower" value="菊花">菊花
      <input type="checkbox" v-model="flower" value="玫瑰">玫瑰
  </div>
</template>

<script>
export default {
  data() {
    return {
      animal:[],
      flower:'',
    };
  },
};
</script>

<style>
</style>

单选

单选，v-model绑定的是选中的value值

<template>
<!-- 单选 v-model绑定是选中的value值 -->
  <div>
    性别：<input type="radio" v-model='sex' value="男">男 <input type="radio" v-model="sex" value="女"> 女
  </div>
</template>

<script>
export default {
  data(){
    return{
      sex:"",
    }
  }
}
</script>

<style>

</style>

文本域

<template>
<!-- 文本域 v-model绑定是文本域的value值 -->
  <div>
    <textarea v-model="text"></textarea>
  </div>
</template>

<script>
export default {
data(){
  return{
    text:"你在干森魔"
  }
}
}
</script>

<style>

</style>

v-model修饰符

<template>
<!-- .number 转换为数字赋值给变量 -->
<!-- .trim 去除首尾的空白符 -->
<!-- .lazy input失去焦点时触发 -->
  <div>
    <p>
      <input type="text" value="12" v-model.trim="abb">
      <input type="text" value="年龄" v-model.number="age">
      <input type="text" value="ddd" v-model.lazy="okok">
    </p>

  </div>
</template>

<script>
export default {
  data(){
    return{
      abb:'',
      age:'',
      okok:''
    }
    
  },
}
</script>

<style>

</style>

v-for(遍历数据)

作用：遍历数据 语法：v-for="值变量 in 数据" :key="唯一的标记" v-for="(值变量，索引变量) in 数据":key="唯一的标记" 数据：可以为 数组，对象，字符串，数字

遍历 用什么标签遍历，写在哪个标签里

<template>
  <div>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="item in obj" :key="item.id">{{item.name}}</li>
    </ul>
    <!-- 遍历字符串 将字符串的每个值遍历出来 -->
    <ul>
      <li v-for="(item,index) in str" :key="index">{{item}}</li>
    </ul>
    <!-- 遍历数字 将从1开始遍历到该数字 ，看in数字到那里-->
    <ul>
      <li v-for="(item,index) in 10" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4],
      obj: [
        {
          id: 1,
          name: "八戒",
        },
        {
          id: 2,
          name: "悟空",
        },
        {
          id: 3,
          name: "悟净",
        },
        {
          id: 4,
          name: "大唐",
        },
      ],
      str:'你好在干嘛呢',
      num:7
    };
  },
};
</script>

<style>
</style>