官方文档 Vue2
官方文档 Vue3
官方视频

基础 #

介绍 #

Vue 基于虚拟 DOM，一种可以预先通过 JavaScript 进行各种运算，把最终的 DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。

模板语法 #

插值语法 #

数据绑定最常见的形式就是使用 Mustache 语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>
<span>Message: {{ msg }}</span>

1. v-once - 指令可以进行一次性地插值
2. v-html - 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：

<!-- rawHtml 是 html 文本 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<!-- rawHtml 是 html 文本 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

3. v-bind - Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<!-- 当 isButtonDisabled 为假的布尔值，按钮无法使用 -->
<button v-bind:disabled="isButtonDisabled">Button</button>
<!-- 当 isButtonDisabled 为假的布尔值，按钮无法使用 -->
<button v-bind:disabled="isButtonDisabled">Button</button>

4. 使用 js 表达式

指令 #

• v-bind - 用于响应式地更新 HTML attribute，单向绑定

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

• v-model - 双向绑定，但是只能应用在表单类元素上（输入类元素，如input、select）

v-model 默认收集的就是 value 值，v-model:value，可以简写为 v-model。

• v-on - 用于监听 DOM 事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

动态参数 #

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。

1. 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。
2. 如空格和引号，放在 HTML attribute 名里是无效的。例如：

<a v-bind:['foo' + bar]="value"> ... </a>
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

修饰符 #

修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

键盘事件 keydown & keyup #

<input type="text" @keyup="showInfo">
<input type="text" @keyup="showInfo">

new Vue({
    el: '#root', 
    methods:{
        showInfo(e){
            console.log(e.target.value);//input 的 value 值
            console.log(e.keyCode);//键盘所按按键的编码，可能每种键盘不一样
            console.log(e.key);//按键名字，可以用于绑定
        },
    }
})
new Vue({
    el: '#root', 
    methods:{
        showInfo(e){
            console.log(e.target.value);//input 的 value 值
            console.log(e.keyCode);//键盘所按按键的编码，可能每种键盘不一样
            console.log(e.key);//按键名字，可以用于绑定
        },
    }
})

• Vue 中常用的按键别名：
  • 回车：enter
  • 删除：delete
  • 退出：esc
  • 空格：tab （特殊，需配合 keydown 使用）
  • 换行：tab
  • 上：up
  • 下：down
  • 左：left
  • 右：right

如，敲击回车键时，触发函数 showInfo

<input type="text" @keyup.enter="showInfo">
<input type="text" @keyup.enter="showInfo">

• 可用原始 key 值去绑定，注意有多个单词要使用 ketab-case 的命名方式，如 CapsLock => caps-lock

• 系统修饰键：ctrl、alt、shift、meta，需注意：

  • 一般与 keydown 配合
  • 若使用 keyup，需要同时按下其他键，随后释放其他键，事件才被触发。（不推荐）

• 可以使用 keyCode 指定具体按键，如

<input type="text" @keyup.13="showInfo">
<input type="text" @keyup.13="showInfo">

一般来说，enter 的 keyCode 为13，但是不同键盘，可能编码不同，不推荐。

• Vue.config.keyCodes.(custom key name) = (keyCode)，可以定制按键别名，如

 Vue.config.keyCodes.huiche = 13
 Vue.config.keyCodes.huiche = 13

注意：

<input type="text" @keyup.ctrl.y="showInfo">
<input type="text" @keyup.ctrl.y="showInfo">

表示需同时按下 ctrl 和 y 键，才触发函数。

事件处理 #

Vue 绑定元素 #

• 第一种方式：初始化实例对象的时候，使用 el 属性配置
• 第二种：vm.$mount('#root')

data 的两种写法 #

1. 对象式
2. 函数式，使用组件时，必须使用函数式

Object.defineProperty #

let number = 18
const person = {
    name:'Amy',
    sex:'female',
}

Object.defineProperty(person,'age',{
    // value:18,
    enumerable:true,//控制属性是否可以枚举，默认值是 false
    writable:true,//控制属性是否可以被修改，默认是 false
    configurable:true,//控制属性是否可以被删除，默认是 false
    // 读取 age 属性时，getter 会被调用，且返回值就是 age 的值
    get(){
        return number
    },
    // age 属性被修改时，setter 会被调用，且会收到修改的具体值
    set(value){
        number = value
    }
})
let number = 18
const person = {
    name:'Amy',
    sex:'female',
}

Object.defineProperty(person,'age',{
    // value:18,
    enumerable:true,//控制属性是否可以枚举，默认值是 false
    writable:true,//控制属性是否可以被修改，默认是 false
    configurable:true,//控制属性是否可以被删除，默认是 false
    // 读取 age 属性时，getter 会被调用，且返回值就是 age 的值
    get(){
        return number
    },
    // age 属性被修改时，setter 会被调用，且会收到修改的具体值
    set(value){
        number = value
    }
})

事件处理 #

<div id="root">
    <button @click="showInfo"></button>
    <button @click="showInfo2($event,18)"></button>
