前言
在过去的十年时间里，我们的网页变得更加动态化和强大了。多亏有JavaScript，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的JavaScript代码。它们连接了各式各样的HTML和CSS文件，但缺乏正规的组织形式。这也就是为什么越来越多的开发者使用JavaScript框架诸如Angular、React或Vue这样的。Vue是一款友好的、多用途的且高性能的JavaScript框架。它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有一个现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多的业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。和其它前端框架一样，Vue允许将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。
如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件。Vue甚至有一个命令行工具，使快速初始化一个真实的工程变得非常简单。我们甚至可以使用Vue的单文件组件，它包含了各自的HTML、JavaScript以及带作用域的CSS或SCSS。
1.Vue.js介绍
Vue.js是一款渐进式的JavaScript框架。
什么是渐进式？
渐进式就是指我们可以由浅入深地、由简单到复杂的这种方式去使用Vue.js。
Vue.js优点
①体积小
压缩后33K。
②更高的运行效率
基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
③双向数据绑定
让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上。
④生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于Vue.js的ui框架、常用组件！拿来即用实现快速开发！
对初学者友好、入门容易、学习资料多。
总体而言，Vue.js是一款我们值得去学习和使用的JavaScript框架。
Vue.js经过几年的发展的被广泛的应用于Web端开发、移动端开发、跨平台应用开发等等场景的开发。应该说Vue.js是前端人员开发的必修技能。
Vue.js招聘市场需求大、前景较好。
2.安装与部署
Vue.js的使用方式有很多种。
第一种就是直接使用
4.数据与方法
每一个Vue其实都是通过Vue函数创建一个Vue实例开始的。通常我们会使用一个变量来接收Vue函数被new之后的一个结果，其实它就是Vue的对象。虽然Vue没有完全遵守MVVM的模型，但是Vue的设计也受到了它的启发。所以我们在开发中，经常会使用vm（ViewModel的缩写）来代表一个Vue的实例。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
当一个Vue实例被创建时，它将data中所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”。
如果我们想让某一个属性或某一个变量能够响应式的，那么我们需要在new Vue的时候把这个变量提前地进行声明。还有Object.freeze()这样的一个方法它会阻止修改现有的属性就意味着相应系统无法再去进行追踪变化。我们再用Vue的时候，大部分的情况下，用它的响应式。如果大家想让某一个对象不再进行响应式，我们可以使用freeze()这样的一个方法。
Vue除了数据属性还暴露了一些有用的实例属性和方法。它们都使用dollar符作前缀，以便与用户定义的属性区分。
watch()是一个非常常用且非常有用的方法。watch它直译的话就是观察，它可以观察一个变量的变化，并且能够为我们获取变化之前和变化之后的结果。
语法格式：Vue对象.$watch('观察的变量',function(newVal, oldVal){…})
5.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程，不如说需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这样子的话给开发者在不同阶段带来了一些添加自己的代码的机会。
生命周期钩子需要写在new Vue的时候传递的这个对象内，以属性的方式进行声明，这个属性的话，它是一个函数。那么在Vue的应用运行的每个阶段，系统会自动调用这样子的一个已声明的生命周期函数。还需要注意的是，生命周期函数不能使用箭头函数。箭头函数是没有this的，而这个this的话在我们的生命周期过程中，我们需要对它频繁进行应用的，所以我们在生命周期的函数内不能够使用箭头函数。
常用的生命周期：
①beforeCreate：实例化之后，数据观测和事件配置之前被调用。可以简单地理解，整个页面创建之前，才调用的一个生命周期。
②created：在实例创建之后被调用，在这一步，实例已经完成以下配置：数据观测，属性和方法的运算，watch/event事件回调。
③beforeMount：在挂载开始之前被调用的一个生命周期函数。它开始于挂载之前，相当于准备挂载的状态。
④mounted：它是指挂载成功，就是整个所有的节点被新的Vue的节点所替换。挂载成功之后调用的一个函数。
⑤beforeupdate：数据变化之前被调用的一个函数。
⑥updated：它是指整个的数据已经更新完毕，DOM结构也已经更新了，会调用这个生命周期函数。
setTimeout(function(){…},3000)：3秒钟之后将执行这个函数。然后会去执行一个之前。beforeupdate和updated这样的生命周期函数。
var vm = new Vue({
el: "#app",
data: {
msg: "hi vue"
},
beforeCreate: function(){
console.log('beforeCreate');
},
created: function(){
console.log('created');
},
beforeMount: function(){
console.log('beforeMount');
},
mounted: function(){
console.log('mounted');
},
beforeUpdate: function(){
console.log('beforeUpdate');
},
updated: function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change";
},3000);
其它的生命周期函数：
①activated：keep-alive组件激活时调用。学到组件的时候会使用到。
②deactivated：keep-alive组件停用时调用。
③beforeDestory：页面或者整个应用被销毁之前。
④destory：页面或者整个应用被销毁之后。
⑤errorCaptured：最近新增的，它是去捕获来自子组件的错误时被调用，去捕获此组件的错误。
6.模板语法
Vue.js使用了基于HTML语法的语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue.js 的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器所解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这也就是说，Vue从2一定层面上提高了整个JS的运行效率。
1）插值
数据绑定最常见的形式就是使用“Mustache”语法左右双大括号的方式包含一个变量的值进行文本插值。那么就是在页面上用左右双大括号的方式包裹一个变量，在data里面声明属性及其取值，就可以完成文本插值的这样的一个动作。
通过使用Vue的v-once指令，还可以执行一次性地插值，当数据改变时，插值处的内容不会更新。
{{ msg }}
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令。
使用Vue.js如何去为HTML标签绑定属性？
Vue.js为我们提供了bind这样的语法，为HTML标签绑定它所具有的一些属性，使其动态地进行一些变化。
语法：v-bind:属性="值"
使用JavaScript表达式
Vue.js完全提供了JavaScript表达式的支持。
例：
{{ number + 1 }}//简单运算
{{ ok ? 'YES' : 'NO' }}//三元运算符
{{ message.split('').reverse().join('') }}//复杂的函数运算
2）指令
指令是带有v-前缀的特殊特性。指令特性的值预期是单个表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
能否看到
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTML特性。
修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
我们还没有学到点击事件，可以先使用@click这样的指令可以为某一个元素绑定对应的点击事件。在初始化Vue对象时，我们使用methods这样的一个属性。在这个属性的内部，使用键值对的方式去声明对应的方法以及方法的函数体。
父子元素均有点击事件，若点击子元素不想让父元素的点击事件触发，加上.stop就可以了。
click me
7.class与style绑定
绑定HTML class
我们可以传给v-bind:class一个对象，以动态地切换class。
你可以在对象中传入更多字段来动态切换多个class。此外，v-bind:class 指令也可以与普通的class特性共存。
hi vue
v-bind:class语法还支持数组形式，可以通过三元运算的方式为某一个样式进行具体的赋值。我们用三元运算进行具体的判断，如果不为真就绑定空样式。
hi vue
绑定内联样式
通过v-bind:style语法可以为HTML标签动态的绑定style。
在通过v-bind:style指令为元素绑定样式的时候，我们还可以使用三元运算进行动态的样式绑定。
hi vue
8.条件渲染
指令用于条件性地渲染一块内容。这块内容只有在表达式返回真的时候才会被渲染。
Vue.js在2.1.0版本之后，新增了v-else-if，与平时学过的JavaScript语法是一致的。
A
B
C
Not A/B/C
Vue.js还提供了v-show指令，这个指令用于根据条件展示某一个元素v-show的元素始终会被渲染并保留在 DOM中。v-show只是简单地切换元素的CSS属性的display。
Hello!
v-show和v-if的区别是，v-if是“真正”的条件渲染。v-if也是惰性的，如果它的条件不满足，它是不会渲染的。相比之下，v-show就简单很多，不管是什么条件，它都将元素先渲染到页面上，然后通过CSS进行这种隐藏和展示的切换。一般来说，v-if有更高的切换开销，而 v-show 有更高的初始化开销。因此，如果需要非常频繁地切换，则使用v-show比较好；如果在运行条件很少改变时，则使用v-if比较好的。
9.列表渲染
首先来看数组形式的列表渲染，我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items代表的是源数据数组，而item则是被迭代的数组元素的别名。
在列表渲染的过程中，我们需要注意Vue正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据的顺序，这种模式本身是高效的，但它只适用于不依赖子组件状态或者是临时DOM状态。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。
-
{{ index }}{{ item.message }}
-
{{ key }} : {{ value }}
10.事件绑定
可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。
v-on指令可以绑定HTML元素拥有的所有的事件。
常见的Vue.js事件修饰符：.stop、.prevent、.capture、.self、.once、.passive
11.表单输入绑定
我们可以使用v-model指令在表单、
{{ message2 }}
Checked names: {{ checkedNames }}
Picked: {{ picked }}