vue、directive自定義指令和生命週期

時間 2019-11-10

標籤 vue directive 自定義指令生命週期简体版

原文原文鏈接

學習vue自定義指令。javascript

Vue.directive("mynewcode",{bind:function(el,binding){..自定義指令中傳遞的三個參數
el: 指令所綁定的元素，能夠用來直接操做DOM。
binding: 一個對象，包含指令的不少信息。
vnode: Vue編譯生成的虛擬節點。html

自定義指令有五個生命週期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbindvue

bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。
inserted:被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）。
update:被綁定於元素所在的模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。
componentUpdated:被綁定元素所在模板完成一次更新週期時調用。
unbind:只調用一次，指令與元素解綁時調用。java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.directive自定義指令</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue.directive自定義指令</h1>
    <hr>
    <div id="app">
    <div v-mynewcode="color">{{num}}</div>
    <p><button @click="add">增長</button></p>
    </div>
    <p>
        <button onclick="unbind()">解綁</button>
    </p>
    <script type="text/javascript">
    function unbind(){
        app.$destroy();
    }
        Vue.directive("mynewcode",{bind:function(el,binding){//被綁定
     console.log('1 - bind');
     el.style="color:"+binding.value;
},
inserted:function(){//綁定到節點
      console.log('2 - inserted');
},
update:function(){//組件更新
      console.log('3 - update');
},
componentUpdated:function(){//組件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解綁
      console.log('5 - ubind');}
})


            //console.log(el);
            // console.log(binding);
            // console.log(binding.name);
            // el.style="color:"+binding.value;
        var app = new Vue({
            el:'#app',
            data:{
                num:'1',
                color:'red'
                
            },
            methods:{
                add:function(){
                    this.num++;
                }
            }
        })
            
        
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。