Vuejs的一些總結

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.片斷實例

 

 

 

下面幾種狀況會讓實例變成一個片段實例：

1. 模板包含多個頂級元素。
2. 模板只包含普通文本。
3. 模板只包含其它組件（其它組件多是一個片斷實例）。
4. 模板只包含一個元素指令，如<partial> 或vue-router 的 <router-view>。
5. 模板根節點有一個流程控制指令，如v-if或v-for。

這些狀況讓實例有未知數量的頂級元素，它將把它的 DOM 內容看成片段。片段實例仍然會正確地渲染內容。不過，它沒有一個根節點，它的$el 指向一個錨節點，即一個空的文本節點（在開發模式下是一個註釋節點）。
可是更重要的是，組件元素上的非流程控制指令，非 prop 特性和過渡將被忽略，由於沒有根元素供綁定：

 

 

片斷實例也有用處，可是一般狀況下組件有一個根節點比較好，它會保證組件元素上的指令和特性能正確的轉換，同時性能也稍微好些。