1. Vue特点
(1) 前端三大支流框架之一，vue、react、Angular(2) 轻量级框架，体积更小(3) 生态圈宽泛，适宜初学者(4) 基于mvvm 模式，能够实现双向数据绑定。
2. 前端三大框架比拟
(1) React: 开发大型项目最谨严的框架(学习老本较高，实用于中级或者高级前端开发工程师)(2) Angular: 实用于大型项目，我的项目开发较为惨重，不够灵便(3) Vue: 轻量级，体积小，基于mvvm模式，能够实现双向数据绑定，适宜初学者。
3. MVVM（软件设计模式）
Vue.js依据这种设计模式进去的(1) M : model 数据模型(2) V : view视图层(3) VM : ViewModel 连贯视图和数据模型的纽带，数据模型产生了变动了，vm告诉视图批改；视图产生了变动，vm告诉数据模型进行相应的批改。优化渲染：以后数据模型产生扭转只扭转对应的视图，只渲染对应的视图层。
4. 生命周期（钩子函数）
从Vue实例创立到虚构dom产生再到数据绑定监听数据渲染以及销毁的整个过程。生命周期钩子函数：不便去操作以后阶段的vue实例(1) vue实例初始化阶段beforeCreate:在初始化的时候调用了beforeCreate，实现了vue实例的生命周期相干属性的初始化以及事件的初始化。这个时候还不能拜访数据模型中的data和methods中的办法。created: 在初始化结束之后，实现vue的数据注入以及数据监听操作，该操作的执行意味着vue实例创立结束，能够进行data数据模型和methods办法的拜访。(2) vue实例挂载阶段beforeMount： 在created之后，vue会判断实例中是否含有el属性，如果没有vm.$mount(el),接着会判断是否含有template属性，如果有将其解析为一个render function,如果没有将el指定的内部html进行解析。这里只是实现了模板的解析然而数据并没有绑定到模板中。mounted: 创立vm.$el替换el，实际上实现的是数据绑定操作，在其间执行render函数，将模板进行了解析，将数据进行了动静绑定。(3) vue实例更新阶段beforeUpdate: 更新虚构dom节点updated: 实现了页面的从新渲染(4) vue实例销毁阶段beforeDestroy: 销毁之前调用，此时能够拜访vue实例destroyed: 实现了监听器，子组件，事件监听等移出，销毁vue实例对象。
5.模板语法
1. 文本插值 (1) {{ msg }} 用双大括号将data数据模型中的字段渲染到页面上 (2) {{ msg + "nihao" }} 双大括号外部能够放js表达式2. 指令 (1) v-bind: 动静绑定元素上的属性 v-bind:title 简写 => :title="title" (2) v-html: 绑定html代码片段 富文本编辑器 有格局的内容 => 相应的html代码 (3) v-on: 动静绑定事件 v-on:click="clickHandler" 简写 => @click="clickHandler"3. 条件渲染 (1) v-if, v-else, v-show (2) v-if, v-else与v-show之间的区别 v-if和v-else对应的是元素的增加和删除，如果条件为真，则增加元素，如果条件为假，则删除元素。 v-show对应的是CSS款式中的display，来实现显示与暗藏。显示时用display:block,暗藏时用display:none。 频繁的显示与暗藏某个组件时，用v-show较好，因为v-if会频繁渲染dom树占用资源，影响代码运行效率。4. 列表渲染 v-for <ul> <li v-for="(item, index) in arr" :key="index">{{ item }}{{ index }}</li> </ul> :key的作用：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做能够使 Vue 变得十分快。然而有些时候，咱们却不心愿vue复用，这时候Vue 为你提供了一种形式来表白“这两个元素是齐全独立的，不要复用它们”。只需增加一个具备惟一值的 key 5. class绑定 :class <div :class="{ active: isActive}"> 块级元素</div> <div :class="[active1, box1]">块级元素</div> <div :class="[isActive? active1 : box1]">块级元素</div>6. style绑定 :style <div :style="{color: 'red', fontSize: '24px'}">块级元素</div> <div :style="style1">块级元素</div> <div :style="[style, style2]">块级元素</div>