</div>
<div id="root">
    <button @click="showInfo"></button>
    <button @click="showInfo2($event,18)"></button>
</div>

new Vue({
    el: '#root', 
    methods:{
        showInfo(){
            alert('11')
        },
        showInfo2(event,value){
            console.log(event.target);//触发此函数的元素
            alert(value)
        }
    }
})
new Vue({
    el: '#root', 
    methods:{
        showInfo(){
            alert('11')
        },
        showInfo2(event,value){
            console.log(event.target);//触发此函数的元素
            alert(value)
        }
    }
})

事件修饰符 #

1. prevent 阻止默认事件，如 a 标签的跳转

<a href="http://..." @click.prevent="fun1">点我</a>
<a href="http://..." @click.prevent="fun1">点我</a>

2. stop 阻止事件冒泡
3. once 事件只触发一次
4. capture 使用事件的捕获模式，捕获时就触发事件
5. self 只有 event.target 是当前操作的元素时才触发事件

<div class="demo1" @click.self="showInfo">
    <button @click="showInfo"></button>
</div>
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo"></button>
</div>

new Vue({
    el: '#root', 
    methods:{
        showInfo(e){
            console.log(e.target);
        },
    }
})
new Vue({
    el: '#root', 
    methods:{
        showInfo(e){
            console.log(e.target);
        },
    }
})

如果不使用 self，点击 button，输出2次 <button @click="showInfo"></button>。

6. passive 事件的默认行为立即执行，无需等待事件回调执行完毕

以滚动事件为例，分为鼠标滚轮滚动 well，以及滚动条滚动 scroll。

<ul @wheel="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul @wheel="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

wheel 事件的默认行为，滚动条滚动，要在 demo 函数执行完毕后才触发。

<ul @wheel.passive="demo" class="list">
<!-- ... -->
</ul>
<ul @wheel.passive="demo" class="list">
<!-- ... -->
</ul>

使用 passive，滚动条立即滚动，回调函数 demo 也在执行。

<ul @scroll="demo" class="list">
<!-- ... -->
</ul>
<ul @scroll="demo" class="list">
<!-- ... -->
</ul>

但是 scroll 不需要使用 passive，也是立即滚动滚动条。

注意：

修饰符可以连续写

<div class="demo1" @click="showInfo">
    <a href="https://..." @click.stop.prevent="showInfo"></button>
</div>
<div class="demo1" @click="showInfo">
    <a href="https://..." @click.stop.prevent="showInfo"></button>
</div>

先阻止冒泡，再阻止 a 标签默认的跳转行为。

计算属性 computed #

对于模板中任何复杂逻辑，都应当使用计算属性。

姓名案例 #

1. 使用插值语法

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

new Vue({
    el: '#root', 
    data:{
        lastName:'张',
        firstName:'三',
    }
})
new Vue({
    el: '#root', 
    data:{
        lastName:'张',
        firstName:'三',
    }
})

但是，仅限于没有过多对数据的过多操作时，优选使用插值语法。

2. 使用 methods

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName()}}</span>
    <!-- 不能简写为 {{fullName}} ，只有在绑定事件时，没有传参，才能省去括号-->
</div>
<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName()}}</span>
    <!-- 不能简写为 {{fullName}} ，只有在绑定事件时，没有传参，才能省去括号-->
</div>

new Vue({
    el: '#root', 
    data:{
        firstName:'张',
        lastName:'三',
    },
    methods:{
        fullName(){
            return this.lastName + ' - ' + this.firstName
        }
    }
})
new Vue({
    el: '#root', 
    data:{
        firstName:'张',
        lastName:'三',
    },
    methods:{
        fullName(){
            return this.lastName + ' - ' + this.firstName
        }
    }
})

注意：

Vue 中的 data 任一数据发生变化时，都会重新解析模板，凡是用到变化的数据，都会重新解析。但是 Vue 无法判断 methods 中的方法是否用到 data 中所变化的数据， 所以只要 data 任一数据发生变化时，模板中使用了 methods 中的方法都会重新解析，不论 methods 中的方法是否依赖 data 中改变的数据。

3. 使用计算属性

<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName}}</span>
    <!-- 注意，要与 methods 区分， fullName 是 vm 上的属性，不能写成 fullName() -->
</div>
<div id="root">
    姓：<input type="text" v-model="firstName"> <br/>
    名：<input type="text" v-model="lastName"> <br/>
    全名：<span>{{fullName}}</span>
    <!-- 注意，要与 methods 区分， fullName 是 vm 上的属性，不能写成 fullName() -->
</div>

