内置指令

v-bind ：单向数据绑定，解析表达式，可以简写为 :xxx

v-model ：双向数据绑定

v-for ：遍历数组、对象、字符串

v-on ：绑定事件，可以简写为@xxx

v-if ：条件渲染（动态控制节点是否应该存在）

v-else ：条件渲染（动态控制节点是否应该存在）

v-else-if ：条件渲染（动态控制节点是否应该存在）

v-show ：条件渲染（动态控制节点是否展示）

v-text ：向它所在的节点中渲染文本内容，不会解析html标签，注意会替换掉其节点中所有文本，而{{xx}}则不会

v-html ：向指定的节点中渲染包含HTML结构的内容，可以识别html结构，注意会替换掉其节点中所有文本，而{{xx}}则不会，v-html又安全性问题，容易导致xss攻击，所以永远不要用在用户提交的内容上，如果要用，就要用在一定可信的内容上

v-cloak ：没有值，本质上是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性，使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once ：可以让所在节点在初次动态渲染后，就视为静态内容，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre ：可以跳过所在节点的编译过程，如跳过没有使用指令语法、没有使用插值语法的节点，会加快编译速度

自定义指令

定义

局部指令

new Vue({

directives:{指令名：配置对象/回调函数}

})

全局指令

Vue.directives('指令名',回调函数)

配置对象中常见的三个回调

bind：指令与元素成功绑定时调用

inserted：指令所在的元素被插入到页面中

update：指令所在模板结构被重新解析时调用

注意

在定义指令的时候不加v-，使用的时候才加

指令名如果是多个单词，就要在单词间加 - ，，不要使用驼峰命名法

<div id="root">
        <h2>当前n的值是：<span v-text="n"></span> </h2>
        <h2>方大十倍后n的值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            // 设置自定义指令，需要使用这个配置属性,这是局部指令，只能在这个模板中使用
            directives:{
                // 第一个参数会获取到这个指令绑定的元素
                // 第二个参数是当前自定义指令所绑定的标签的对象
                // big函数的调用
                // 当指令与元素成功绑定时，一上来就调用一次
                // 当指令所在的模板被重新解析时，也会调用这个指令
                big(element,binding){
                    element.innerHTML = binding.value*10
                },
                fbind:{
                    // 指令与元素成功绑定时(一上来)执行bind函数
                    bind(element,binding){
                        element.value = binding.value*12
                    },
                    // 指令所在元素被插入到页面中时调用inserted函数
                    inserted(element,binding){
                        element.value = binding.value
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时带哦用update函数
                    update(element,binding){
                        element.value = binding.value
                    }
                }
            }
        })
        // 这是一个全局指令
        Vue.directives('big',function(element,binding){
            element.innerHTML = binding.value*10
        })
    </script>

生命周期

生命周期又名生命周期回调函数、生命周期函数、生命周期钩子

生命周期就是Vue在关键的时候调用一些有特殊名称的函数

生命周期函数的名字不能更改，但函数的具体内容是由程序员根据需求来定的

生命周期函数中的this指向的是vm或组件实例对象

vm的一生

创建之前：调用beforeCreate函数

创建完毕：调用Created函数

挂载之前：调用beforeMount函数

挂载完毕：调用mounted函数

更新之前：调用beforeUpdate函数

更新完毕：调用updated函数

销毁之前：调用beforeDestory函数

销毁完毕：调用destoryed函数

常用的生命周期钩子

mounted：发送ajax请求、启动定时器、档期自定义事件、订阅消息等初始化操作

beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等收尾工作

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何消息

销毁后自定义事件会失效，但是原生DOM事件依然有效

一般不会再beforeDestory函数中操作数据，因为即使是操作数据也不会再触发更新流程了

<div id="root">
        <h2 :style="{opacity:opacity}">欢迎学习Vue</h2>
        <button @click="stop">点我停止变换</button>
        <button @click="opacity=1">透明度设置为1</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                opacity:1
            },
            methods:{
                stop(){
                    // clearInterval(this.timer);
                    this.$destroy();
                }
            },
            // Vue完成模板的解析后，并且把初始的真实DOM元素放入页面后(挂载完毕)，调用mouted函数
            mounted(){
                this.timer = setInterval(() =>{
                    this.opacity -= 0.01
                    if(this.opacity <= 0){
                        this.opacity = 1
                    }},16)
            },
            beforeDestroy() {
                console.log('vm就要没了');
                clearInterval(this.timer);
            },
        })
    </script>

<div id="root">
        <h2>当前n的值为：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            methods:{
                add(){
                    this.n++;
                },
                bye(){
                    console.log('bye');
                    this.$destroy();
                }
            },
            beforeCreate() {
                console.log('beforeCreate');
            },
            created(){
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestory');
            },
            destroyed() {
                console.log('destoryed');
            },
            
        })
    </script>