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