共计 1969 个字符，预计需要花费 5 分钟才能阅读完成。
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>
正文完
