Vue一些指令和成員變數以及元件一點


}            同意：
男:女:哇塞:}
中午吃啥：
肉肉:飯飯:}
提交

v-model 的作用就是form表單中 input 框的value值，變數值會隨著你的輸入而變化，如果是 checkbox這種點選的東西，那就會直接新增你這個input的value進變數裡邊去。變數是乙個陣列。

因為這個**會從上往下渲染的，所以最開始根本就不知道你的被vue控制著，所以會渲染出沒有 vue 控制時候的樣式，然後讀到vue之後就把全部被控制的重新渲染。導致畫面一瞬間有閃爍的效果。可以取消這種效果。

}}
}}}}
}

v-if="true|false"，為假時，在頁面上不渲染，可以隱藏標籤中的資訊 v-show="true|false"，為假時，在頁面中用display:none渲染，雖然沒展示，但是任在頁面結構中 --> if指令 show指令 if分支 elif分支1 elif分支2 else分支

黃綠

這裡引出新的概念：

sessionstorage ：的生命週期與頁面標籤繫結，當標籤頁被關閉，資料庫被清空

localstorage：是前台永久資料庫,需要手動去刪除資料，不然就算你重啟也還存在


v-for=""
語法：v-for="成員 in 容器"
-->}| 
}第}元素：}
}}:}
}-}:}
}:}

字典確實是沒有順序的，所以它儲存起來會特別快，比列表塊，他找到有空的記憶體就放資料進去，但是他的 key 是有順序的，所以可以取到他的索引。

分隔符成員 delimiters 就是乙個vue的成員變數。

這個成員變數的作用就是用來自定義 } 這個的。但是有一些形式不行，比如這個就不行。


=        }


姓：}        名：}

這裡有乙個疑問，那就是它是對data裡面的屬性值進行監聽的，這些屬性值一旦改變就可以自己做一些邏輯操作，但是本來這些屬性值變化的時候，別的呼叫了這個屬性的地方也會改變，那要這個成員變數有什麼用呢？

因為你不監聽的話，只能自己對自己影響，別的用到這個屬性的地方確實會因為這個屬性值的改變而改變，但是不能對別的屬性進行改變，而watch 可以，看上面邏輯就知道了，他因為 full_name 的變化，而改變了 first_name 和 last_name 的值。

元件：由html、css、js三部分組成的獨立單位，可以類似於變數，重複使用，就相當於是乙個已經寫好了的模板。

元件其實就是vue例項(物件)，乙個元件就是乙個vue例項(物件)

new vue()產生的也是例項(物件)，所以也是元件，我們稱之為根元件，乙個頁面建議只出現乙個根元件（專案開發模式下，乙個專案建議只出現乙個根元件）

元件的html頁面結構有 template 例項成員提供

* template提供的html結構是用來構虛擬dom

* 真實dom最終會被虛擬dom替換

* 根元件一般不提供template，就由掛載點el來提供構建虛擬dom的頁面結構，根元件如果提供了template，還需要設定掛載點作為替換佔位

* template模板有且只有乙個根標籤

就是說，如果沒有寫template成員變數的話，就會把掛載點當做模板，如果有寫這個成員變數，並且不是空，有內容的話，會自動取代掛載點，成為渲染這個template裡面的內容。