new Vue({
    el: '#root', 
    data:{
        firstName:'张',
        lastName:'三',
    },
    computed:{
        fullName:{
            // 当有人读取 fullName 时，get 被调用，且返回值作为 fullName 的值，放在 vm 上
            // get 调用：1.初次读取 fullName时；2.所依赖的数据发生变化时
            get(){
                return this.lastName + ' - ' + this.firstName
            },
            // set 调用：fullName 被修改时
            set(value){
                // this.lastName = value..
                // this.firstName = value..
            }
        }
    }
})
new Vue({
    el: '#root', 
    data:{
        firstName:'张',
        lastName:'三',
    },
    computed:{
        fullName:{
            // 当有人读取 fullName 时，get 被调用，且返回值作为 fullName 的值，放在 vm 上
            // get 调用：1.初次读取 fullName时；2.所依赖的数据发生变化时
            get(){
                return this.lastName + ' - ' + this.firstName
            },
            // set 调用：fullName 被修改时
            set(value){
                // this.lastName = value..
                // this.firstName = value..
            }
        }
    }
})

计算属性：

1. 只有通过已有属性计算，才会触发 get 的调用，如

var a = 1;
new Vue({
    // ...
    computed: {
        fullName: {
            get() {
                return this.lastName + ' - ' + this.firstName + a
            },
        }
    }
    // ...
})
var a = 1;
new Vue({
    // ...
    computed: {
        fullName: {
            get() {
                return this.lastName + ' - ' + this.firstName + a
            },
        }
    }
    // ...
})

a 不是 vm 上的属性，a 变化时，fullName 不会更新。

2. computed 与 methods 相比，内部有缓存机制，效率更高。
3. 必须使用 set 函数相应修改计算属性，使用所依赖的数据发生改变。
4. 只需读取计算属性，可简写：

// ...
computed: {
    fullName(){
        return this.lastName + ' - ' + this.firstName
    }
}
// ...
// ...
computed: {
    fullName(){
        return this.lastName + ' - ' + this.firstName
    }
}
// ...

5. methods 和 data 中的属性，是直接放置在 vm 上的，而 computed 的属性值，是通过其中的 get 函数返回值决定的。

监视属性 watch #

天气案例：

1. methods、computed

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

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

或者只用 computed

<div id="root">
    <h2>今天的天气是{{info}}</h2>
    <button @click="isHot = ! isHot">切换天气</button>
</div>
<div id="root">
    <h2>今天的天气是{{info}}</h2>
    <button @click="isHot = ! isHot">切换天气</button>
</div>

new Vue({
    el: '#root',
    data: {
        isHot: true,
    },
    computed: {
        info() {
            return this.isHot ? '炎热' : '凉爽'
        }
    }
})
new Vue({
    el: '#root',
    data: {
        isHot: true,
    },
    computed: {
        info() {
            return this.isHot ? '炎热' : '凉爽'
        }
    }
})

注意，如果页面中没有使用 vm 上的属性，就算数据变化了页面也不会更新数据。而且，通过 Vue 指令或者语法，只能控制 vm 上的属性，window 上的函数，都无法使用。

2. watch 监视

// ...
watch: {
    isHot: {
        immediate:true,//初始化时让 handler 调用一下
        // 当 isHot 发生改变时，handler 被调用
        handler(newValue,oldValue) {
        }
    }
}
// ...
// ...
watch: {
    isHot: {
        immediate:true,//初始化时让 handler 调用一下
        // 当 isHot 发生改变时，handler 被调用
        handler(newValue,oldValue) {
        }
    }
}
// ...

不仅可以监视 data 上的属性，也可以监视计算属性。

另一种写法：

vm.$watch('isHot', {
    immediate: true,
    handler(newValue, oldValue) {
    }
})
vm.$watch('isHot', {
    immediate: true,
    handler(newValue, oldValue) {
    }
})

这种写法往往用于初始化时，无法确定属性是否需要侦听。

注意：监视属性，必须存在，但是如果监视不存在的属性，也不会报错。

深度监视 #

<div id="root">
    <h2>a 的值是:{{numbers.a}}</h2>
    <button @click="numbers.a++">点我 a + 1</button>
    <h2>b 的值是:{{numbers.b}}</h2>
    <button @click="numbers.b++">点我 b + 1</button>
</div>
<div id="root">
    <h2>a 的值是:{{numbers.a}}</h2>
    <button @click="numbers.a++">点我 a + 1</button>
    <h2>b 的值是:{{numbers.b}}</h2>
    <button @click="numbers.b++">点我 b + 1</button>
</div>

new Vue({
    el: '#root',
    data: {
        numbers: {
            a:1,
            b:1,
        },
    },
    watch: {
        'numbers.a': {
            handler(newValue, oldValue) {
                console.log('newValue :>> ', newValue);
                console.log('oldValue :>> ', oldValue);
            }
        }
    }
})
new Vue({
    el: '#root',
    data: {
        numbers: {
            a:1,
            b:1,
        },
    },
    watch: {
        'numbers.a': {
            handler(newValue, oldValue) {
                console.log('newValue :>> ', newValue);
                console.log('oldValue :>> ', oldValue);
            }
        }
    }
})

上述中，a 发生变化，会触发 handler，b 变化时或者如果监视 numbers ，则不会触发 handler。

Vue 默认是可以监测到多层级的数据改变的，但是 watch 属性是不可以的，如果要监测，则要开启 deep：

