一、vue2.x概述
1、vue，类似于view（读音），是构建用户界面的渐进式框架，采用自底向上增量开发的设计，vue的核心库只关注视图层的开发。不仅易于上手，还便于与第三方库或既有的项目整合。
2、vue单文件组件&第三方库或=SPA应用
3、vue-cli提供可高效、快速、便捷的项目搭建。
4、完成的文档体系，不支持IE8及其一下浏览器。
二、vue的特征
轻量级的框架、双向数据绑定、单页面应用；
核心：关注视图层的开发
三、基础语法（第一个vue程序）
1、项目开发第一步：引入vue.js
2、定义页面结构：<div id="app">{{message}}</div>
3、定义模型 [vue实例]
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})输出： Hello Vue！
四、数据的双向绑定（三种方式）
1、vue 的双向绑定是什么意思？
用户在视图上的修改会自动同步到数据模型中去，数据模型的值变化，试图中的值也会随之变化。
优点：无需进行和单向数据绑定的那些CRUD（做计算处理时的增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）操作。
2、绑定数据的三种方式
（1）普通文本绑定：mustache语法{{}}===使用v-text绑定（常用）
（2）解释HTML标签的绑定：使用v-html绑定（慎用）
注：a.除非是信任的内容使用这样的方式进行数据绑定
b.这样的绑定方式，如果内容不是被信任的，有可能造成XSS攻击。
（3）将数据绑定到标签的属性上：使用v-bind：属性名称=“变量”来绑定（常用）。
举个例子：
<div id="app">
{{message}}
<span v-text='message'></span><br/>
<span v-html='info'></span><br/>
<span v-bind:title='msg'>v-bind鼠标放上去试试</span>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message:"<p>我是message里面的测试内容</p>",
info:"<h1>info测试内容</h1>",
msg:"哈哈，msg出现了"
}
});
</script>
输出结果：<p>我是message里面的测试内容</p>
<p>我是message里面的测试内容</p>
info测试内容
v-bind鼠标放上去试试（鼠标放上去会显示'哈哈，msg出现了'）五、内置指令
1、什么是内置指令？
vue指令以“v-”开头，作用在HTML元素上，将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性（对元素进行操作）.
2、常见内置指令
v-text：渲染普通文本
v-html：渲染为浏览器解释的html内容
v-show：用于定义元素的显示/隐藏
v-if、v-else、v-else-if：判断
v-for：循环
v-on：参考JQuery中on的用法----绑定事件
v-bind：v绑定数据到属性
v-model：数据双向绑定（表单元素）
v-clock：确保mustache语法在渲染完成之后显示到页面上（使用并不是很多，通常会用v-text进行替换）
v-once：数据只绑定一次
... ...
六、过滤器
1、什么是过滤器？有什么作用？
通过输入数据，能够对数据进行及时处理并返回，本质上是一个函数通过接收一个值，将其处理并返回，在指令中由一个管道符“|”标记，并可以跟随一个或多个函数。
作用：主要用于文本转换，针对展示的数据进行格式化的处理。
2、vue1.x中常见的内置过滤器完全参照了angular中的过滤器，并且都做了实现。
vue2.x中废弃了vue1.x中的内置过滤器，vue2.x中只有自定义过滤器，通过vue实例中的filters选项进行配置。
vue自带的过滤器：
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
currency 货币过滤，输出金钱及小数点
3、过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
语法：在双花括号中 {{message | capitalize }}
在v-bind中：<div v-bind:id="rawId | formatId"></div>
可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}更详细的请参考官网：https://cn.vuejs.org/v2/guide/filters.html
七、缩写
1、缩写的优点和缺点
优：简化开发，让技术人员在开发过程中对于频繁操作的指令进行了简化的处理
缺：如果缩写出现更多方式的时候，可能会造成其他困扰
2、vue的两种缩写
缩写语法：vue针对经常频繁使用的两个指令进行简化处理，并且预期以后会出现更多的缩写语法。
（1）属性绑定的缩写： v-bind：属性名称===》：属性名称
（2）事件绑定的缩写： v-on：事件名称===>@事件名称
八、实例
1、常见选项
var app = new Vue({
el：入口元素
template：模板
data：数据对象
methods：方法函数
computed：计算属性
watch：观察属性
filters：过滤器
directives：自定义指令
components：自定义组件
});
2、常见属性
this.$el 获取实例的入口元素
this.$data 获取实例的数据
this.$parent/this.$children 获取实例的父/子实例（组件）
this.$root 获取实例的根实例
九、行为操作
1、含义：定义的要执行的函数/方法
2、在vue中，分三种类型：
计算属性，通过computed进行配置
方法函数，通过methods进行配置
观察属性，通过watch进行配置
3、计算属性（computed）和方法函数（methods）的对比
a.如果涉及到数据运算，尽量选择使用计算属性
b.如果涉及到事件处理类似的行为，使用方法函数进行处理
注：计算属性中的数据，一旦运算完成，下次调用的时候会检查计算属性中各个数据有没有发生变化，没有发生变化的情况下，直接使用上一次缓存的结果。