Vue中的自定义指令

<div id="app">
        <h3>{{name}}</h3>
        <h2>当前n的值是:<span v-text="n"></span></h2>
        <h2>放大10倍后n的值:<span v-big="n"></span></h2>
        <button @click="n++">+</button>
    </div>
    <script src="vue.js"></script>
    <script>
        const vm=new Vue({
            el:"#app",
            data(){
                return{
                    n:1,
                    name:"qqqqq"
                }
            },
            directives:{
                big:function(element,binding){
                    // console.log(element);
                    // console.log(binding.value);
                    element.innerHTML=binding.value*10
                }
            }
        })
    </script>

Vue的自定义指令是在Vue的drectives属性里面生成的，上面的big指令，函数里面有两个参数，第一个参数ELEMEBNT和第二个参数binding,Element是指被自定义指令绑定的DOM元素，而第二个参数binding是与指令相关的对象，对象里面有value属性，值就是绑定的数据n。当与之绑定的DOM元素的模板里面的要被解析的区块发生值的改变的时候，big指令的函数就会被调用，重新解析模板，重新渲染页面！，举个案例，改变name值，

​​​​​​​