Vue----自定义指令

除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。

 

在Vue里，代码复用的主要形式和抽象是组件。

 

然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令 。

 

以一个input元素自动获得焦点为例，当页面加载时，使用autofocuse可以让元素将获得焦点 ，但是autofocuse在移动版Safari上不工作，现在注册一个使元素自动获取焦点的指令。

 

指令注册类似于组件注册，包括全局指令和局部指令两种。

 

3）钩子函数

指令定义函数提供了几个钩子函数（可选） 。

 

【bind】

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

 

【inserted】

被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

 

【update】

所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

 

【componentUpdated】

所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

 

【unbind】

只调用一次， 指令与元素解绑时调用。

 

注意区别：

bind与inserted：bind时父节点为null，inserted时父节点存在；

update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

 

    <div id='app'>

        <p @click="change" v-color1>{{msg}}</p>

        <p @click="change2">{{date}}</p>//数据发生变化时，自定义属性color1中的update也要执行

    </div>

    <script>

        new Vue({

            el:'#app',

            data: {

                msg:"hello",

                date:"2222"

            },

            methods: {

                change(){

                    this.msg="66666"

                },

                change2(){

                    this.date="1234"

                }

            },

            computed: {},

            watch: {},

            components:{},

            filters:{},

            directives:{

                color1:{

                    inserted(el){

                        el.style.fontSize="40px"

                    },

                    // 只会执行一次

                    bind(){

                        console.log("执行一次")

                    },

                    // 所绑定的节点的元素的容器中的数据发生变化时就执行

                    update(el){

                        el.style.color="red"

                    }

                }

            }

    })

    </script>

 

 

4）钩子函数参数

 

【el】

指令所绑定的元素，可以用来直接操作 DOM。

 

【binding】

一个对象，包含指令名称及该指令所绑定的表达式信息。

 

【vnode】

Vue 编译生成的虚拟节点。

 

【oldVnode】

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

 

注意：除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

 

 

举例：

    <style>

        p {

            width: 100px;

            height: 30px;

        }

        button{

            width: 100px;

            height: 30px;

        }

    </style>

    <div id='app'>

        <p v-html="msg" v-red>{{msg}}</p>

        <button @click="change">改变</button>

    </div>

 

    <script>

        new Vue({

            el: '#app',

            data: {

                msg: 12

            },

            methods: {

                change() {

                    this.msg = "6666"

                }

            },

            computed: {},

            directives: {

                red: {

                    inserted(el) {

                        console.log(el) //绑定这个指令的节点对象：DOM

                        el.style.backgroundColor="red"

                    }

                },

                focus:{

                    inserted(el){

                        el.focus()

                    }

                }

            }

        })

    </script>