摘要:注冊有全局注冊和局部注冊兩種方式。比如下面的示例組件使用了次但是點(diǎn)擊任意一。當(dāng)驗(yàn)證失敗時(shí),在開發(fā)版本下會(huì)在控制臺(tái)拋出一條警告。是基礎(chǔ)構(gòu)造器,創(chuàng)建一個(gè)子類,參數(shù)是一個(gè)包含組件選項(xiàng)的對象。可以使用手動(dòng)地掛載一個(gè)未掛載的實(shí)例。
第二章 數(shù)據(jù)綁定和第一個(gè) Vue 應(yīng)用 2.1.3 插值與表達(dá)式
如果想顯示{{}}標(biāo)簽,而不進(jìn)行替換 使用 v-pre即可跳 過這個(gè)元素和 它的子元素的 編譯過程,
例如:
2.1.4 過濾器
{ { date | formatDate ) )var app =new Vue({ el : ’ #app ’ , data: { date : new Date() filters : { formatDate : function (value) { //這里的 value 就是需要過濾的數(shù)據(jù) } })
過濾器也可以串聯(lián),而且可以接收參數(shù),例如:
這里的字符argl arg2 將分別傳給過濾器的第 2個(gè)和第 3個(gè)參數(shù),因?yàn)榈? 個(gè)是數(shù)據(jù)本身。
**過濾器應(yīng)當(dāng)用于處理簡單的文本轉(zhuǎn)換,如果要實(shí)現(xiàn)更為復(fù)雜的數(shù)據(jù)變換,應(yīng)該使用計(jì)
2.2 指令與事件 第三章 計(jì)算屬性
算屬性;**既然使用 methods 就可以實(shí)現(xiàn),那么為什么還需要計(jì)算屬性呢?原因就是
第四章 v-bind及 class與 style 綁定
計(jì)算屬性是基于它的依賴緩存的。 一個(gè)計(jì)算屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí),它才會(huì)重新取值,所以
text 只要不改變,計(jì)算屬性也就不更新第五章 內(nèi)置指令 5.1.1 v-cloak[v-cloak] { display: none; }{{message ))一般情況下,v-cloak是一 個(gè)解決初始化慢導(dǎo)致頁面閃動(dòng)的最佳實(shí)踐,對于簡單的項(xiàng)目很實(shí)
5.1.2 v-once 5.2.1 v-if v-else-if v-else
用,但是在具有工程化的項(xiàng)目里,比如后面進(jìn)階篇將介紹 webpack和 vue-router 時(shí),項(xiàng)目的 HTML
結(jié)構(gòu)只有一 個(gè)空的 div 元素,剩余的內(nèi)容都是由路由去掛載不同組件完成的,所以不再需要 v-cloak。可以使用 Vue提供的 key 屬性,它可以讓你自己決定是否要復(fù)用元
素, key 的值必須是唯 一的:組件使用了3次 但是點(diǎn)擊任意一
這樣,點(diǎn)擊3 個(gè)按鈕就互不影響了,完全達(dá)到復(fù)用的目的。
7.2 使用 props 傳遞數(shù)據(jù)**注意,如果你要直接傳遞數(shù)字、布爾值、數(shù)組、對象,而且不使用 v-bind ,傳遞的僅
僅是字符串,嘗試下面的示例來對比:**同一個(gè)組件使用了兩次,區(qū)別僅僅是第二個(gè)使用的是 v-bind ,渲染后的結(jié)果,第一個(gè)是7
7.2.2 單向數(shù)據(jù)流 7.2.3 數(shù)據(jù)驗(yàn)證
,第二個(gè)才是數(shù)組的長度 3,Vue.component my-component ’, props : { //必須是數(shù)字類型 propA : Number, //必須是字符串或數(shù)字類型 propB : [String, Number] , //布爾值,如果沒有定義,默認(rèn)值就是 true propC: { type : Boolean , default : true //數(shù)字,而且是必傳 } propD: { type: Number , required : true //如果是數(shù)組或?qū)ο螅J(rèn)值必須是一個(gè)函數(shù)來返回 } propE: { type : Array , default : function () { return [] ; //自定義 個(gè)驗(yàn)證函數(shù) } } propF: { validator : function (value) { return value > 10; } } } )};type 類型可以是:
String
Number
Booleab
Object
Array
Function
type也可以是一 個(gè)自定義構(gòu)造器,使用 instanceof 檢測。
7.3 組件通信 7.3.1 自定義事件
當(dāng)prop 驗(yàn)證失敗時(shí),在開發(fā)版本下會(huì)在控制臺(tái)拋出一 條警告。子組件用 $emit()來觸發(fā)事件,父組件用$on()來
7.3.3 非父子組件通信
監(jiān)昕子組件的事件推薦使用一個(gè)空的 Vue 實(shí)例作為中央事件總線( bus ),也就是一個(gè)中介
var bus= new Vue (); methods : { handleEvent: function () { bus.$emit(’on-message"," 來自組件 mponent-a 的內(nèi)容") } } //在實(shí)例初始化時(shí),監(jiān)聽來自 bus 實(shí)例的事件 bus.$on (’on-message ’, function (msg) { ...})$refs$refs 只是在組件 渲染完成后才填充,并且它是非響應(yīng)式的 它僅僅作為一個(gè)直接訪問子
7.4 使用 slot 分發(fā)內(nèi)容 7.4.3 slot 用法
苦? 組件的應(yīng)急方案,應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用$refs單個(gè)slot
具名 Slot
7.4.4 作用域插槽 7.5 組件高級用法 7.6.1 $nextTick這段代碼并不難理解,但是運(yùn)行后在控制臺(tái)會(huì)拋出一個(gè)錯(cuò)誤: Cannot read prope町’innerHU.伍’
of null ,意思就是獲取不到 div 元素。這里就涉及 Vue 一個(gè)重要的概念:異步更新隊(duì)列。Vue 會(huì)根據(jù)當(dāng)前瀏覽器環(huán)境優(yōu)先使用原生的 Promise.then MutationObserver ,如果都不支持,
就會(huì)采用 setTimeout代替。這時(shí)再點(diǎn)擊按鈕,控制臺(tái)就打印出 div 的內(nèi)容“這是一段文本”了。
我們應(yīng)該不用去主動(dòng)操作 DOM,因?yàn)?Vue 的核心思想就是數(shù)據(jù)驅(qū)動(dòng) DOM,但在很
7.6.3 手動(dòng)掛載實(shí)例
多業(yè)務(wù)里,我們避免不了會(huì)使用 些第三方庫,比如 popper.js、 swiper等 ,這些基于原生 JavaScript 庫都有創(chuàng)建和更新及銷毀的完整生命周期,與 Vue 合使用時(shí),就要利用好$nextTick我們現(xiàn)在所創(chuàng)建的實(shí)例都是通過 new Vue()的形式創(chuàng)建出來的 。在一些非常特殊的情況下,我
們需要?jiǎng)討B(tài)地去創(chuàng)建 Vue 實(shí)例, Vue 提供了 Vue.extend和 $mount 兩個(gè)方法來手動(dòng)掛載一個(gè)實(shí)例。
Vue.extend是 基礎(chǔ) Vue 構(gòu)造器,創(chuàng)建一個(gè)“子類”,參數(shù)是一 個(gè)包含組件選項(xiàng)的對象。
如果 Vue 實(shí)例在實(shí)例化時(shí)沒有收到 el 選項(xiàng),它就處于“未掛載”狀態(tài),沒有關(guān)聯(lián)的 DOM元
素。可以使用$mount()手動(dòng)地掛載一 個(gè)未掛載的實(shí)例。這個(gè)方法返回實(shí)例自身,因而可以鏈?zhǔn)秸{(diào)用
其他實(shí)例方法。示例代碼如下: