Vue_(组件)自定义指令

　　Vue.js自定义指令　　传送门

　　自定义指令：除了内置指令，Vue也允许用户自定义指令

　　注册指令：通过全局API Vue.directive可以注册自定义指令

　　自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode

　　Learn

　　　　一、自定义指令钩子函数

　　　　二、自定义指令钩子函数的参数

　　　　三、自定义指令简写

　　项目结构

　　【每个demo下方都存有html源码】

一、自定义指令钩子函数　　传送门

　　自定义指令的钩子函数：

　　　　bind：只调用一次，指令第一次绑定到元素时调用

　　　　inserted：被绑定元素插入父节点时调用

　　　　update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前

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

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

　　自定义指令的使用：在自定指令的名称前加上 v-；

　　通过button点击按钮来控制是否解除绑定

<div id="GaryId">

    <input type="text" v-model="name"/><br />

    name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />

    <button @click="flag=!flag">解除绑定</button>

</div>

Vue.directive('demo',{

        //指令的钩子函数

        bind(){

            alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");

        },

        inserted(){

            alert("instered 插入到父节点之后，DOM对象");

        },

        unbind(){

            alert("unbind 解除绑定");

        },

        update(){

            alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);

        },

        componentUpdated(){

            alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);

        }

    });

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

    <input type="text" v-model="name"/><br />

    name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />

    <button @click="flag=!flag">解除绑定</button>

</div>

</body>

<script>

    Vue.directive('demo',{

        //指令的钩子函数

        bind(){

            alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");

        },

        inserted(){

            alert("instered 插入到父节点之后，DOM对象");

        },

        unbind(){

            alert("unbind 解除绑定");

        },

        update(){

            alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);

        },

        componentUpdated(){

            alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);

        }

    });

    let vm = new Vue({

        data:{

            name:'Gary',

            flag:true

        }

    }).$mount('#GaryId');

</script>

 </html>

Gary_Custom_Directive.html

二、自定义指令钩子函数的参数　　传送门

　　自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode；

　　el：获取DOM对象；

　　binding：一个包含很多属性的对象；

　　vnode：Vue编译生成的虚拟节点；

　　oldVnode：上一个虚拟节点；

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

            <input type="text" v-model="name" /><br />

            name : <span v-demo.once.stop='name' ref='name'>{{name}}</span><br />

            <button v-on:click="flag = !flag">click

</body>

<script>

    Vue.directive('demo',{

        //指令的钩子函数

        bind(el,binding){

            //console.log(el);

            el.style.color='red';

            console.log(binding.name);

            console.log(binding.value);

            console.log(binding.expression);

            console.log(binding.arg);

            console.log(binding.modifiers);

                if(binding.arg === 'click'){

                    console.log("执行点击事件");

                }

                if(binding.modifiers.once){

                    console.log("只执行一次");

                }

        },

        update(el,binding){

            console.log("update value = "+binding.value);

            console.log("update oldValue = "+binding.oldValue);

        }

    });

    let vm = new Vue({

        data:{

            name:'Gary',

            flag:true

        }

    }).$mount('#GaryId');

</script>

 </html>

Gary_Custom_Directive-02.html

三、自定义指令简写　　传送门

　　通过directives指令和focus指令实现修改样式和加载页面时自动聚焦

<div id="GaryId">

            <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->

            <input type="text" v-model="name"  v-focus/><br />

            name : <span v-font_style:blue>{{name}}</span><br />

</body>

   　　 directives : {

            font_style : function(el, binding){

                el.style.color = binding.arg;

            },

            //聚焦

            focus:{

                inserted(el){

                    el.focus();

                }

            }

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

            <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->

            <input type="text" v-model="name"  v-focus/><br />

            name : <span v-font_style:blue>{{name}}</span><br />

</body>

<script>

        let vm = new Vue({

            data : {

                name : 'Gary',

                flag : true

            },

            directives : {

                font_style : function(el, binding){

                    el.style.color = binding.arg;

                },

                focus : {

                    inserted(el){

                        el.focus();

                    }

                }

            }

    }).$mount('#GaryId');

</script>

 </html>

Gary_Custom_Directive-03.html

巴特西

Vue_(组件)自定义指令

最新文章

热门文章