Vue知识点系列笔记：
Vue（一）基础 | 前端 | 课程笔记
 Vue（二）组件化编程 | 前端 | 课程笔记
 Vue（四）Vuex | 前端 | 课程笔记
 Vue（五）Vue-router | 前端 | 课程笔记
 Vue2+Vue3课程视频链接，包含：vue基础，vue-cli，vue-router，vuex，element-ui，vue3。
本篇为Vue基础知识，主要结构可查看本文目录。

一、Vue简介

1.Vue含义

一套用于构建用户界面的渐进式JavaScript框架

Vue可以自底向上逐层的应用
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的Vue插件

2.Vue特点

采用组件化模式，提高代码复用率，且让代码更好维护
采用声明式编码，让编码人员无需直接操作DOM，提高开发效率
（命令式编码）
使用虚拟DOM+和Diff算法，尽量复用DOM节点

3.学习Vue之前要掌握的JavaSc基础知识

ES6语法规范、ES6模块化、包管理器、原型和原型链、数组常用方法、axios、promise等等

二、Vue基础

2.1 模板语法

2.1.1 含义

Vue模板语法有2大类

插值语法
（1）功能：用于解析标签体内容。（标签体内容指的是在两个标签夹的中间的内容）
（2）写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
（1）功能：用于解析标签（包括标签属性、标签体内容、绑定事件…）
（2）写法：举例：v-bind:href=‘xxx’，'xxx’同样要写js表达式，且可以直接读取到data中的所有属性。
（3）备注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例子

2.1.2 代码示例

示例1：指令语法和普通标签属性的区别

√正确写法：

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{
    
    {
    
    name}}</h3>
    <h3/>
    <h1>指令语法</h1>
    <a v-bind:href="url">点我去尚硅谷学习</a>
  </div>
</body>

<script>
  new Vue([
    el:'#root',
    data:{
    
    
      name:'jack',
      url:'http://www.atguigu.com'
    }
  })
</script>

×错误写法：

 <a href="url">点我去尚硅谷学习</a>

=>分析：
错误写法中的href="url"中url是url，不传值；而正确写法中的v-bind:href="url"的url属于表达式，读取url的值。

=>补充：
区分 js表达式和js代码（语句）

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
（1）a
（2）a+b
（3）demo(1)
（4）x === y ? ‘a’ : ‘b’
js代码（语句）
（1）if() { }
（2） for() { }

示例2：当data里有属性名重复时，插值语法里的值是什么

?提问：{ {name}}里显示的是什么？

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{
    
    {
    
    name}}</h3>
    <h3/>
    <h1>指令语法</h1>
    <a v-bind:href="url">点我去{
    
    {
    
    name}}学习</a>
  </div>
</body>

<script>
  new Vue([
    el:'#root',
    data:{
    
    
      name:'jack',
      name:'尚硅谷'
      url:'http://www.atguigu.com'
    }
  })
</script>

√答案：{ {name}}里是’尚硅谷’

2.2 数据绑定

2.2.1 含义

Vue中有2种数据绑定的方式

单向绑定（v-bind）
数据只能从data流向页面
双向绑定（v-model）
数据不仅能从data流向页面，还可以从页面流向data
备注：
（1）双向绑定一般都应用在表单类元素上（如：input、select等）
（2）v-model:value 可以简写为v-model，因为v-model默认收集的就是value值

2.2.2 代码示例

示例1：单项数据绑定和双向数据绑定

√正确写法

<body>
  <div id="root">
    <!-- 普通写法 -->
    单向数据绑定:<input type="text" v-bind:value="name"><br/>
    双向数据绑定:<input type="text" v-model:value="name"><br/>

    <!-- 简写 -->
    单向数据绑定:<input type="text" :value="name"><br/>
    双向数据绑定:<input type="text" v-model="name"><br/>
  </div>
</body>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      name:'尚硅谷'
    }
  })
</script>

×错误写法：

<h2 v-model:x="name">你好</h2>

=>分析：
错误原因是因为v-model只能应用在表单类元素上（输入类元素）

2.3 el与data的两种写法

2.3.1 含义