watch: {
    numbers: {
        deep:true,//监测多级结构中所有属性变化
        handler(newValue, oldValue) {
            console.log('newValue :>> ', newValue);
            console.log('oldValue :>> ', oldValue);
        }
    }
}
watch: {
    numbers: {
        deep:true,//监测多级结构中所有属性变化
        handler(newValue, oldValue) {
            console.log('newValue :>> ', newValue);
            console.log('oldValue :>> ', oldValue);
        }
    }
}

监视的简写 #

当 watch 只使用 handler 配置时，（不使用 deep、immediate）可以简写：

// ...
watch: {
    numbers(newValue, oldValue) {
        console.log('newValue :>> ', newValue);
        console.log('oldValue :>> ', oldValue);
    }
}
// ...
// ...
watch: {
    numbers(newValue, oldValue) {
        console.log('newValue :>> ', newValue);
        console.log('oldValue :>> ', oldValue);
    }
}
// ...

或者

vm.$watch('isHot', function (newValue, oldValue) {
    // ...
})
vm.$watch('isHot', function (newValue, oldValue) {
    // ...
})

注意，不能写成箭头函数。

姓名案例 - watch #

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

new Vue({
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三',
        fullName: '张-三'
    },
    watch: {
        firstName(v1) {
            setTimeout(() => {
                this.fullName = v1 + "-" + this.lastName
            }, 1000);
        },
        lastName(v1) {
            this.fullName = this.firstName + "-" + v1
        }
    }
})
new Vue({
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三',
        fullName: '张-三'
    },
    watch: {
        firstName(v1) {
            setTimeout(() => {
                this.fullName = v1 + "-" + this.lastName
            }, 1000);
        },
        lastName(v1) {
            this.fullName = this.firstName + "-" + v1
        }
    }
})

这与 computed 相比，复杂许多，但是，如果想要在 firstName 或 lastName 发生变化后 1s fullName 再改变，只能使用 watch，因为定时器改变了计算属性的返回值。

computed: {
    fullName() {
        setTimeout(() => {
            return this.firstName + "-" + this.lastName
        }, 1000);
    },
}
computed: {
    fullName() {
        setTimeout(() => {
            return this.firstName + "-" + this.lastName
        }, 1000);
    },
}

计算属性 fullName 没有返回值，为空。

综上，有异步任务时，使用 watch。

computed 与 watch 的区别 #

• computed 能完成的功能，watch 都可以完成。
• watch 能实现异步操作， computed 不能。

原则 #

• 被 Vue 管理的函数，最好写成普通函数，这样 this 指向才是 vm 或 组件实例对象。
• 所有不被 Vue 管理的函数，如定时器（setTimeout、ajax 回调函数，最好写成箭头函数，这样 this 指向才是 vm 或 组件实例对象。

Class 与 Style 绑定 #

绑定 class： #

1. 一般绑定，使用 v-bind

   • 只有一个样式需要动态绑定，但是类名不确定

   <div id="root">
       <div class="basic" :class="mood" @click="changeMood"></div>
   </div>
   <div id="root">
       <div class="basic" :class="mood" @click="changeMood"></div>
   </div>
   

   new Vue({
   el: '#root',
   data: {
       mood: "normal"
   },
   methods: {
       changeMood() {
           const moods = ['normal', 'happy', 'sad'];
           const random_index = Math.floor(Math.random() * 3);
           this.mood = moods[random_index];
       }
   },
   })
   new Vue({
   el: '#root',
   data: {
       mood: "normal"
   },
   methods: {
       changeMood() {
           const moods = ['normal', 'happy', 'sad'];
           const random_index = Math.floor(Math.random() * 3);
           this.mood = moods[random_index];
       }
   },
   })
   

   • 使用数组配置，多个样式动态绑定，样式个数和类名都不确定

   <div class="basic" :class="classArr" @click="changeMood"></div>
   <div class="basic" :class="classArr" @click="changeMood"></div>
   

   //...
   data: {
       classArr: ['normal', 'happy', 'sad']
   },
   methods: {
       changeMood() {
           this.classArr.shift()
       }
   },
   //...
   //...
   data: {
       classArr: ['normal', 'happy', 'sad']
   },
   methods: {
       changeMood() {
           this.classArr.shift()
       }
   },
   //...
   

   • 使用对象配置，多个样式动态绑定，样式个数和类名都确定，但是不确定每个样式是否都要使用

   <div id="root">
       <div class="basic" :class="classObj" @click="changeMood"></div>
   </div>
   <div id="root">
       <div class="basic" :class="classObj" @click="changeMood"></div>
   </div>
   

   //...
   data: {
       classObj: {
           "normal": true, "happy": true, "sad": true
       }
   },
   //...
   //...
   data: {
       classObj: {
           "normal": true, "happy": true, "sad": true
       }
   },
   //...
   

2. 对象语法

在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

