第二章 數據綁定和第一個 Vue 運用
2.1.3 插值與表達式
假如想顯現{{}}標籤,而不舉行替代 運用 v-pre即可跳 過這個元素和 它的子元素的 編譯歷程,
比方:
<span v-pre >{{這裏的內容是不會被編譯的門}}</ span>
2.1.4 過濾器
<div id=” app” >
{ { date | formatDate ) )
</div>
var app =new Vue({
el : ’ #app ’ ,
data: {
date : new Date()
filters : {
formatDate : function (value) { //這裏的 value 就是須要過濾的數據
}
})
過濾器也能夠串連,而且能夠吸收參數,比方:
<! 一串連一〉
{ { message | filterA | filterB } }
〈!一吸收參數逐一〉
{{ message | flterA ('argl ’,’ arg2 ’)}}
這裏的字符argl arg2 將離別傳給過濾器的第 2個和第 3個參數,由於第1 個是數據本身。
**過濾器應當用於處置懲罰簡樸的文本轉換,假如要完成更加龐雜的數據變更,應當運用計
算屬性;**
2.2 指令與事宜
第三章 盤算屬性
既然運用 methods 就能夠完成,那末為何還須要盤算屬性呢?緣由就是
盤算屬性是基於它的依靠緩存的。 一個盤算屬性所依靠的數據發生變化時,它才會從新取值,所以
text 只需不轉變,盤算屬性也就不更新
第四章 v-bind及 class與 style 綁定
<div :class=”{’ active ’: isActive }”></div>
<div : class=” [isActive ? activeCls :'', errorCls] ” ></div>
<div :style ={’ color ’: color, ’ fontSize ’ : fontSize +’ px ’}”〉文本</ div>
第五章 內置指令
5.1.1 v-cloak
[v-cloak] {
display: none;
}
<div id=” app ” v-cloak>
{{message ))
</div>
平常情況下,v-cloak是一 個處理初始化慢致使頁面閃爍的最好實踐,關於簡樸的項目很實
用,然則在具有工程化的項目里,比方背面進階篇將引見 webpack和 vue-router 時,項目標 HTML
組織只要一 個空的 div 元素,盈餘的內容都是由路由去掛載差別組件完成的,所以不再須要 v-cloak。
5.1.2 v-once
5.2.1 v-if v-else-if v-else
能夠運用 Vue供應的 key 屬性,它能夠讓你本身決議是不是要復用元
素, key 的值必需是唯 一的:
<div id=” app”>
<template v-if=”type ===’ name ’”>
<label >用戶名 </ label>
<input placeholder=”輸入用戶名” key=" name-input”>
</template>
<template v-else>
<label >郵箱 </ label>
<input placeholder=”輸入郵箱” key=唄ail-input ”〉
</template>
<button @click=” handleToggleClick ”〉切換輸入範例</button>
</div>
給兩個<input>元素都增添 key后 就不會復用了,切換範例時鍵入的內容也會被刪除,不過
<label>元素仍然是被複用的,由於沒有增加 key 屬性。
5.2.2 v-show
5.3.2 數組更新
Vue 包括了一 組視察數組變異的要領,運用它們轉變數組也會觸
發視圖更新:
- push()
- pop()
- shift ()
- unshift()
- splice()
- sort()
- reverse()
須要注重的是,以下更改的數組中, Vue 是不能檢測到的,也不會觸發視圖更新:
- 經由過程索引直接設置項,比方 app.books[3] = { … }.
- 修正數組長度,比方叩p.books.length = 1.
處理第一 個題目能夠用兩種要領完成一樣的效果,第 種是運用 Vue 內置的 set 要領:
Vue .set(app.books, 3 , {
name: 《css 揭秘》 ’,
author :’[希] Lea Verou ’
}
假如是在 webpack 中運用組件化的體式格局(進階篇中將引見〉,默許是沒有導入 Vue 的,這時候
能夠運用$set ,比方:
this.$set(app.books, 3 , {
name: ’《css 揭秘》’,
author :’[希] Lea Verou ’
})
第二個題目也能夠直接用 splice 來處理:
app.books.splice(l);
5.4 要領與事宜
在methods中 定義了我們 須要的要領供@click 挪用, 須要注重 ,@click 挪用的要領名后能夠不跟括號“()” 此時,假如該要領有參數,默許會將原生事宜對象 event 傳入,能夠嘗試修正為@click=”handleAdd”,然後在 handleAdd 內打印出 count 參數看看。在大部分營業場景中,假如要領不須要傳入參數,為了輕便能夠不寫括號。
Vue 供應了 個特別變量$event ,用於接見原生 DOM 事宜,比方下面的實例能夠阻撓鏈接翻開:
<div id=” app ” >
<a href=”http:llwww.apple.com”@click="handleClick ('制止翻開’,$event )”>翻開鏈接 </a>
</div>
<script>
var app =new Vue({
el :’#app ’,
methods: {
handleClick : function (message, event) {
event . preventDefault() ;
window . alert(message);
}
}
})
5.4.2 修飾符
- .stop
- .prevent
- .capture
- .self
- .once
- .enter
- .tab
- .delete(捕捉‘刪除’和‘退格’鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta(Mac下是Command,Window下是窗口鍵)
比方:
<! -- Shift + S -->
<input @keyup.shift . 83=”handleSave ”>
<!-- Ctrl + Click -->
<div @click.ctrl=”doSomething”>Do something</div>
第六章 表單與 v-model
6.3 修飾符
- v-model.lazy
- v-model.number
- .trim
第七章 組件詳解
7.1.2 組件用法
組件與之相似,須要註冊后才能夠運用。註冊有全局註冊和部分註冊兩種體式格局。全局註冊后,
任何 Vue 實例都能夠運用。全局註冊示例代碼以下
Vue.component (’ my- component ’, {
//選項
})
Vue組件的模板在某些情況下會遭到 HTML 的限定,比方<table>內劃定只允許是〈tr〉<td>、<
th>等這些表格元素,所以在<tabl >內直接運用組件是無效的 這類情況下,能夠運用特別的**is
屬性**來掛載組件 示例代碼以下
<div id=” app” >
<table>
<tbody is=”my-component” ></tbody>
</ table>
</div>
<script>
Vue.component ( ’ my-component ’, {
template :’ div >這裡是組件的內容</ div>
}) ;
var app =new Vue({
el : ’ #app ’
})
<script />
tbody 在襯着時 會被替代為組件的內容。罕見的限定元素另有<ul>、<ol>、<select>
JavaScript 對象是援用關聯,所以假如 return出的對象援用了外部對象, 那這個對象就
是同享的,任何 方修正都邑同步。比方下面的示例:
<div id=” app” >
<my- component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
var data = {
counter : 0
}
Vue.component (’ my- component ’, {
template :’<button @click=” counter++” >{{ counter ) )</button>’,
data:function () {
return data ;
}
})
var app =new Vue ( {
el :’#app ’
})
</script>
組件運用了3次 然則點擊恣意一 <button>。3 個数字都邑加1 ,那是 由於組件 data
用的是外部 的對象,這一定不是我們希冀的效果,所以 給組件返回一個新的 data對 象來自力
例代碼以下
<div id=” app” >
<my- component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component (’ my- component ’, {
template :’<button @click=” counter++” >{{ counter ) )</button>’,
data:function () {
return {
counter:0
}
}
})
var app =new Vue ( {
el :’#app ’
})
</script>
如許,點擊3 個按鈕就互不影響了,完全到達復用的目標。
7.2 運用 props 通報數據
**注重,假如你要直接通報数字、布爾值、數組、對象,而且不運用 v-bind
,通報的僅
僅是字符串,嘗試下面的示例來對照:**
<div id=” app ” >
<my-component message=” [ 1 , 2, 3 ] ” ></my-component>
<my-component :message=” [ 1 , 2, 3 ] ” ></my-component>
</div>
<script>
Vue.component (’ my-component ’, {
props: [ ’ message ’ ],
template :’<div>{{ message.length }}</div>’
} )
var app =new Vue ( {
el : ’ #app ’
})
</script>
同一個組件運用了兩次,區分僅僅是第二個運用的是 v-bind
,襯着后的效果,第一個是7
,第二個才是數組的長度 3,
7.2.2 單向數據流
7.2.3 數據考證
Vue.component my-component ’,
props : {
//必需是数字範例
propA : Number,
//必需是字符串或数字範例
propB : [String, Number] ,
//布爾值,假如沒有定義,默許值就是 true
propC: {
type : Boolean ,
default : true
//数字,而且是必傳
}
propD: {
type: Number ,
required : true
//假如是數組或對象,默許值必需是一個函數來返回
}
propE: {
type : Array ,
default : function () {
return [] ;
//自定義 個考證函數
}
}
propF: {
validator : function (value) {
return value > 10;
}
}
}
)};
type 範例能夠是:
- String
- Number
- Booleab
- Object
- Array
- Function
type也能夠是一 個自定義組織器,運用 instanceof 檢測。
當prop 考證失利時,在開闢版本下會在控制台拋出一 條正告。
7.3 組件通訊
7.3.1 自定義事宜
子組件用 $emit()
來觸發事宜,父組件用$on()
來
監昕子組件的事宜
7.3.3 非父子組件通訊
引薦運用一個空的 Vue 實例作為中心事宜總線( bus ),也就是一个中介
var bus= new Vue ();
methods : {
handleEvent: function () {
bus.$emit(’on-message',' 來自組件 mponent-a 的內容')
}
}
//在實例初始化時,監聽來自 bus 實例的事宜
bus.$on (’on-message ’, function (msg) { ...})
$refs
$refs 只是在組件 襯着完成后才添補,而且它黑白相應式的 它僅僅作為一個直接接見子
苦? 組件的應急計劃,應當防止在模板或盤算屬性中運用$refs
7.4 運用 slot 分發內容
7.4.3 slot 用法
- 單個slot
- 簽字 Slot
7.4.4 作用域插槽
7.5 組件高等用法
7.6.1 $nextTick
<div id=” app” >
<div id div v-if=氣howDiv 〉這是一段文本</ div>
<button @click= getText 〉獵取 div 內容</button>
</div>
<script>
var app =new Vue({
el :’#app ’,
data: {
showDiv: false
},
methods : {
getText: function () {
this.showDiv = true;
var text = document .getElementByid (’ div ’) .innerHTML;
console . log(text) ;
}
}
})
</script>
這段代碼並不難理解,然則運轉后在控制台會拋出一個毛病: Cannot read prope町’innerHU.伍’
of null ,意義就是獵取不到 div 元素。這裏就觸及 Vue 一個主要的觀點:異步更新行列。
Vue 會依據當前瀏覽器環境優先運用原生的 Promise.then MutationObserver ,假如都不支撐,
就會採納 setTimeout替代。
<div id=” app” >
<div id div v-if=氣howDiv 〉這是一段文本</ div>
<button @click= getText 〉獵取 div 內容</button>
</div>
<script>
var app =new Vue({
el :’#app ’,
data: {
showDiv: false
},
methods : {
getText: function () {
this.showDiv = true ;
this.$nextTick (function () {
var text = document . getElementByid ( ’ div ’) . innerHTML;
console.log(text) ;
}
}
})
</script>
這時候再點擊按鈕,控制台就打印出 div 的內容“這是一段文本”了。
我們應當不用去主動操縱 DOM,由於 Vue 的中心頭腦就是數據驅動 DOM,但在很
多營業里,我們防止不了會運用 些第三方庫,比方 popper.js、 swiper等 ,這些基於原生 JavaScript 庫都有建立和更新及燒毀的完全生命周期,與 Vue 合運用時,就要利用好$nextTick
7.6.3 手動掛載實例
我們如今所建立的實例都是經由過程 new Vue()的情勢建立出來的 。在一些異常特別的情況下,我
們須要動態地去建立 Vue 實例, Vue 供應了 Vue.extend和 $mount 兩個要領來手動掛載一個實例。
Vue.extend是 基礎 Vue 組織器,建立一個“子類”,參數是一 個包括組件選項的對象。
假如 Vue 實例在實例化時沒有收到 el 選項,它就處於“未掛載”狀況,沒有關聯的 DOM元
素。能夠運用$mount()手動地掛載一 個未掛載的實例。這個要領返回實例本身,因此能夠鏈式挪用
其他實例要領。示例代碼以下:
<div id=” unt-div ”〉
</div>
<script>
var MyComponent =Vue.extend ((
template :’<div>Hello: {{ ne } }</div>’,
data: function () {
return (
name :’Aresn ’
., } )
new MyComponent ().$mount (’#mount-div ’);
別的一種掛載體式格局
new MyComponent ({
el :’#mount-div ’
});
//或許,在文檔以外襯着而且隨後掛載
var component= new MyComponent() . $mount ();
document.getElementByid ('mount-d ’) .appendChild(component.$el);
手動掛載實例(組件)是一 種比較極度的高等用法,在營業中險些用不到,只在開闢一 些復
雜的自力組件時可能會運用,所以只做相識就好。
第八章 自定義指令
8.1 基礎用法
//全局註冊
Vue.directive(’focus ’,{
//指令選項
., } )
//部分註冊
var app =new Vue({
el :’#app ’,
directive: {
focus: {
//指令選項
})
自定義指令的選項是由幾個鈎子函數構成的,每一個都是可選的。
- bind 只挪用一次,指令第一次綁定到元素 時挪用,用這個鈎子函數能夠定義一個在綁定
時實行一次的初始化行動.
- inserted 被綁定元素插進去父節點時挪用(父節點存在即可挪用,沒必要存在於 document 中)
- update 被綁定元素地點的模板更新時挪用,而不管綁定值是不是變化。經由過程比較更新前後
的綁定值,能夠疏忽沒必要要的模板更新。
- componentUpdated 被綁定元素地點模板完成一次更新周期時挪用.
- unbind 只挪用一次,指令與元素解綁時挪用