Vue中自定义指令之获取文本框焦点，改变字体颜色，大小

钩子函数

• bind： 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted：被绑定元素插入父节点时调用
• update：所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated:所在组件的VNode及其孩子的VNde全部更新时调用
• unbind：值调用一次，指令与元素解绑时间调用

钩子函数参数

指令钩子函数会被传入以下参数：

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

binding：一个对象，包含以下属性：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true,
  bar: true }

指定义指令语法

注意：Vue中调用自定义指令的时候，都要， v-开头

• 使用Vue.firective()定义全局的指令，v-focus

• 其中：参数1指令的名称，，注意在定义的时候指令的名称前面，不要加v-前缀但是在调用的时候必须在指令名称前面加上v- 前缀

• 参数2：是一个对像，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关操作

   Vue.directive('focus',{
        bind:function (el) {//注意每个指令的元素上第一个参数永远是el，表示被绑定了指令的那个元素
            //在元素刚被绑定了指令的时候，还没有插入DOM中去，这个时候调用focus方法没有作用
            //因为，一个元素，只用插入DOM之后，才能获取焦点

        },
        inserted:function (el) { //inserted表示元素插入到DOM中的时候，会执行inserted函数（触发一次）
            //和行为有关的最好放在inserted里面
            el.focus()

        },
        updated:function (el) { //但VNode更新的时候，会执行updated，可能会触发多次


        }
    })

定义私有指令

//自定义私有指令
        directives:{
            'fontweight':{
                bind:function (el,binding) {
                    el.style.color=binding.value
                }
            }

    }

指令的简写

'fontsizerr':function (el,bind) {
                //等同于把代码同时写到，bind和update中去了
                el.style.fontSize=parseInt(bind.value)+'px'
            }

案例代码

    
    
    
    
    



    
    
{{msg}}
    

        
            搜索：