Vue.directive指令(自定义指令) 生命周期

自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbindbind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)update: 被绑定与元素所在模板更新时调用...

7936人浏览 · 2020-03-10 21:12:21

· 2020-03-10 21:12:21 发布

自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind

bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)

update: 被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

unbind: 只调用一次，指令与元素解绑的时候调用

例子如下（需引入vue.js）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       <span v-hello="color3">{{message}}</span>
       <button @click="add"> 点击开始加1</button>
       <button onclick="jiebang()">解绑</button>
   </div>
</body>
<script>
    //解绑vue
    function jiebang(){
        app.$destroy();
    }
    Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            //只调用一次，指令第一次绑定到元素时候调用，                  
            //用这个钩子可以定义一个绑定时执行一次的初始化动作。
            el.style["color"] = bingind.value;
            console.log("1-bind");
        },
        inserted:function(){
            //被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
            console.log("2-inserted");
        },
        update:function(){
            //被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化
            //通过比较更新前后的绑定值，忽略不必要的模板更新
            console.log("3-update");
        },
        componentUpdated:function(){
            //被绑定元素所在模板完成一次更新周期时调用
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            //只调用一次，指令与元素解绑时调用。
            console.log('5 - unbind');
        }
    })
    var app = new Vue({
        el:"#app",
        data:{
            message:10,
            color3:"red"
        },
        methods:{
            add:function(){
                this.message++;
            }
        }
    })
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^