<div v-bind:class="classObject"></div>
<div v-bind:class="classObject"></div>

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
   return {
   active: this.isActive && !this.error,
   'text-danger': this.error && this.error.type === 'fatal'
   }
}
}
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
   return {
   active: this.isActive && !this.error,
   'text-danger': this.error && this.error.type === 'fatal'
   }
}
}

4. 数组语法

绑定 style #

    <div id="root">
        <div class="basic" style="font-size: 40px;"></div>
        <div class="basic" :style="{fontSize:fsize + 'px'}"></div>
        <div class="basic" :style="styleObj"></div><!-- 对象写法 -->
        <div class="basic" :style="[styleObj,styleObj2]"></div><!-- 数组写法 -->
        <div class="basic" :style="styleArr"></div><!-- 数组写法 -->
    </div>
    <div id="root">
        <div class="basic" style="font-size: 40px;"></div>
        <div class="basic" :style="{fontSize:fsize + 'px'}"></div>
        <div class="basic" :style="styleObj"></div><!-- 对象写法 -->
        <div class="basic" :style="[styleObj,styleObj2]"></div><!-- 数组写法 -->
        <div class="basic" :style="styleArr"></div><!-- 数组写法 -->
    </div>

    new Vue({
        el: '#root',
        data: {
            fsize: 40,
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleObj2: {
                backgroundColor: 'orange'
            },
            styleArr: [
                {
                    fontSize: '40px',
                    color: 'red',
                },
                {
                    backgroundColor: 'orange'
                }
            ]
        },
    })
    new Vue({
        el: '#root',
        data: {
            fsize: 40,
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleObj2: {
                backgroundColor: 'orange'
            },
            styleArr: [
                {
                    fontSize: '40px',
                    color: 'red',
                },
                {
                    backgroundColor: 'orange'
                }
            ]
        },
    })

注意，类型写错了 Vue 也不会报错。

条件渲染 #

• v-show 适合用于高频率切换是否显示
• v-if 适合低频率切换是否显示

v-if 和 v-else-if 类似 if…else 语句执行。

v-else 中没有条件判断。

<div v-if="n === 1">1</div>
<div v-else-if="n === 2">2</div>
<div v-else-if="n === 3">3</div>
<div v-else>哈哈哈</div>
<div v-if="n === 1">1</div>
<div v-else-if="n === 2">2</div>
<div v-else-if="n === 3">3</div>
<div v-else>哈哈哈</div>

• 当有多个条件渲染相同时

<div v-show="n === 1">
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>
</div>
<div v-show="n === 1">
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>
</div>

使用 template 不会破坏页面结构。

<template v-show="n === 1">
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>
</template>
<template v-show="n === 1">
    <div>hello1</div>
    <div>hello2</div>
    <div>hello3</div>
</template>

列表渲染 #

v-for #

1. v-for 遍历数组

<div id="root">
    <ul>
        <li v-for="p in people" :key="p.id"> {{p.name}} - {{p.age}}</li>
    </ul>
</div>
<div id="root">
    <ul>
        <li v-for="p in people" :key="p.id"> {{p.name}} - {{p.age}}</li>
    </ul>
</div>

new Vue({
    el: '#root',
    data: {
        people: [
            { id: "001", name: "张三", age: "18" },
            { id: "002", name: "李四", age: "19" },
            { id: "003", name: "王五", age: "23" },
        ]
    },
})
new Vue({
    el: '#root',
    data: {
        people: [
            { id: "001", name: "张三", age: "18" },
            { id: "002", name: "李四", age: "19" },
            { id: "003", name: "王五", age: "23" },
        ]
    },
})

注意，遍历生成数据结构时，必须给每个元素动态绑定 key。

<li v-for="(value,index) in people" > {{value}} - {{index}}</li>
<li v-for="(value,index) in people" > {{value}} - {{index}}</li>

上述中，value 是 people 中的每个元素，index 是元素索引值。所以，可以用 index 动态绑定 key。

<li v-for="(value,index) in people" :key="index"> {{value}} - {{index}}</li>
<li v-for="(value,index) of people" :key="index"> {{value}} - {{index}}</li>
<li v-for="(value,index) in people" :key="index"> {{value}} - {{index}}</li>
<li v-for="(value,index) of people" :key="index"> {{value}} - {{index}}</li>

2. v-for 遍历对象

//...
data: {
    car: {
        brand: "Tesla",
        price: "300 million",
        color: "black",
    }
},
//...
//...
data: {
    car: {
        brand: "Tesla",
        price: "300 million",
        color: "black",
    }
},
//...

<li v-for="(value,key) of car" :key="key"> {{value}} - {{key}}</li>
<li v-for="(value,key) of car" :key="key"> {{value}} - {{key}}</li>

key 是对象键名，value 是对象键值。

3. v-for 遍历字符串

<li v-for="(char,index) of str" :key="index"> {{char}} - {{index}}</li>
<li v-for="(char,index) of str" :key="index"> {{char}} - {{index}}</li>

char 是每个字符元素，index 是每个字符索引值。

4. v-for 遍历数字

