1.Vuejs組件 這裡註意一點,組件要先註冊再使用,也就是說 如果反過來會報錯,因為反過來代表先使用了組件的,但是組件卻沒註冊。 webpack報錯後,使用webpack --display-error-details可以排錯 2.指令keep-alive 在看demo的時候看到在vue-rout ...
1.Vuejs組件
這裡註意一點,組件要先註冊再使用,也就是說
如果反過來會報錯,因為反過來代表先使用了組件的,但是組件卻沒註冊。
webpack報錯後,使用webpack --display-error-details可以排錯
2.指令keep-alive
在看demo的時候看到在vue-router寫著keep-alive
,keep-alive
的含義:
如果把切換出去的組件保留在記憶體中,可以保留它的狀態或避免重新渲染。為此可以添加一個keep-alive指令
3.如何讓css只在當前組件中起作用
在每一個vue組件中都可以定義各自的css,js,如果希望組件內寫的css只對當前組件起作用,只需要在style
中寫入scoped
,即:
4.vuejs迴圈插入圖片
5.綁定value到Vue實例的一個動態屬性上
對於單選按鈕,勾選框及選擇框選項,v-model
綁定的value通常是靜態字元串(對於勾選框是邏輯值):
但是有時候想綁定value到vue實例的一個動態屬性上,這時可以用v-bind
實現,並且這個屬性的值可以不是字元串。例如綁定Checkbox的value到vue實例的一個動態屬性:
這裡綁定後,並不是說就可以點擊後由true
,false
的切換變為a
,b
的切換,因為這裡定義的動態a,b是scope上的a,b,並不能直接顯示出來,此時
所以此時需要在data中定義a,b,即:
6.片段實例
下麵幾種情況會讓實例變成一個片斷實例:
- 模板包含多個頂級元素。
- 模板只包含普通文本。
- 模板只包含其它組件(其它組件可能是一個片段實例)。
- 模板只包含一個元素指令,如
<partial>
或vue-router
的<router-view>
。 - 模板根節點有一個流程式控制制指令,如
v-if
或v-for
。
這些情況讓實例有未知數量的頂級元素,它將把它的 DOM 內容當作片斷。片斷實例仍然會正確地渲染內容。不過,它沒有一個根節點,它的$el
指向一個錨節點,即一個空的文本節點(在開發模式下是一個註釋節點)。
但是更重要的是,組件元素上的非流程式控制制指令,非 prop 特性和過渡將被忽略,因為沒有根元素供綁定:
片段實例也有用處,但是通常情況下組件有一個根節點比較好,它會保證組件元素上的指令和特性能正確的轉換,同時性能也稍微好些。