MVVM思想
MVVM
M 数据模型 Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
V 模板、视图层 View 代表UI 组件，它负责将数据模型转化成UI 展现出来
VM 实现双向数据绑定 ViewModel 是一个同步View 和 Model的对象
MVVM的优点
低耦合。视图可以独立于Model变化和修改，一个ViewModel可以绑定道不同的View上。当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发。设计专注于页面设计，开发专注于业务逻辑和数据的开发。
可测试。界面难测试，现在测试可以针对于ViewModel来写。
常见指令
v-text
更新元素的textContent<br><span v-text="msg"></span><br><span>{{msg}}</span>
v-if
根据表达式的值的真假条件渲染元素。在切换时元素吉他的数据绑定/组件被销毁并重建。如果是元素是<tempate>，将提出他的内容作为条件快。</tempate>
v-show
根据表达式的真假值，切换元素的display css属性。
v-for
基于源数据多次渲染元素或模板化。<br><div v-for="(item,index) in list" :key="index"><div v-for="(item,index) in list" :key="index">{{item}}</div></div>
v-pre
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑<br><span v-pre=""><span v-pre>{{msg}}</span></span> 即使data里面定义了msg这里仍然是显示的{{msg}}
v-cloak
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。<br><br>
[v-clock]{<br> display:none<br>}<br><p v-clock>{{content}}</p>
使用 v-cloak 指令是解决屏幕闪动的好方法
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被是为静态内容并跳过。这可以用于优化更新性能。
路由vue-router
声明式导航
<router-link to="/index">
编程式导航
//字符串<br>this.$router.push('/index')
//对象<br>this.$router.push({path:'helloworld'})<br>
带参数
params(刷新页面后传的值读不了)
this.$router.push({name:'helloworld',params:{id:1}})
query(拼接在地址后面)
this.$router.push({path:'helloworld',query:{id:1}})
