一、模板語法
1.{{}}插值表達式、v-text、v-html,這三個中的內容都可以寫成js表達式。
二、條件渲染
1.v-if、v-else通常這兩個一起用,而且v-else在v-if後面。
v-if、v-else中的input不設置key屬性時,input會直接被複用,所以當不需要複用時請加上key屬性。
三、列表渲染
1.v-for
給渲染項添加key屬性可以提高性能,同時最好不要用index索引值作爲key值,key在同級下最好是唯一值。
四、template模板佔位符
template標籤包裹內容,但不會被渲染,通常用於vue組件或用於包裹循環內容。
五、is屬性
html5規範table下面是tbody,tbody下面是tr,不能直接使用定義爲tr的組件,需要使用is屬性,<tr is="組件名稱"></tr>,同理,ul下面是li,select下面是option。
六、$refs
通過this.$refs.ref屬性名可以獲取到DOM節點。
<div class="todo" ref="todo"></div>
this.$refs.todo
七、父子組件傳值
1.父組件通過屬性的方式給子組件傳值,子組件通過props獲得父組件的傳值,子組件不能直接改變父組件的傳值,因爲有單向數據流,可以用通過子組件的data拷貝一份父組件的傳值來已達到目的。
2.屬性前面不加冒號時,傳遞的是字符串;屬性前面加上冒號後,傳遞的是js表達式。
八、給組件綁定原生事件
在定義子組件時綁定的事件是原生事件,在DOM中使用子組件時綁定的事件是自定義事件,當點擊子組件時觸發的是子組件的原生事件,在子組件的原生事件中使用this.$emit('自定義事件名稱')或者把自定義事件改爲@click.native="自定義事件名稱"來觸發原生事件。
九、非父子組件間的傳值。
1.使用vuex
2.使用總線機制(發佈訂閱者模式、Bus、觀察者模式)
通過在methods中寫this.bus.$emit('方法名',要傳遞的值)向外傳遞數據,通過在mounted中寫this.bus.$on('方法名',function(msg){})獲取傳遞的數據。
十、非props特性
當父組件通過屬性給子組件傳值但子組件沒有接收時,父組件定義的屬性會被顯示在子組件的屬性上。
十一、slot插槽
在子組件中用<slot name="vm"></slot>標籤來插入子組件DOM中傳來的slot="vm"的內容或標籤。slot標籤中可以設置默認值,當DOM中沒有傳時,slot則使用默認值。
十二、作用域插槽
子組件在slot中使用 :屬性名="值"的方式向DOM中slot-scope傳值,slot-scope屬性接收所有的數據。必須使用<template></template>標籤並設置slot-scope。
當子組件循環,循環的標籤名稱由父組件來決定時,使用作用域插槽。