Vue -自定義指令&鉤子函數

時間 2019-11-11

標籤 vue 自定義指令鉤子函數简体版

原文原文鏈接

除了核心功能默認內置的指令，Vue也容許註冊自定義指令express

頁面加載後，讓文本框自動獲取焦點，原生js作法是獲取文本框元素後調用focus()方法，但Vue不建議手動操做DOM元素，因此此時要自定義指令app

這裏須要注意的是v-on指令綁定focus事件的方式是實現不了上面需求的，區別就像onfocus和focus()，前者是事件綁定，當元素得到焦點時去執行事件處理函數，然後者是方法，調用後會讓元素得到焦點，onclick和click()同理dom

自定義全局指令函數

Vue.directive( ' 自定義指令名 ' , { } )spa

參數一是指令的名字，注意定義的時候指令前不須要加 v- 前綴，但調用的時候必須加上這個前綴code

參數二是一個對象，在這對象身上有一些指令相關的函數，這些函數能夠在特定階段執行相關的操做，叫鉤子函數　對象

<body>
<div id="app">
    <input type="text" id="text" v-focus><!--自定義全局指令後可在標籤內直接使用這個指令-->
</div>
<script>
    //註冊一個全局自定義指令
 Vue.directive('focus', { //每當指令綁定到元素上時，會當即執行這個bind函數，只執行一次
 bind: function () { }, //inserted表示元素插入到DOM中時，會執行inserted函數，只觸發一次，el表示被綁定的那個原生js對象
 inserted: function (el) { el.focus() }, //當VNode更新時會執行updated，可能觸發屢次
 updated:function(){ } }) var vm = new Vue({ el: '#app', data: { } }) </script>
</body>

鉤子函數我以爲跟原生事件註冊方式類似 dom.onclick = function(){ } ，就是有些狀態會被Vue捕捉並貼上名字（如bind這個名字表明指令綁定到了元素上），名字是爲了讓咱們能夠將自定義處理函數「鉤」在上面，這樣，咱們就能夠決定哪一種狀態作哪一種事blog

在這個案例中，el.focus()不可放在bind函數裏，由於指令雖然綁定到了元素上，但元素尚未插入到DOM中也就是元素還在內存中沒有被渲染到頁面上，這時在內存調用focus方法沒有做用，而inserted則表示元素已經加載到網頁上了，此時使用focus纔是有效的事件

自定義全局指令，指定文本框文字顏色ip

 Vue.directive('color', { bind: function (el) {  //鉤子函數的第一個參數都是被綁定的DOM元素
         el.style.color = 'red' } })

由於是樣式，因此不須要元素插入到DOM中，就好像link引入CSS文件時並不關心元素是否加載

和js行爲有關的操做，最好在inserted中執行，和樣式相關的操做均可在bind中執行

鉤子函數第一個參數是被綁定的原生DOM元素，第二個元素是一個binding對象，該對象有三個重要的屬性name、value和expression

<div id="app">
    <!--#ff4200若是不用單引號引上的話會被看成data裏的變量，數字則無影響-->
    <input type="text" id="text" v-color="'#ff4200'">
</div>

Vue.directive('color', {
    bind: function (el,binding) {  //形參名字可隨意，但通常是這麼寫
        console.log(binding.name)   //color
        console.log(binding.value)  //#ff4200
    }
})

自定義私有指令

自定義私有指令跟自定義過濾器的套路是同樣的，在構造函數裏定義

var vm = new Vue({ el: '#app', directives: { 'color': { //指令名要加上引號             bind: function (el, binding) { el.style.color = binding.value } } } })

函數簡寫

也就是若是隻用到bind或update，就可省略指令定義對象的書寫

相關標籤/搜索

每日一句

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