您好,登錄后才能下訂單哦!
想必喜歡前端開發的小伙伴們都或多或少接觸過MVVM這個概念,說起MVVM,第一時間想到的便是angularjs,knockoutjs等已經被廣泛運用的MVVM框架,之前我也沒有在這方面有很多了解,最近在做項目的過程中接觸了Vue.js,這是一個小巧精致,性能優異的MVVM框架,可以說對初學者是比較容易入門的,該框架的英文文檔寫得很好,但是中文版訪問還不太穩定,翻譯也有待改進,所以自己一遍學習,一遍記錄自己的思考,與各位共享學習的經驗。
第一篇主要是想談談vue.js中的Directives即指令,在vue.js中指令就是一個通知庫進行某些具體的dom操作的口令,在html中表現為如下形式:
<element prefix-directiveId="[argument:] expression [| filters...]"> </element>
Directives分為1.Reactive Directives、2.Literal Directives、3.Empty Directives,下面結合具體的api闡述他們的作用:
1.Reactive Directives(響應式指令)
Reactive Directives可以綁定在Vue實例或者在Vue實例上下文中求值的表達式上,當綁定的對象發生改變時,指令中的update()會在下一個系統單位時間發生異步響應,我們來看看具體的用法:
v-text:更新元素的textContent,事實上在html中{{mustache}}形式的插入值也會被編譯為針對一個textNode的v-text指令。
v-html:更新元素的innerHTML,由于可能插入惡意代碼,使用時要注意保證來源安全。
v-show:根據綁定值的true或false來決定所在元素在網頁中正常顯示還是顯示為空。
v-class:這個指令有一個可選參數,無參數時將綁定值(一般為class名)添加到所在元素的classlist當中,并且一旦檢測綁定值有改動,便隨之改變classlist里對應的class;提供參數時參數的true或false將決定綁定值(class)是否被添加到所在元素的classlist中,示例如下:
<span v-class=" red : hasError, bold : isImportant, hidden : isHidden "></span>
v-attr:更新所在元素的某些屬性(由參數表示)。
<canvas v-attr="width:w, height:h"></canvas>
v-style:更新所在元素的樣式,會智能添加瀏覽器供應商前綴,方便我們書寫樣式。這個指令有一個可選參數,無參數時,若綁定值為String則將綁定值設置為元素的style.cssText,若綁定值為Object則將Object中的樣式鍵值對放入元素的style object當中;
<div v-></div>
// myStyles can either be a String: "color:red; font-weight:bold;" // or an Object: { color: 'red', // both camelCase and dash-case works fontWeight: 'bold', 'font-size': '2em' }
提供參數時,參數指明了css屬性的對應值:
<div v-style=" top: top + 'px', left: left + 'px', background-color: 'rgb(0,0,' + bg + ')' "></div>
v-on:為元素添加并更新事件監聽器,參數可以是一個處理函數或者一個函數語句。
<div id="demo"> <a v-on="click: onClick">Trigger a handler</a> <a v-on="click: n++">Trigger an expression</a> </div>
我們可以為處理函數提供參數,其中this指的是當前的ViewModel,如下例中通過傳入this參數改變元素的text值:
<ul id="list"> <li v-repeat="items" v-on="click: toggle(this)">{{text}}</li> </ul>
new Vue({ el: '#list', data: { items: [ { text: 'one', done: true }, { text: 'two', done: false } ] }, methods: { toggle: function (item) { item.done = !item.done } } })
我們還可以傳入$event表示觸發處理函數的DOM事件,如下例傳入$event阻止事件冒泡:
<button v-on="click: submit('hello!', $event)">Submit</button>
/* ... */ { methods: { submit: function (msg, e) { e.stopPropagation() } } } /* ... */
在監聽鍵盤事件時由于要判斷按鍵值,可以結合filter寫成如下兩種形式:
<!-- only call vm.submit() when the keyCode is 13 --> <input v-on="keyup:submit | key 13"> <!-- same as above --> <input v-on="keyup:submit | key enter">
當ViewModel銷毀時,v-on綁定的事件會自動消除,我們不必親自去清理這些綁定事件,這也防止了內存的泄露。
v-model:為表單元素創建一個雙向綁定,詳細介紹請看這里
v-if:根據綁定值的true或false來插入或移除元素,如例子中我們將根據test的正確與否決定兩個<p>元素是否插入<template>當中
<template v-if="test"> <p>hello</p> <p>world</p> </template>
v-repeat:為綁定數組或對象中的每一個item創建一個子ViewModel,或者為綁定的數字值創建對應數量的子ViewModel。并根據綁定值的改變隨時更新。沒有提供參數時子ViewModel會直接使用綁定數組中的分配單元作為它的$data,如果值不是一個對象,則會創建一個數據包裝對象,而值會被設置在別名為$value的 key 上。
<ul> <li v-repeat="users"> {{name}} {{email}} </li> </ul>
如果提供了參數,我們將創建一個數據包裝對象,將參數作為對象的key,從而訪問對象模板中的屬性:
<ul> <li v-repeat="user : users"> {{user.name}} {{user.email}} </li> </ul>
v-with:這個指令只能結合接下來講到的v-component指令使用,作用是讓子ViewModel可以繼承父ViewModel的數據,我們可以傳入父ViewModel的屬性對象或單個屬性,在子ViewModel中訪問:
// parent data looks like this { user: { name: 'Foo Bar', email: 'foo@bar.com' } }
繼承對象:
<my-component v-with="user"> <!-- you can access properties without `user.` --> {{name}} {{email}} </my-component>
繼承單個屬性:
<my-component v-with="myName: user.name, myEmail: user.email"> <!-- you can access properties with the new keys --> {{myName}} {{myEmail}} </my-component>
v-events:這個指令也只能結合接下來講到的v-component指令使用,它使得父ViewModel能夠監聽子ViewModel上的事件,我們要注意區分v-on與v-events,v-events監聽的是通過vm.$emit()創建的 Vue 組件系統事件,而不是 DOM 事件。我們舉例說明:
<!-- inside parent template --> <div v-component="child" v-events="change: onChildChange"></div>
當子ViewModel調用this.$emit('change', …)時會觸發父ViewModel的onChildChange()方法,并且把emit函數中附加的參數傳給onChildChange()方法。
2.Literal Directives(字面指令)
字面指令并沒有綁定到某一個對象上,字面指令是把它們的參數作為純字符串傳給bind()函數中執行一次,字面指令可以接受{{mustache}}表達式,但是該表達式只會在編譯階段執行一次,不會綁定數據的改變:
下面看一看具體的api:
v-component:之前提到過,這是使用我們提前聲明并注冊好的組件構造器將當前元素編譯為子ViewModel,從而實現數據繼承,之后的文章會詳細介紹組件系統。
v-ref:在父ViewModel中創建子ViewModel的引用,方便父ViewModel中的$對象訪問子組件:
<div id="parent"> <div v-component="user-profile" v-ref="profile"></div> </div>
var parent = new Vue({ el: '#parent' }) // 訪問子組件 var child = parent.$.profile
這個指令只能與v-component和v-repeat一起使用,與v-repeat一起使用時,其value是與綁定數據數組對應的子組件數組。
v-el:為當前dom元素創建一個引用,供其自身vue實例使用,例如<div v-el="hi">可以使得vm.$$.hi訪問到該dom元素
v-partial:將當前dom元素中的innerHTML替換為事先注冊的partial,有兩種寫法,{{ mustache}}可以讓dom元素隨數據改變而更新:
<!-- content will change based on vm.partialId --> <div v-partial="{{partialId}}"></div>
另一種寫法則沒有數據跟隨更新的效果:
<div>{{> my-partial}}</div>
v-transition:為當前dom元素在指定參數值作用時添加動畫效果,后續文章會詳細介紹
3.Empty Directives(字面指令)
v-pre:這個指令是通知編譯器跳過當前dom元素和其所有子元素,這是為了在我們編程過程中對無需編譯的元素節省編譯時間
v-cloak:在當前元素編譯完成之前改指令都會存在,我們一般使用這個指令來在元素編譯未完成時隱藏原始的 {{ Mustache }} 模板,可以在css中這樣寫:
[v-cloak] { display: none }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。