vue自定义全局和局部指令

一、介绍

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

　　2、自定义指令的分类
　　 1、全局指令

　　　　2、局部指令

　　3、自定义全局指令格式

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

　　4、自定义局部指令格式

　　　　略

二、指令对象中的钩子函数（一个指令定义对象可以提供如下几个钩子函数）

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

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

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

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

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

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

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

　　2、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 }。

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

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

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

四、示例

<!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>

巴特西

vue自定义全局和局部指令

最新文章

热门文章