1.1 动态属性

v-bind指令：将属性改变成动态属性，由数据来控制属性的值，缩写 :

<h1 v-bind:title="title" @click="title='后天星期五'">今天星期三</h1>
<p><input :type="type"></p>

data(){
    return {
        title:'明天星期四',
        type:'text'
    }
},

1.2 行内样式操作

行内样式可以由动态属性进行控制，便于实现交互

<h1 :style="css" @click="changeSize">今天星期三</h1>

data(){
    return {
        css:{color:'#0f0', fontSize:'50px'}, //行内样式
    }
}

1.3 类名操作

标签的类名也可以交给动态属性进行控制，便于实现交互

<h1 :class="className" @click="changeClass">明天星期四</h1>

data(){
    return {
        className:'week', //类名
    }
}

多个类名操作：

<h1 :class="{week: true, week2: true}">后天星期五</h1>

2.其它指令

2.1 v-pre

v-pre不渲染任何指令

2.2 v-cloak

v-cloak 数据加载前隐藏标签

2.3 v-once

v-once 只渲染一次，数据产生改变不重新渲染

3. 计算属性 computed

3.1 什么是计算属性？

计算属性就是computed，是vue的一个配置项，用于将复杂的计算逻辑放在函数中进行运算，将结果返回出去，在模板中直接当变量使用。

3.2 定义计算属性

computed:{
    //计算总价
    total(){
        let a=this.num*this.price;
        return a.toFixed(2);
    },
}

3.3 使用计算属性

<h1>总价：{{total}}</h1>

3.4 计算属性 computed和方法 methods的区别

1. methods可以不用返回值，computed必须要有返回值
2. methods每次调用都会执行函数，computed有缓存机制，调用执行一次以后将结果缓存起来，数据未改变的情况下后面不再执行

4. 过滤器 filters

4.1 什么是过滤器？

过滤器就是filters属性，是vue的一个配置项，用于将数据过滤以后再使用。必须要传入一个参数，处理以后将结果返回出去。

4.2 定义过滤器

export default {
    filters:{
        过滤器函数(参数){
            return ...
        }
    }
}

4.3 调用过滤器

<h1>{{num | add0}}</h1>

5. 监听器 watch

5.1 什么是监听器？

监听器就是watch属性，是vue的配置项，用于监听数据的改变，将数据的属性名作为监听的函数名，传入两个参数，第一个参数是新的值，第二个参数是老的值，可以做关联操作。

5.2 定义监听器

export default {
    watch:{
        //监听username数据的改变，输出结果
        username(newVal, oldVal){
            console.log(newVal, oldVal);
        },

        //监听age的改变
        age(newVal, oldVal){
            console.log(newVal, oldVal);
        },
    }
}

6. 生命周期

6.1 什么是生命周期？

生命周期就是 Vue的实例或对象从创建到销毁的整个过程，整个过程分为4个节点，有：创建对象、渲染DOM、存在期、销毁期，每个节点的前后都有对应的钩子函数，可以让程序员写入自己的业务逻辑。

6.2 生命周期钩子函数

生命周期分为4个阶段，共有8个生命周期钩子函数

第一阶段：创建实例阶段

beforeCreate 实例创建前

created 【重点】实例创建后，一般在这里发起ajax请求

第二阶段：挂载DOM阶段

beforeMount 挂载DOM前

mounted 【重点】挂载DOM后，一般要操作DOM节点在这里进行

第三阶段：更新阶段

beforeUpdate 数据更新前

updated 数据更新后

第四阶段：销毁阶段

beforeDestroy 组件销毁前

destroyed 组件销毁后