vue自定义全局和局部指令

时间 2019-11-11

标签 vue 自定义全局局部指令繁體版

原文原文链接

1、介绍html

　　一、除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也容许注册自定义指令。前端

　　二、自定义指令的分类
　　一、全局指令vue

　　　　二、局部指令

　　三、自定义全局指令格式node

　　　　Vue.directive(指令ID,指令定义对象)

　　四、自定义局部指令格式express

　　　　略api

2、指令对象中的钩子函数（一个指令定义对象能够提供以下几个钩子函数）dom

　　一、bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。ide

　　二、inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)。函数

　　三、update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前。指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新 (详细的钩子函数参数见下)。this

　　四、componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用。

　　五、unbind：只调用一次，指令与元素解绑时调用。

3、钩子函数参数（指令钩子函数会被传入如下参数：）

　　一、el：指令所绑定的元素，能够用来直接操做 DOM 。

　　二、binding：一个对象，包含如下属性：

　　　　name：指令名，不包括 v- 前缀。

　　　　value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

　　　　oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。不管值是否改变均可用。

　　　　expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

　　　　arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

　　　　modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

　　三、vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

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

　　注释：除了 el 以外，其它参数都应该是只读的，切勿进行修改。若是须要在钩子之间共享数据，建议经过元素的 dataset 来进行。

4、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <!-- <h3 v-hello>{{msg}}</h3> -->
        <button @click="change">更新数据</button>

        <h3 v-world:wbs17022.hehe.haha="username">{{msg}}</h3>

        <!-- <p v-world>网博，专业的前端培训</p> -->

        <!-- <h3 v-wbs>网博</h3> -->

        <input type="text" v-model="msg" v-focus>
    </div>

    <script>
        /**
         * 自定义全局指令
         * 注：使用指令时必须在指令名称前加前缀v-，即v-指令名称
         */
        Vue.directive('hello',{
            bind(){ //经常使用！！
                alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操做');
            },
            inserted(){
                alert('被绑定元素插入到DOM中时调用');
            },
            update(){
                alert('被绑定元素所在模板更新时(前)调用');
            },
            componentUpdated(){
                alert('被绑定元素所在模板完成一次更新周期时调用');
            },
            unbind(){
                alert('指令与元素解绑时调用，只调用一次');
            }
        });
        //钩子函数的参数
        Vue.directive('world',{
            bind(el,binding){
                // console.log(el，binding); //第一个参数表示指令所绑定的元素，是个dom对象，第二个参数是个对象
                // el.style.color='red';

                console.log(binding); //name
            }
        });
        //传入一个简单的函数，bind和update时都会调用
        Vue.directive('wbs',function(){
            alert('wbs17022');
        });


        var vm=new Vue({
            el:'#itany',
            data:{
                msg:'welcome to itany',
                username:'alice'
            },
            methods:{
                change(){
                    this.msg='欢迎来到南京网博'
                }
            },
            directives:{ //自定义局部指令
                focus:{
                    //当被绑定元素插入到DOM中时获取焦点，其余用法和自定义全局指令用法相同
                    inserted(el){
                        el.focus();//让这个元素得到焦点
                    }
                }
            }
        });
    </script>
    
</body>
</html>

View Code