1.土著指令
成都網(wǎng)站建設(shè)、成都網(wǎng)站制作的關(guān)注點不是能為您做些什么網(wǎng)站,而是怎么做網(wǎng)站,有沒有做好網(wǎng)站,給成都創(chuàng)新互聯(lián)一個展示的機會來證明自己,這并不會花費您太多時間,或許會給您帶來新的靈感和驚喜。面向用戶友好,注重用戶體驗,一切以用戶為中心。 當(dāng)我開始學(xué)習(xí)Vue的時候,看官網(wǎng)的時候看到了“指令”兩個字。我愣住了,what?指令是啥?。亢髞砝^續(xù)往下看,像這種什么“v-for”“v-show”“v-if”都叫做指令。等到后來Vue玩的差不多了,開始寫項目的時候發(fā)現(xiàn),常見的指令也就那么幾個,比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”
。
你可以認為這是一種語法糖或者這是一種命令。在常見的這些指令中,大體的使用方法如下:
1.v-text :string 用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值。
2.v-show:any 用法:根據(jù)表達式真假值,切換元素的 display css 屬性 。
3.v-if:any 用法:表達式的真假條件渲染元素。在切換時元素以及它的數(shù)據(jù)綁定/組件被銷毀并且重建。如果是,并提出它的內(nèi)容作為條件塊。 條件變化時改指令出發(fā)過渡效果。
4.v-for :Array | Object | number | string 用法:基于源數(shù)據(jù)多次渲染元素或者模板塊 語法:alias in expression。
5.v-on:Function | Inline Statement 參數(shù) $event( required) 修飾符?!?/p>
6.v-bind:any 類型: any (with argument) | Object (without argument) 參數(shù):attrOrProp (optional) ;修飾符: .prop ---被用于綁定DOM 屬性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在綁定 class 和 style 特性時,支持其它類型的值。如對象和數(shù)組;在綁定prop時,子組件必須聲明prop。
7.v-model :限制
2.自定義指令
但是,僅僅靠上面的這些有時候是不夠的,比如最近我司做的一個項目中,UI做了一個頁面。然后我和UI在聊需求的時候,我說這個輸入框吧最好給他加一個效果,彈出輸入框的時候獲得焦點,顯示一個跳動的光標(biāo)。這樣用戶可以更清楚的看到在哪輸入。
達成共識之后,寫功能的時候我突然發(fā)現(xiàn),WTF?我這是用的Vue啊,數(shù)據(jù)驅(qū)動視圖啊,總不能document.getElementById(inputid).focus()
吧。
于是乎,我就去找文檔,突然發(fā)現(xiàn)了一個單詞directive,我去查了查這個單詞的意思:
看了一下文檔,大體意思就是,雖然吧這個v-model和v-show已經(jīng)很好用了,但是總是擋不住天馬行空的前端人員的騷操作,所以在有的情況下,需要對普通 DOM 元素進行底層操作,這時候就會用到自定義指令。當(dāng)然呢,官方的例子就是我需要的這個,當(dāng)即我就get了一波新知識。
如同我隨手寫下的這個HTML,里面有一個v-focus,大概沒見過,這是啥?別急,繼續(xù)往下看:
沒錯,這個v-focus就是我自己定義的指令,當(dāng)然啦,你也可以用除了關(guān)鍵字之外的單詞去命名,方便自由。
我們來看一下這個自定義指令,相信大家對下面的這部分都明白,無非就是如果value的值等同于true,那么el就focus即獲得焦點。
那個前面的update什么意思呢?update是更新的意思,這是一個鉤子函數(shù),即focusState更新時調(diào)用function,在調(diào)用函數(shù)時,繼續(xù)判斷focusState——如果真,則獲得焦點;為假,一邊涼快去吧。同樣,我們在查看官方文檔的時候,就會發(fā)現(xiàn),同樣的鉤子函數(shù)還有:
•bind:只調(diào)用一次,指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
•inserted:被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在,但不一定已被插入文檔中)。
•update:所在組件的 VNode 更新時調(diào)用,但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變,也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
•componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
•unbind:只調(diào)用一次,指令與元素解綁時調(diào)用。
利用這些操作,我們可以完成很多比較騷的套路,比如可以在加載大的圖片時,可以先用純色占位,當(dāng)圖片加載完成后才直接渲染出來。例如下圖:
在這個例子中,我們調(diào)用的鉤子函數(shù)是inserted,即插入父節(jié)點后觸發(fā)。當(dāng)圖片還未加載好時,先用隨機的顏色代替,等圖片加載好之后,去掉背景色,替換成圖片。
我們在此處傳入的參數(shù)為el----當(dāng)前的dom節(jié)點和binding-----一個對象,包含以下屬性:
•def:鉤子函數(shù)。
•rawName:指令的名稱。
•value:向指令傳入的值
同樣,我們也可以封裝多種已經(jīng)造好的輪子為自定義指令。畢竟,我們站在巨人的肩膀上才會看的更遠,走的更遠。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。