前言
细节可参照官网文档：
https://cn.vuejs.org/guide/introduction.html
本文为总结性、经验性内容。
1、mvvm
-
好处：不用操作DOM
image.png
image.png -
demo：
image.png
image.png
双向绑定（v-model） ： 可以看到，对于age，模型和视图保持一致，即：
- 模型变化（ageReduce->this.age）,视图也跟着变化（{{age}}）,
- 反之亦然，视图变化（输入age），模型也跟着变化（ageReduce->this.age）
- 这对于传统JS写法来说，省去了操作DOM的过程，可以专注于模型层业务编码。
2、指令、路由、生命周期、组件
image.png
2.1 生命周期（加载时机）
image.png
2.2 插值闪烁
如下代码，将浏览器NetWork调成slow 3G, 模拟网速慢的情况，页面还没加载完成，{{msg}}会展示出来(插值闪烁现象)，指令方式v-html, v-text 不会，推荐使用指令方式取值。
image.png
image.png
2.3 v-for 性能
一般绑定key （数组唯一性属性）， 提高渲染效率
image.png
2.4 es6 语法总结
image.png