<li v-for="(number,index) of numbers" :key="index"> {{number}} - {{index}}</li>
<li v-for="(number,index) of numbers" :key="index"> {{number}} - {{index}}</li>

key 的作用与原理 #

key 用于标识节点。

虚拟 DOM 的对比算法

当对数据进行破坏顺序操作时，使用 index 作为 key ，新生成的真实 DOM 元素，对应会出现问题。

因为如果对比中，如果虚拟 DOM 不变，是直接使用之前的真实 DOM。

总结：

1. index 作为 key 可能会引发问题：
   1. 对数据进行：逆序添加、逆序删除等破坏顺序的操作时，会产生没有必要的真实 DOM 更新，效率低。
   2. 如果结构中还包含输入类 DOM：会产生错误 DOM 更新。

列表过滤 #

1. watch

注意，filter 返回的是新数组，不改变原数组。

<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
        <li v-for="p in filterPeople" ::key="p.id"> {{p.name}} - {{p.sex}}</li>
    </ul>
</div>
<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
        <li v-for="p in filterPeople" ::key="p.id"> {{p.name}} - {{p.sex}}</li>
    </ul>
</div>

new Vue({
    el: '#root',
    data: {
        keyWord: "",
        people: [
            { id: "001", name: "周冬雨", sex: "female" },
            { id: "002", name: "马冬梅", sex: "female" },
            { id: "003", name: "周杰伦", sex: "male" },
            { id: "004", name: "温兆伦", sex: "male" },
        ],
        filterPeople: [],
    },
    watch: {
        keyWord: {
            immediate:true,// 初始化 filterPeople
            handler(val) {
                this.filterPeople = this.people.filter(item => item.name.indexOf(val) > -1)
            }
        }
    }
})
new Vue({
    el: '#root',
    data: {
        keyWord: "",
        people: [
            { id: "001", name: "周冬雨", sex: "female" },
            { id: "002", name: "马冬梅", sex: "female" },
            { id: "003", name: "周杰伦", sex: "male" },
            { id: "004", name: "温兆伦", sex: "male" },
        ],
        filterPeople: [],
    },
    watch: {
        keyWord: {
            immediate:true,// 初始化 filterPeople
            handler(val) {
                this.filterPeople = this.people.filter(item => item.name.indexOf(val) > -1)
            }
        }
    }
})

2. computed

//...
computed:{
    filterPeople(){
        return this.people.filter(item => item.name.indexOf(this.keyWord) > -1)
    }
}
//...
//...
computed:{
    filterPeople(){
        return this.people.filter(item => item.name.indexOf(this.keyWord) > -1)
    }
}
//...

注意，data 中，不重复声明 filterPeople。

列表排序 #

注意，sort 会改变原数组。

按照年龄排序所搜索到的人：

<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType = 1">年龄升序</button>
    <button @click="sortType = 2">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="p in filterPeople" ::key="p.id"> {{p.name}} - {{p.sex}} - {{p.age}}</li>
    </ul>
</div>
<div id="root">
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType = 1">年龄升序</button>
    <button @click="sortType = 2">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="p in filterPeople" ::key="p.id"> {{p.name}} - {{p.sex}} - {{p.age}}</li>
    </ul>
</div>

new Vue({
    el: '#root',
    data: {
        keyWord: "",
        sortType: 0,
        people: [
            { id: "001", name: "周冬雨", age: 23, sex: "female" },
            { id: "002", name: "马冬梅", age: 45, sex: "female" },
            { id: "003", name: "周杰伦", age: 38, sex: "male" },
            { id: "004", name: "温兆伦", age: 21, sex: "male" },
        ],
    },
    computed: {
        filterPeople() {
            const arr = this.people.filter(item => item.name.indexOf(this.keyWord) > -1);
            if(this.sortType) {
                arr.sort((m, n) => {
                    return this.sortType === 1 ? m.age - n.age : n.age - m.age
                })
            }
            return arr;
        }
    }
})
new Vue({
    el: '#root',
    data: {
        keyWord: "",
        sortType: 0,
        people: [
            { id: "001", name: "周冬雨", age: 23, sex: "female" },
            { id: "002", name: "马冬梅", age: 45, sex: "female" },
            { id: "003", name: "周杰伦", age: 38, sex: "male" },
            { id: "004", name: "温兆伦", age: 21, sex: "male" },
        ],
    },
    computed: {
        filterPeople() {
            const arr = this.people.filter(item => item.name.indexOf(this.keyWord) > -1);
            if(this.sortType) {
                arr.sort((m, n) => {
                    return this.sortType === 1 ? m.age - n.age : n.age - m.age
                })
            }
            return arr;
        }
    }
})

计算属性使用的属性如果发生改变，都会重新进行计算。

Vue 监测数据改变的原理 #

更新时的问题：

<button @click="updateInfo">点我更新列表</button>
<ul>
    <li v-for="p in people" ::key="p.id"> {{p.name}} - {{p.sex}} - {{p.age}}</li>
