Vuejs的一些總結

標籤：忽略   text   soft   microsoft   模板   包含   js迴圈   報錯   bind   

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 特性和過渡將被忽略，因為沒有根項目供綁定：

 

 

片段執行個體也有用處，但是通常情況下組件有一個根節點比較好，它會保證組件元素上的指令和特效能正確的轉換，同時效能也稍微好些。

 

Vuejs的一些總結