前言
細(xì)節(jié)可參照官網(wǎng)文檔：
https://cn.vuejs.org/guide/introduction.html
本文為總結(jié)性、經(jīng)驗性內(nèi)容订讼。
1胁孙、mvvm
-
好處：不用操作DOM
image.png
image.png -
demo：
image.png
image.png
雙向綁定（v-model） ： 可以看到伦连，對于age，模型和視圖保持一致，即：
- 模型變化（ageReduce->this.age）,視圖也跟著變化（{{age}}）,
- 反之亦然珊豹，視圖變化（輸入age），模型也跟著變化（ageReduce->this.age）
- 這對于傳統(tǒng)JS寫法來說榕订，省去了操作DOM的過程店茶，可以專注于模型層業(yè)務(wù)編碼。
2劫恒、指令贩幻、路由、生命周期两嘴、組件
image.png
2.1 生命周期（加載時機(jī)）
image.png
2.2 插值閃爍
如下代碼丛楚，將瀏覽器NetWork調(diào)成slow 3G, 模擬網(wǎng)速慢的情況，頁面還沒加載完成憔辫，{{msg}}會展示出來(插值閃爍現(xiàn)象)趣些，指令方式v-html, v-text 不會，推薦使用指令方式取值贰您。
image.png
image.png
2.3 v-for 性能
一般綁定key （數(shù)組唯一性屬性）坏平， 提高渲染效率
image.png
2.4 es6 語法總結(jié)
image.png
