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

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

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

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

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

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

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

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

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

9、(e1,binding) varcolor=Math.floor(Math.random()*1000000);/設(shè)置隨機(jī)顏色 /為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運(yùn)行后圖片未加載完成前，用隨機(jī)背景色占位如圖 6

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

11、中，字面量是一種表示值的記法。JavaScript 還支持對(duì)象和數(shù)組字面量，允許使用一種簡(jiǎn)潔而可讀的記法來(lái)創(chuàng)建數(shù)組和對(duì)象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 是一個(gè)對(duì)象，binding.value 是對(duì)象子面量 color: white, text: hello! ，代碼運(yùn)行后binding.value.color 獲取white，binding.value.text 獲取hello! 23本章小結(jié)本章主要講了