學習vue2.0
學習vue2.0總結:
一、基礎
1、局部組件與全局組件:
全局組件:Vue.compotent(組件名,options),參考網址:http://www.cnblogs.com/yesyes/p/6658611.html
局部組件:export default {compotents: {組件名[:組件實例]}}
2、一個組件被某一組件引用多次???
3、props:
props 是單向綁定的:當父組件的屬性變化時,將傳導給子組件,但是不會反過來。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解
props 會在組件實例創建之前進行校驗,所以在 default
或 validator
data
、computed
或 methods
等實例屬性還無法使用。
非prop屬性的概念與‘替換/覆蓋的概念’
4、自定義事件:$emit(事件,參數)與$on(事件,回調)
不能用 $on
偵聽子組件拋出的事件,而必須在模板裏直接用 v-on
綁定
5、事件修飾符:
(1)、綁定原生事件:.native
(2)、雙向數據綁定:.sync。在vue1.0中是雙向數據綁定,而在vue2.0中他是一個語法糖,如下:
<comp :foo.sync="bar"></comp> ==渲染為==> <comp :foo="bar" @update:foo="val => bar = val"></comp>
當子組件需要更新 foo
的值時,它需要顯式地觸發一個更新事件:this.$emit(‘update:foo‘, newValue)
6、自定義表單組件是v-model的用法:理解v-model語法糖
7、非父子組件之間的通信:有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下,可以使用一個空的 Vue 實例作為中央事件總線
8、編譯作用域:
父組件模板的內容在父組件作用域內編譯;子組件模板的內容在子組件作用域內編譯。
一個常見錯誤是試圖在父組件模板內將一個指令綁定到子組件的屬性/方法:
<!-- 無效 --> <child-component v-show="someChildProperty"></child-component> 除非子組件模板包含至少一個 <slot>
插口,否則父組件的內容將會被丟棄。
當子組件模板只有一個沒有屬性的 slot 時,父組件整個內容片段將插入到 slot 所在的 DOM 位置,並替換掉 slot 標簽本身。
最初在 <slot>
標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。
<slot>
元素可以用一個特殊的屬性 name
來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot
特性的元素。
仍然可以有一個匿名 slot,它是默認 slot,作為找不到匹配的內容片段的備用插槽。如果沒有默認的 slot,這些找不到匹配的內容片段將被拋棄。
(1)作用域插槽?????
10、動態組件與keep-alive
11、在v-for中使用ref?????
12、內聯模板:
如果子組件有 inline-template
特性,組件將把它的內容當作它的模板,而不是把它當作分發內容。這讓模板更靈活。
二、響應更新
1、Object.assign()
或 _.extend
2、雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考,避免直接接觸 DOM,但是有時我們確實要這麽做。為了在數據變化之後等待 Vue 完成更新 DOM ,可以在數據變化之後立即使用 Vue.nextTick(callback)
。這樣回調函數在 DOM 更新完成後就會調用。
this.nextTick(function () {}),這類似於一個生命周期鉤子,當更新dom後才調用
三、自定義指令:
1、全局指令:
// 註冊一個全局自定義指令 v-focus Vue.directive(‘focus‘, { // 當綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) 2、局部指令: 也可以註冊局部指令,組件中接受一個 directives
的選項:
<AnonymousComponent>
, 這很沒有語義。通過提供 name
選項,可以獲得更有語義信息的組件樹。
學習vue2.0