el有2种写法
（1）new Value时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，但以后学习到组件时，data必须使用函数式，否则会报错
（3）一个重要的原则
由Vue管理的函数，一定不要写箭头函数，因为一旦写了箭头函数，this就不再是Vue实例了。

2.3.2 代码示例

//el的两种写法
const v = new Vue({
    
    
   el:'#root',//第一种写法
   data:{
    
          
     name:'尚硅谷'
   }
})
v.$mount('#root')//第二种写法

//data的2种写法
new Vue({
    
    
  el:'#root',
  //data的第一种写法：对象式
  /*data:{
    name:'尚硅谷'
  }*/

  //data的第二种写法：函数式
  data(){
    
    
  //data:function(){
    
    
    return {
    
    
      name:'尚硅谷'
    }
})

2.4 MVVM

2.4.1 MVVM模型

M：模型（Model）：data中的数据
V：视图（View），模板代码
VM：视图模型（ViewModel）：Vue实例

备注：
（1）data中所有的属性，最后都出现在了vm身上
（2）vm身上所有的属性及 vue原型上所有的属性，在Vue模板中都可以直接使用

2.4.2 代码示例

<div id="root">
  <h1>{
    
    {
    
    $options}}</h1>
  <h1>{
    
    {
    
    $emit}}</h1>

2.5 数据代理

2.5.1 回顾Object.defineproperty方法

<script type="text/javascript">
  let number = 18
  let person = {
    
    
    name: '张',
    sex: '男'，
  }

Object.defineProperty(person,'age',{
    
    
  // value:18,
  // enumerable: true,
  // writable: true,
  // configurable : true

  //当有人读取person的age属性时，get函数(getter)后会被调用，且返回值就是age的值
  get() {
    
    
    console.log('get:age:number')
    return number
  },

  //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
  set(value) {
    
    
    console.log('set:age:number')
    number = value
  }
})

2.5.2 数据代理

含义：
通过一个对象代理对另一个对象属性的操作（读/写）
代码示例：

<script>
  let obj = {
    
    x:100}
  let obj2 = {
    
    y:200} 
   
  Object.definieProperty(obj2,'x',{
    
    
    get(){
    
    
      return obj.x
    },
    set(value){
    
    
      obj.x = value
    }
  })

2.5.3 Vue中的数据代理

2.6 事件

2.6.1 事件的基本使用

使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数，否则this就指向window；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
@click = “demo” 和 @click="demo($event)"效果一致，但后者可以传参

<div id="root">
  <button @click="showInfo1">点击提示信息</button>
  <button @click="showInfo2($event,66)>点击提示信息2</button>
</div>

<script>
  const vm = new Vue({
    
    
    el:'#root',
    data:{
    
    
      name:'尚硅谷'
    },
    methods: {
    
    
      showInfo(){
    
    
        concole.log(event.target.innerText)
        console.log(this) //此处的this指向vm
      }
      showInfo(event,number){
    
    
        concole.log(event.target.innerText)
        console.log(this) //此处的this指向vm
      }
</script>

2.6.2 事件修饰符

含义

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待

代码示例
示例：click.prevent点击时不会跳转到网址

<div id="root">
  <a href="http://xxx.com" @click.prevent="showInfo">点击提示信息</a>
</div>

2.6.3 键盘事件

含义

Vue中常用的按键别名
回车 => enter
删除 => delete（捕获“删除“和“退格”键）
退出 => esc
空格 => space
换行 => tab（特殊，必须配合keydown使用）
上 => up
下 => down
左 => left
右 => right
Vue位提供别名的按键，可以使用按键原始的key值打绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
（2）配合keydown使用：政策触发事件
也可以使用KeyCode去指定具体的按键（不推荐）
Vue.config.keyCodes 自定义键名 = 键码，可以去定制按键别名

2.7 计算属性与监视

2.7.1 计算属性-computed

含义：

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineproperty方法提供的getterhe setter
get函数什么时候执行？
（1）初次读取时会执行一次
（2）当以来的数据发生改变时会被再次调用
优势：
与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
（1）计算属性最终出现在vm上，直接读取使用即可
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生改变。

代码示例
示例1：插值语法里双大括号里是填函数名fun还是填函数名加括号fun()？

<div id="root">
  <span>{
    
    {
    
    fullName()}}</span>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    methods:{
    
    
      fullName(){
    
    
        return '小猪佩奇'
      }
    }
  })
</script>

√正确答案：应该写{ {fullName()}}，会显示"小猪佩奇"，因为fullName()此时算是个表达式；如果写{ {fullName}}，会显示函数的代码。

示例2： 姓名计算案例

<div id="root">
 姓:<input type="text" v-model="firstName"><br/>
 名:<input type="text" v-model="lastName"><br/>
 全名:<span>{
    
    {
    
    fullName}}</span><br/>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data(){
    
    
      firstName:'飞天'
      lastName:'小魔女'
    },
    computed:{
    
    
      fullName:{
    
    
        get(){
    
    
          console.log('get被调用了')
          return this.firstName + '-' + this.lastName
        },
        //set什么时候调用？当fullName被修改时
        set(value){
    
    
          console.log('set',value)
  })
</script>

计算属性的简写形式
简写形式里不能有set()

const vm = new Vue({
    
    
  el:'#root',
  data:{
    
    
    firstName:'张',
    lastName:'一',
  },
  computed:{
    
    
    //简写
    fullName(){
    
    
      console.log('get被调用了')
      return this.firstName+ '-' + this.lastName
    }
  }
}

2.7.2 监视属性-watch

2.7.2.1 普通监视

代码示例：
**示例1：**用computed实现天气转换

<div id="root">
  <h2>今天天气很{
    
    {
    
    info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

<script>
  const vm = new Vue({
    
    
    el:'#root',
    data:{
    
    
      isHot:true,
    },
    computed:{
    
    
      info(){
    
    
        return this.isHot?:'炎热':'凉爽'
      }
    },
    methods: {
    
    
      changeWeather(){
    
    
        this.isHot = !this.isHot
      }
    },
  })

**示例2：**用watch实现天气监听的两种方法

<div id="root">
  <h2>今天天气很{
    
    {
    
    info}}</h2>
  <button @click="changeWeather">切换天气</button>
</div>

<script>
  const vm = new Vue({
    
    
    el:'#root',
    data:{
    
    
      isHot:true,
    },
    computed:{
    
    
      info(){
    
    
        return this.isHot?:'炎热':'凉爽'
      }
    },
    methods: {
    
    
      changeWeather(){
    
    
        this.isHot = !this.isHot
      }
    },
    //监听方法一
    watch:{
    
    
      isHot:{
    
    
        immediate:true,//初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时，
        handler(newValue,oldValue){
    
    
          console.log('isHot被修改了',newValue,oldValue)
        }
      }
    },
  })
 //监听方法二
 // vm.$watch('isHot',{
    
    
   // immediate:true,//初始化时让handler调用一下
   // //handler什么时候调用？isHot发生改变时
   // handler(newValue,oldValue){
    
    
     // console.log('isHot被修改了',newValue,oldValue)
   // }
 // })

示例3： 监听的两种方法的简写形式

watch:{
    
    
  //正常写法
  isHot:{
    
    
    immediate:true,
    deep:true,
    handler(newValue,oldValue){
    
    
      console.log('isHot被修改了',newValue,oldValue)
    }
  },
  //简写
  isHot(newValue,oldValue){
    
    
    console.log('isHot被修改了',newValue,oldValue)
  }
 }

//正常写法
 vm.$watch('isHot',{
    
    
   immediate:true,//初始化时让handler调用
   deep:true,
   handler(newValue,oldValue){
    
    
     console.log('isHot被修改了',newValue,oldValue)
   {
    
    
 })
 
 vm.$watch('isHot',function(){
    
    
   console.log('isHot被修改了',newValue,oldValue)
 })

2.7.2.2 深度监视

深度监视：
（1）Vue中的watch默认不检测对象内部值的改变（一层）
（2）配置deep:true可以检测对象内部值改变（多层）
（3）Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以。使用watch时根据数据的具体结构，决定是否采用深度监视

代码示例：
示例1： 深度监视depp:true

<div id='root'>
  <h3>a的值是:{
    
    {
    
    numbers.a}}</h3>
  <button @click="number.a++">点击让a+1</button>
  <h3>b的值是:{
    
    {
    
    numbers.b}}</h3>
  <button @click="number.b++">点击让b+1</button>
</div>

<script>
  const vm = new Vue({
    
    
    el:'#root',
    data:{
    
    
      isHot:true,
      numbers:{
    
    
        a:1,
        b:1
      }
    },
    watch:{
    
    
      //监视多级结构中某个属性的变化
      'numbers.a':{
    
    
        handler(){
    
    
          console.log('a被改变了')
        }
      }    
      //监视多级结构中所有属性的变化
      numbers:{
    
    
        deep:true,
        hander(){
    
    
          console.log('number被改变了')
        }
      }
    }
  })

2.7.3 对比computed和watch

computed和watch的区别：
（1）computed能完成的功能，watch都可以完成
（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

注意：
（1）被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
（2）所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

2.8 绑定样式

2.8.1 class样式绑定

写法
:class=“xxx” xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

代码示例

<!--:class 绑定 字符串写法 适用于样式的类名不确定需要动态琢磨的状况-->
    <div class="basic" :class="mood"  @click="changeMood">{
    
    {
    
     name }}</div><hr/>
    <!--:class 数组写法 适用于要绑定的样式个数不确定，名字也不确定的状况-->
    <div class="basic" :class="classArr">{
    
    {
    
     name }}</div><hr/>
    <!--:class 对象写法 适用于要绑定的样式个数确定，名字确定，但动态决定要不要用的状况-->
    <div class="basic" :class="classObj" >{
    
    {
    
     name }}</div><hr/>
</div>
<script>
    new Vue({
    
    
       el:'#root',
       data: {
    
    
           name:'test',
           mood:null,
           classArr:['atguigu1', 'atguigu2', 'atguigu3'],
           classObj:{
    
    
               atguigu1: false,
               atguigu2: false
           },
       },
       methods:{
    
    
         changeMood(){
    
    
             //vue绑定事件
             //不要亲手操作dom
             //随机切换mood
             const moodsArr = ['normal', 'happy', 'sad'];
             const random = Math.floor(Math.random() * moodsArr.length);
             this.mood = moodsArr[random];
         }
       }
    });
</script>

2.8.2 style样式绑定

写法：
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

代码示例：

    <!--绑定style样式 对象写法-->
    <div class="basic" :style="styleObj">{
    
    {
    
     name }}</div><hr/>
    <!--绑定style样式 数组写法-->
    <div class="basic" :style="[styleObj, styleObj2]">{
    
    {
    
     name }}</div><hr/>
    <div class="basic" :style="styleArr">{
    
    {
    
     name }}</div>
    
<script>
    new Vue({
    
    
       el:'#root',
       data: {
    
    
           name:'test',
           styleObj:{
    
    
               fontSize: '40px',
               color: 'red',
           },
           styleObj2:{
    
    
               background: 'green'
           },
           styleArr:[
               {
    
     color: 'orange' },
               {
    
     background: 'grey' }
           ]
       },
       methods:{
    
    
         changeMood(){
    
    
             //vue绑定事件
             //不要亲手操作dom
             //随机切换心情
             const moodsArr = ['normal', 'happy', 'sad'];
             const random = Math.floor(Math.random() * moodsArr.length);
             this.mood = moodsArr[random];
         }
       }
    });

2.9 条件渲染

v-if
写法：v-if=“表达式”，v-else-if=“表达式”，v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

代码示例：
示例： template不占DOM里的结构。

    <!--v-if与template的配合使用-->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>shanghai</h2>
    </template>

2.10 列表渲染

2.10.1 v-for

v-for指令

用于展示列表数据
语法：v-for=“(item, index) in xxx” :key=“yyy”
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<div>
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
  <li v-for ="(p,index) of persons" :key="index">
    {
    
    {
    
    p.name}}--{
    
    {
    
    p.age}}
  </li>
</ul>
<!-- 遍历对象-->
<h2>汽车信息</h2>
<ul>
  <li v-for="(value,k) of car" :key="k">
    {
    
    {
    
    key}}--{
    
    {
    
    value}}
  </li>
</ul>
<!-- 遍历字符串-->
<ul>
  <li v-for="(char,index) of str" :key="index">
    {
    
    {
    
    a}}-{
    
    {
    
    b}}
  </li>
</ul>
<!-- 遍历指定次数-->
<ul>
  <li v-for="(number,index) of 5" :key="index">
    {
    
    {
    
    index}}-{
    
    {
    
    number}}
  </li>
</div>

<script>
new Vue({
    
    
  el:'#root',
  data:{
    
    
    persons:[
      {
    
    name:AA,age:19},
      {
    
    name:BB,age:20},
      {
    
    name:CC,age:21}
    ],
    car:{
    
    
      name:'五菱宏光',
      price:'10万',
      color:'黑色'
      },
    str:'hello'
   }
})

2.10.2 key作用与原理

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：
key是虚拟DOM对象的表示，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
对比规则
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
a.若虚拟DOM中内容没变，直接使用之前的真实DOM
b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新=>界面效果没问题，但效率低
（2）如果结构中还包含输入类的DOM
会产生错误DOM更新=>界面有问题
开发中如何选择key？
（1）最好使用每条数据的唯一表示作为key，比如id、手机号、身份证号码、学号等唯一值
（2）如果不存在对数据的逆序添加，逆序删除等破坏顺内需操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

在这里插入图片描述

2.10.3 列表过滤

代码示例
背景：
在input框输入字，筛选出包含此字符的相应名字
示例1：错误写法1
错误之处： 在数组persons基础上过滤，会越过滤越少

<!-- 准备好一个容器-->
<div id="root">
    <h2>人员列表</h2>
    <button @click="updateMei">更新马冬梅的信息</button>
    <ul>
        <li v-for="(p,index) of persons" :key="p.id">
            {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
        </li>
    </ul> 
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      keyWord:'',
      persons:[
        {
    
    id:'001',name:'马冬梅',age:19,sex:'女'},
        {
    
    id:'002',name:'周冬雨',age:20,sex:'女'},
        {
    
    id:'003',name:'周杰伦',age:21,sex:'男'},
        {
    
    id:'004',name:'温兆伦',age:22,sex:'男'}
      ],
    },
    watch:{
    
    
      keyWord(val){
    
    
      //筛选出包含input字的名字
        this.Persons = this.persons.filter((p)=>{
    
    
          return p.name.indexOf(val) !== -1
        })
      }
    }

示例2：错误写法2
错误之处： 当搜索过一个字（例如“冬”），然后再删去“冬”字即此时input框内是空字符串，但原列表不显示。因为数据的name中不包含空字符串

<!-- 准备好一个容器-->
<div id="root">
    <h2>人员列表</h2>
    <button @click="updateMei">更新马冬梅的信息</button>
    <ul>
        <li v-for="(p,index) of persons" :key="p.id">
            {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
        </li>
    </ul> 
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      keyWord:'',
      persons:[
        {
    
    id:'001',name:'马冬梅',age:19,sex:'女'},
        {
    
    id:'002',name:'周冬雨',age:20,sex:'女'},
        {
    
    id:'003',name:'周杰伦',age:21,sex:'男'},
        {
    
    id:'004',name:'温兆伦',age:22,sex:'男'}
      ],
    },
    watch:{
    
    
      keyWord(val){
    
    
      //筛选出包含input字的名字
        this.Persons = this.persons.filter((p)=>{
    
    
          return p.name.indexOf(val) !== -1
        })
      }
    }

示例3：正确写法

针对示例1的越过滤越少的问题
（1）在data中新建数组filPersons，
（2）watch中this.filPersons = this.persons.filter(xxx)
针对示例2的输入空字符串则不显示原列表的问题
watch中的keyWord设置immediate:true

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <ul>
    <li v-for="(p,index) of filPersons" :key="index">
      {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      keyWord:'',
      persons:[
        {
    
    id:'001',name:'马冬梅',age:19,sex:'女'},
        {
    
    id:'002',name:'周冬雨',age:20,sex:'女'},
        {
    
    id:'003',name:'周杰伦',age:21,sex:'男'},
        {
    
    id:'004',name:'温兆伦',age:22,sex:'男'}
      ],
      //filter
      filPersons:[]
    },
    watch:{
    
    
    keyWord:{
    
    
      immediate:true,
      handler(val){
    
    
      //筛选出包含input字符的名字
        this.filPersons = this.persons.filter((p)=>{
    
    
          return p.name.indexOf(val) !== -1
        })
      }
    }

示例4：用computed实现

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <ul>
    <li v-for="(p,index) of filPersons" :key="index">
      {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      keyWord:'',
      persons:[
        {
    
    id:'001',name:'马冬梅',age:19,sex:'女'},
        {
    
    id:'002',name:'周冬雨',age:20,sex:'女'},
        {
    
    id:'003',name:'周杰伦',age:21,sex:'男'},
        {
    
    id:'004',name:'温兆伦',age:22,sex:'男'}
      ]
    },
    computed:{
    
    
      filPersons(){
    
    
        return this.persons.filter((p)=>{
    
    
          return p.name.indexOf(this.keyWord) !== -1
      }
    }

2.10.4 列表排序

<div id="root">
  <h2>人员列表</h2>
  <input type="text" placeholder="请输入名字" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
<ul>
  <li v-for="(p,index) of filPersons" :key="index">
    {
    
    {
    
    p.name}}-{
    
    {
    
    p.age}}-{
    
    {
    
    p.sex}}
  </li>
</ul>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      keyWord:'',
      persons:[
        {
    
    id:'001',name:'马冬梅',age:39,sex:'女'},
        {
    
    id:'002',name:'周冬雨',age:20,sex:'女'},
        {
    
    id:'003',name:'周杰伦',age:21,sex:'男'},
        {
    
    id:'004',name:'温兆伦',age:42,sex:'男'}
      ]
    },
    computed:{
    
    
      filPersons(){
    
    
        const arr = this.persons.filter((p)=>{
    
    
          return p.name.indexOf(this.keyWord) !== -1
      })
      //判断是否需要排序
      if(this.sortType){
    
    
        arr.sort((p1,p2)=>{
    
    
          return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
        })
      }
      return arr
    }
  }
})
</script>

2.10.5 Vue.set()

Vue.set()的使用
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
用法
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (例如vm.myObject.newProperty = ‘hi’)

2.10.6 Vue监视数据的原理

Vue监视数据的原理：

vue会监视data中所有层次的数据
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
  Vue.set(target，propertyName/index，value) 或
  vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()

注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性。

2.11 收集表单数据

收集表单数据：

若 input type = “text”，则v-model收集的是value值，用户输入的就是value值；
若input type = “radio”，则v-model收集的是value值，且要给标签配置value值;
若input type = “checkbox”
1.没有配置input的value属性，要么收集的就是checked（勾选or未勾选，是布尔值）
2.配置input的value属性
（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
（2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：
（1）lazy：失去焦点再收集数据
（2）number：输入字符串转为有效的数字
（3）trim：输入首尾空格过滤

代码示例：
一个表单

<div id="root">
<form>
  账号<input type="text" v-model="userInfo.account"><br/><br/>
  密码<input type="password" v-model="userInfo.password"><br/><br/>
  性别:
  男<input type="radio" v-model="userInfo"   value="male">
  女<input type="radio" v-model="userInfo" value="female">
  爱好:
  学习<input type="checkbox" v-model="userInfo.hobby" value="study">
  游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
  吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br/><br/>
  所属校区
  <select v-model="userInfo.city">
    <option value="">请选择小区</option>
    <option value="beijing">北京</option>
    <option value="beijing">上海</option>
    <option value="beijing">武汉</option>
  </select><br/><br/>
  其他信息:
  <textarea v-model="userInfo.other"></textarea><br/><br/>
  <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.xxx.com">
  <button>提交</button>
</form>
</div>

<script>
  new Vue({
    
    
    el:'#root',
    data:{
    
    
      account:'',
      password:'',
      sex:'female',
      hobby:[],
    }
  })
</script>
</html>

2.12 过滤器

过滤器

定义：
对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）
语法：
（1）注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})
（2）使用过滤器：{ { xxx | 过滤器名 }} 或 v-bind: 属性 =“xxx | 过滤器名”
备注：
（1）过滤器也可以接收额外参数，多个过滤器也可以串联
（2）并没有改变原本的数据，而是产生新的对应的数据