[JavaScript知识库]Vue之自定义指令（函数式）

在directives 对象里面，写自定义指令的名字(element,binding){}
这里会接受到两个参数:
第一个参数是该指令的dom节点，
第二个参数是binding绑定对象，可以拿到data里的value值

	<div id="root">
        <h1>现在n的大小: <span v-text="n"></span></h1>
        <h1>n放大十倍 :  <span v-big="n"></span></h1>
        <button @click="n++">点击进行自增</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                n:1,
            },
            directives:{
                //directives 里面可以存放自定义指令名
                big(element,binding){
                    //big函数何时会调用，1.指令与元素成功绑定的时候（一上来）2.指令所在模板被重新解析的时候
                    //该自定义指令方法可以拿到两个参数
                    //第一个：该指令的html dom元素，第二个：该指令的绑定对象，重点是可以拿到value值
                    element.innerText = binding.value * 10;
                }
            }
        })
    </script>

效果如下：