</ul>
<button @click="updateInfo">点我更新列表</button>
<ul>
    <li v-for="p in people" ::key="p.id"> {{p.name}} - {{p.sex}} - {{p.age}}</li>
</ul>

//...
data: {
    people: [
        { id: "001", name: "周冬雨", age: 23, sex: "female" },
    ],
},
methods: {
    updateInfo(){
        this.people[0] = { id: "001", name: "张三", age: 33, sex: "male" }
        //this.people.splice(0,1,{ id: "001", name: "张三", age: 33, sex: "male" })
    }
},
//...
//...
data: {
    people: [
        { id: "001", name: "周冬雨", age: 23, sex: "female" },
    ],
},
methods: {
    updateInfo(){
        this.people[0] = { id: "001", name: "张三", age: 33, sex: "male" }
        //this.people.splice(0,1,{ id: "001", name: "张三", age: 33, sex: "male" })
    }
},
//...

上述中，点击更新按钮后，数据已经发生改变，但是列表并不会发生变化。而且如果在打开 Vue 开发者工具后点击按钮，Vue 不会监测到变化。而在点击按钮后，Vue 能监测到变化，但是列表不会更新。

因为直接操作数组的索引值，Vue 不能监测到数组的变化。使用 splice，就可以正常监测改变。

1. Vue 如何监测对象改变

不管对象深度有多少，Vue 都能监测改变。下列的 a、b、name1、name2，都能监测到。

//...
data: {
    age:18,
    numbers:{
        a:1,
        b:2
    },
    people:[
        {
            name1:'张三',
            name2:'李四'
        }
    ]
},
//...
//...
data: {
    age:18,
    numbers:{
        a:1,
        b:2
    },
    people:[
        {
            name1:'张三',
            name2:'李四'
        }
    ]
},
//...

• Vue.set()

