Vue.js前端開發(fā)技術(shù)第6章-自定義指令課件

1、 第6章 自定義指令 課程目標(biāo)Vue 除了基本指令外，允許用戶自 定義指令，自定義指令是對基本指令的擴展與補充。本章介紹自定義指令，注冊全局以及局部自定義指令。通過學(xué)習(xí)自定義指令更加深入了解鉤子函數(shù)的作用，鉤子函數(shù)參數(shù)在自定義指令的使用。2課程內(nèi)容 自定義指令 注冊全局 局部自定義指令 鉤子函數(shù) 鉤子函數(shù)參數(shù) 指令參數(shù) 對象字面量 3 6.1 自定義指令概述4除了 Vue 提供的基本指令外(如 v-model 和 v-show ), Vue 也允許注冊自定義指令。自定義指令是用來操作 DOM 的。自定義指令就是一種有效的補充和擴展，不僅可用于定義任何的 DOM 操作，并且是可復(fù)用的。自定義指令

2、分為全局指令和局部指令。 6.1.1 自定義全局指令打開百度首頁，搜索輸入框就是直接獲取焦點的。如圖 6-1 所示。該功能其實可以通過注冊一個全局指令 v-focus, 該指令的功能是在頁面加載時，元素獲得焦點。 圖 6-1 獲取焦點56自定義全局指令使用 Vue.directive(指令 ID，定義對象)，在這里“指令 ID”就是指令的名字，“定義對象”就是一個對象，包含有該指令的鉤子函數(shù)。自定義全局指令語法如下，其中鉤子函數(shù)均為可選Vue.directive(“指令id”, /當(dāng)該指令第一次綁定到元素上時調(diào)用，只調(diào)用一次，可以用來執(zhí)行初始化操作(簡言之，指令綁定到元素) bind:func

3、tion()/常用! alert(“bind”)， /被綁定有自定義指令的元素插入到DOM中時調(diào)用，在這里是插入到了#container中(簡言之，元素插入到DOM元素中) Inserted:function() alert(inserted),7下面通過剛才提到的打開百度首頁搜索輸入框直接獲取焦點來自定義一個全局指令 v-focus。/當(dāng)被綁定的元素所在模板更新時調(diào)用 update:function() alert(“update”),/當(dāng)被綁定的元素所在模板完成一次更新時調(diào)用 componentUpdated:function() alert(componentUpdated“)，/當(dāng)指令

4、和元素解綁的時候調(diào)用，只執(zhí)行一次 unbind:function() alert(unbind)8【例6-1】 自定義全局指令 斤斗云在線課堂 頁面載入時，input元素自動獲取焦點: Vue.directive(focus, inserted:function(el) el.focus() )這里的el指的就是當(dāng)前指令綁定的 DOM元素綁定元素插入到DOM后執(zhí)行鉤子函數(shù)【例 6-1】需要說明的是這里的 el 指的就是當(dāng)前指令綁定的 DOM 元素，運行后光標(biāo)定位在文本框中，直接獲取焦點運行結(jié)果如圖 6-2 所示： 9 new Vue( el: #app ) 6.1.2 自定義局部指令 局部指令

5、在 Vue 實例中使用 directives 選項來注冊局部指令，局部指令只能在這個實例中使用。語法如下：修改【例6-1】使用自定義局部指令實現(xiàn)元素自動獲取焦點。 10 newVue( el:#app, directives: /定義局部指令 ) 11【例6-2】自定義局部指令 頁面載入時，input 元素自動獲取焦點: newVue( el:#app, directives: focus: inserted:function(el) el.focus() )這里的el指的就是當(dāng)前指令綁定的 DOM元素一個指令的定義對象可以提供鉤子函數(shù)，均為可選 bind、inserted、update 、

6、unbind 、componentUpdated，每個鉤子函數(shù)的作用在自定義指令中已經(jīng)介紹過。6.2.1 鉤子函數(shù)參數(shù)（下面代碼中的 inserted 鉤子函數(shù)的參數(shù) el ）126.2 鉤子函數(shù) Vue.directive(focus, inserted:function(el) el.focus() ) 綁定元素插入到DOM后執(zhí)行鉤子函數(shù)inserted其實除了el 還有其他的鉤子函數(shù)參數(shù)，指令鉤子函數(shù)會被傳入以下參數(shù)el：指令所綁定的元素，可以用來直接操作 DOM 。 binding：一個對象，包含以下屬性： 1.name：指令名，不包括 v- 前綴。 2.value：指令的綁定值，例如

7、：v-my-directive=1 + 1 中，綁定值為 2。 13 3. oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 4. expression：字符串形式的指令表達(dá)式。例如 v-my-directive=1 + 1 中，表達(dá)式為 1 + 1。 5. arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 foo。 6. modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 foo: true, bar: true 。

8、 14 vnode：Vue 編譯生成的虛擬節(jié)點?？梢詫?shù)據(jù)進(jìn)行雙向綁定。oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用?！纠?-4】用隨機的背景色占位 1516 斤斗云在線課堂 divwidth:200px; height:300px;background-size:cover; 在圖片未完成加載前，用隨機的背景色占位，圏片加載完成后直接渲染出來。用自定義指令可以非常方便的實現(xiàn)這個功能。 /div 17 Vue.directive(imgurl, /el指當(dāng)前綁定的元素img;binding是一一個對象 inserted:function

9、(e1,binding) varcolor=Math.floor(Math.random()*1000000);/設(shè)置隨機顏色 /為img設(shè)置背景圖片 el.style.backgroundColor=#+color; var img=new Image(); img.src=binding.Value; img.onload=function() el.style.backgroundColor= ; el.style.backgroundImage=url(+binding.value+）; )newVue( el:#app, data:18運行后圖片未加載完成前，用隨機背景色占位如圖 6

10、-5 所示。圖片加載完成后如圖 6-6 所示。 url:logo.jpg ) 196.2.2 函數(shù)簡寫在學(xué)習(xí)的鉤子函數(shù)中，幾乎都會存在el，binding 這兩個函數(shù)。當(dāng)不需要其他鉤子函數(shù)時，可以簡寫函數(shù)。20 Vue.directive(runoob，function(el,binding) /設(shè)置指令的背景顏色 el.style.backgroundColor=binding.value.color )6.3 對象字面量 Javascript 對象字面量，又稱為映射，是鍵值對的集合。它的語法是用一對大括號包著用逗號分隔的鍵值對，其中鍵和值分別用單引號括起來，鍵和值之間用冒號分隔。在編程語言

11、中，字面量是一種表示值的記法。JavaScript 還支持對象和數(shù)組字面量，允許使用一種簡潔而可讀的記法來創(chuàng)建數(shù)組和對象2122 Vue.directive(demoDirective,function(el,binding,vnode)( console.log(binding.value.color); console.log(binding.value.text); ); vardemo=newVue( el:#hook-arguments-example) binding 是一個對象，binding.value 是對象子面量 color: white, text: hello! ，代碼運行后binding.value.color 獲取white，binding.value.text 獲取hello! 23本章小結(jié)本章主要講了