vue中的自定义指令

定义组件的为directives：{}

1、函数形式 （element，binding）

1----element：真实的dom元素

2----binding：将元素和自己所写的指令进行绑定

函数何时被调用？

1、指令和元素成功绑定时被调用一次

2、指令所在模板被重新解析的时候（模板的数据发生改变时）

 <div id="app">
        <h3>当前n的值是{{n}}</h3>
        <h3 >放大十倍后n的值是:<span v-big="n"></span></h3>
        <button @click="n++">点我+1</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                n:1
            },
            directives:{
                //big()第一个参数是绑定的真实dom元素，第二个参数将元素和自己所写的指令进行绑定
                //注：big函数何时被调用？
                    //指令和元素成功绑定时会被调用一次
                    //指令所在的模板重新解析时（模板中的数据发生改变时）
                big(element,binding){
                  element.innerText = binding.value * 10
                  console.log(element,binding)
                }
            }
        })

2、对象形式

对象形式里面一共有三个函数

1、bind（element，binding）：指令与元素成功绑定时被调用

2、inserted（element，binding）：指令所在元素被插入页面时被调用

3、update（element，binding）：指令所在模板被重新解析时

注：其实函数形式就是对象形式省略inserted的简写形式

  new Vue({
            el:'#app',
            data:{
                n:1
            },
            directives:{
                //函数写法其实就是对象的写法省略了inserted这个函数；
                //指令与元素成功绑定时被调用
                fbind:{
                   bind(element,binding){
                     element.value = binding.value
                   },
                   //指令所在元素插入页面时被调用
                   inserted(element,binding){
                    element.focus()
                   },
                   //指令所在模板进行重新解析时被调用
                   updated() {
                    element.value = binding.value
                   },

                }
            }
        })

自定义指令的注意事项

1、自定义指令的写法不能使用驼峰法，且vue模板中的函数名不能写简写形式了，需要加“”

2、directives中的this全部都是window

3、上述在vue的directives中写的自定义指令都是局部的，不能被其他的组件使用，要使用的话，需要写全局的自定义组件