如果想在 student 上添加新的属性 ，使用 vm._data.student.sex = 'male' 或 ``vm.student.sex = 'male'，都没有为 sex设置数据代理，Vue 不能监测到sex`。

//...
data: {
    student:{
        name:'张三',
    }
},
//...
//...
data: {
    student:{
        name:'张三',
    }
},
//...

注意，上述中，如果模板读取 student.sex，不会报错，因为 undefined 显示为空。

Vue.set(target,key,val) 的使用：

• Vue.set(vm._data.student.sex,'sex','male') | Vue.set(vm.student.sex,'sex','male')
• vm.$set(vm._data.student.sex,'sex','male') | vm.$set(vm.student.sex,'sex','male')
• 使用 method：

<p v-show="student.sex">{{student.sex}}</p>
<p v-show="student.sex">{{student.sex}}</p>

//...
methods: {
    addSex(){
        Vue.set(this.student,'sex','male')
    },
    addSex2(){
        this.$set(this.student,'sex','male')
    }
},
//...
//...
methods: {
    addSex(){
        Vue.set(this.student,'sex','male')
    },
    addSex2(){
        this.$set(this.student,'sex','male')
    }
},
//...

Vue.set()的局限性：不能在 Vue 实例，或者 Vue 实例的跟数据对象上添加属性，如 data。

1. Vue 如何监测数组改变

• 没有为数组中的元素设置 getter 和 setter，如下列的 hobby 属性，如果使用 vm._data.hobby[0] = 'dancing'，Vue 是无法监测到的。

data: {
    hobby: ['play games', 'drink water', 'watch TV'],
},
data: {
    hobby: ['play games', 'drink water', 'watch TV'],
},

但是，如果使用能改变数组自身的方法，Vue 是可以监测的：push，pop，shift，unshift，splice，sort，reverse。

注意：Vue 上的这些数组方法与原始的数组方法是不一样的，如 vm._data.hobby.push === Array.prototype.push 的值是 false。

当然，使用 Vue.set(vm.hobby,0,'dancing')，也可以正常监测。

Vue 监视数据总结 #

1. Vue 会监视 data 中所有层次的数据。
2. 监测对象：如果在 new Vue 时没有传入要监测的数据，要使用 Vue.set()（vm.$set()）添加属性才能给后添加的属性做响应式。
3. 监测数组：通过包裹数组更新元素的方法。
4. 在 Vue 中修改数组中的某个元素一定要用如下方法：push，pop，shift，unshift，splice，sort，reverse，或者 Vue.set（vm.$set）。
5. 注意： Vue.set（vm.$set）不能给 vm 或者 vm 的根数据对象添加属性。

v-model 收集表单数据 #

v-model 默认收集 input 的 value 值。

<form @submit.prevent="send"><!-- @submit.prevent 阻止表单提交后跳转的默认行为 -->
    <label for="account">账号：</label>
    <input type="text" id="account" v-model.trim="account"><br><br>
    <!-- .trim 修饰符，去掉前后空格 -->
    <label for="password">密码：</label>
    <input type="password" id="password" v-model.trim="password"><br><br>

    性别：
    男<input type="radio" name="sex" v-model="sex" value="male">
    女<input type="radio" name="sex" v-model="sex" value="female"><br><br>

    年龄：
    <!-- .number 修饰符将 age 转换为数字类型数据，type="number"限制只能输入数字-->
    <!-- 如果type="text"，输入 '18aaa11' ，age 的值为 18 -->
    <input type="number" v-model.number="age"><br><br>

    爱好：
    打游戏<input type="checkbox" name="hobby" v-model="hobby" value="game">
    看电视<input type="checkbox" name="hobby" v-model="hobby" value="TV">
    读书<input type="checkbox" name="hobby" v-model="hobby" value="book"><br><br>

    所属校区：
    <select v-model="city"><!-- 注意，如果单独为每个 option 绑定 v-model，是不起作用的 -->
        <option value="">== 请选择 ==</option>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
    </select><br><br>

    其他信息：
    <!-- .lazy 修饰符作用：在 textarea 失去焦点的时候，才监测收集数据 -->
    <textarea v-model.lazy="otherinfo"></textarea><br><br>

    <input type="checkbox" v-model="agree"> 阅读并接受<a href="https://...">《用户协议》</a><br><br>

    <button>提交</button>
</form>
<form @submit.prevent="send"><!-- @submit.prevent 阻止表单提交后跳转的默认行为 -->
    <label for="account">账号：</label>
    <input type="text" id="account" v-model.trim="account"><br><br>
    <!-- .trim 修饰符，去掉前后空格 -->
    <label for="password">密码：</label>
    <input type="password" id="password" v-model.trim="password"><br><br>

    性别：
    男<input type="radio" name="sex" v-model="sex" value="male">
    女<input type="radio" name="sex" v-model="sex" value="female"><br><br>

    年龄：
    <!-- .number 修饰符将 age 转换为数字类型数据，type="number"限制只能输入数字-->
    <!-- 如果type="text"，输入 '18aaa11' ，age 的值为 18 -->
    <input type="number" v-model.number="age"><br><br>

    爱好：
    打游戏<input type="checkbox" name="hobby" v-model="hobby" value="game">
    看电视<input type="checkbox" name="hobby" v-model="hobby" value="TV">
    读书<input type="checkbox" name="hobby" v-model="hobby" value="book"><br><br>

    所属校区：
    <select v-model="city"><!-- 注意，如果单独为每个 option 绑定 v-model，是不起作用的 -->
        <option value="">== 请选择 ==</option>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
    </select><br><br>

    其他信息：
    <!-- .lazy 修饰符作用：在 textarea 失去焦点的时候，才监测收集数据 -->
    <textarea v-model.lazy="otherinfo"></textarea><br><br>

    <input type="checkbox" v-model="agree"> 阅读并接受<a href="https://...">《用户协议》</a><br><br>

    <button>提交</button>
</form>

//...
data: {
    account: "",
    password: "",
    sex: 'female',
    age: '',
    hobby: [],// hobby 的初始值，影响 v-model 收集的数据，hobby 不能初始化为字符串
    city: '',
    otherinfo: '',
    agree: ''

},
methods: {
    send() {
        // 收集表单所有数据：
        console.log(JSON.stringify(this._data));
    }
},
//...
//...
data: {
    account: "",
    password: "",
    sex: 'female',
    age: '',
    hobby: [],// hobby 的初始值，影响 v-model 收集的数据，hobby 不能初始化为字符串
    city: '',
    otherinfo: '',
    agree: ''

},
methods: {
    send() {
        // 收集表单所有数据：
        console.log(JSON.stringify(this._data));
    }
},
//...

补充：v-model.number 将收集到的 value 值强制转换为数字。

过滤器 filters #

对要显示的数据进行特定格式化后再显示，适用于一些简单逻辑的处理。

过滤器可以对数据进行加工，如通过处理时间戳显示当前时间：

<p>显示当前时间：{{time | timeFormatter}}</p> <!-- 2023/2/4 21:50:28 -->
<p>显示当前时间：{{time | timeFormatter('yyyy-mm-dd')}}</p> <!-- 2023/2/4 21:50:28 -->
<p>显示当前时间：{{time | timeFormatter('yyyy-mm-dd') | strSlice}}</p> <!-- 2023 -->
<p>显示当前时间：{{time | timeFormatter}}</p> <!-- 2023/2/4 21:50:28 -->
<p>显示当前时间：{{time | timeFormatter('yyyy-mm-dd')}}</p> <!-- 2023/2/4 21:50:28 -->
<p>显示当前时间：{{time | timeFormatter('yyyy-mm-dd') | strSlice}}</p> <!-- 2023 -->

// ...
data: {
    time:1675518628716
},
filters:{
    timeFormatter(val,val2 = 'yyyy'){
        return new Date(val).toLocaleString();
    },
    strSlice(val){
        return val.slice(0,4)
    }
}
// ...
// ...
data: {
    time:1675518628716
},
filters:{
    timeFormatter(val,val2 = 'yyyy'){
        return new Date(val).toLocaleString();
    },
    strSlice(val){
        return val.slice(0,4)
    }
}
// ...