一、遇见vue.js
1.1 Vue.js是什么？
Vue.js 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
1.2 MVC 和 MVVM
MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。View一般都是通过Controller来和Model进行联系的。Controller是Model和View的协调者，View和Model不直接联系。
相比MVC，MVVM只是把MVC的Controller改成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。
1.3Vue和Angular区别?
Vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目
适合: 移动端项目,小巧
Angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 都支持指令、过滤器和双向绑定，不兼容低版本IE
二、指令
2.1 v-if
v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。
2.2 v-show
v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了 一个内联样式style=“display：none”。
注：v-if如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show元素始终被编译并保留，只是简单地基于CSS切换。一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。
2.3 v-else
v-else就是javascript中else的意思，它必须跟着v-if，充当else功能。
注：v-show和v-else一起使用时会出现指令优先级问题，我们可以用另一个v-show替换v-else。
2.4 v-model
v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。
2.5 v-for
我们可以使用v-for指令基于源数据重复渲染元素，我们也可以使用index来呈现相对应数组索引，key获取键名,keys是唯一值。
注：1.如果使用v-for迭代数字的话，值是从1开始而不是0，如：<p v-for="i in 10">这是第{{i}}个标签</p>——》 第一个 i=1
2.在组件中，使用v-for循环的时候，或者在一些特殊情况中，必须指定唯一的 字符串/数字 类型 :key=""
2.6 v-bind
v-bind指令用于给html标签设置属性，在绑定class或style时，支持其他类型的值，如数组或对象。可以简写为 :
注：v-bind中，可以写合法的js表达式
2.7 v-on
v-on指令用于绑定事件监听器。可以简写为 @
v-on后面不仅可以跟参数，还可以增加修饰符：
.stop——调用event.stopPropagation()。
.prevent——调用event.preventDefault()。
.capture——添加事件侦听器时使用capture模式。
.self——实现只有点击当前元素时候，才会触发事件处理函数。
.keydown\keyup——只在只定按键上触发回调。Vue.js提供的键值有：[esc:27、tab:9、enter：13、space：32、delete：[8,46]、up:28、left：37、right：39、down：40]。
<！--停止冒泡-->
<button @click.stop="doThis"></botton>
<！--阻止默认行为-->
<button @click.prevent="doThis"></botton>
<！--阻止默认行为，没有表达式-->
<button @click.prevent></botton>
<！--串联修饰符-->
<button @click.stop.prevent="doThis"></botton>
<！--键修饰符，键别名-->
<button @keyup.enter="onEnter"></botton>
<！--键修饰符，键代码-->
<button @keyup.13="onEnter"></botton>
2.8 v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。但有时添加完毕后仍有部分变量会显示，是因为 v-cloak 的display属性被优先级别高的样式覆盖所导致，在Css中添加!important。
2.9 v-text
v-text指令可以更新元素的textContent。在内部,{{Mustache}}插值也被编译为textNode的一个v-text指令。
2.10 v-html
v-html指令可以更新元素的innerHTML。内容按普通HTML插入——数据绑定被忽略。不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。
注：1.默认v-text，v-html是没有闪烁问题
2.v-text，v-html会覆盖元素中原本的内容，但是差值表达式( {{msg}} )只会替换自己的这个占位符，不会把整个元素的内容清空。