随着用户对Web前端的使用体验升级，导致Web前端开发的工作难度增大。为了提高开发效率和代码复用率, 近几年,互联网前端行业发展迅速,涌现出一大批优秀框架 这些框架逐渐改变了传统前端的开发方式,譬如:谷歌的AngularJS,脸书的ReactJS这些MVVM框架的碰到以及器件化的盛行,促使前端程序员不得不增速本人的步伐,不断更新本人的理论知识体系。因篇博客简单介绍了VueJS是什么、核心原理及技术、常用插件、UI组件库，以供课程教学或开发人员参考。

1.Vue.js和MVVM的简单介绍

Vue.js应是一个小型、高性能、能器件化的JavaScriptMVVM库，应是一套创建用户界面的渐进式框架。
它就是即以数据分析驱动及组件化的思维创立的，采纳自底向上增量开发的设计。
Vue的目的就是借助API实现的数据绑定来开发。Vue.js的中心库只关注View层及，不但适宜前端“小白”，
也利于和第三方插件或者咱们已切实做好的项目资源整合。它有着Angular和React的优点，
但没有了它们的缺点。由于Vue.js没有Angular的脏数据检查，使得Vue.js的速度略微领先。
同时比起 React 相对复杂的架构，Vue.js 更加轻量级，也更加容易上手。
MVVM形式就是软件架构的一种设计模式，它并非一个前端框架，而一种设计模式。
它本质上就是MVC 的升级版。在在MVVM中View及Model就是不太能够直接通讯的，
ViewModel作为View及Model的中间者，每当使用者扭转View时候，ViewModel感知View的变更，
进而对于Model展开扭转。ViewModel和视图层及View展开双向数据绑定，
和Model后台展开数据分析交互，它具有承前启后的指导作用。.

图1.MVVM的实现方式片

2.Vue.js核心原理及技术

2.1Vue.js的生命周期

Vue.js的生命周期一共分成八个阶段：BeforeCreate（创立之前）、Created（创立之后）、
BeforeMount(挂载之前)、Mounted（挂载之后）、BeforeUpdate（不断更新之前）、
Updated（不断更新之后）、BeforeDestroy（销毁之前）、Destroyed（销毁之后）。

图2.Vue.js生命周期

我们可以用一个例子来测试一下整个过程，我们创建一个Vue 的实例，然后定义el、data、methods，
然后写出每个阶段的函数在里面调用这些个属性，例如：
＜div id="app"＞ ＜p @click="excuteMessage"＞{{ message }}＜/p＞ ＜/div＞
el: '#app',
data: {
message : "Message出现了"
},
methods:{
updateMessage(){
this.message="Message更新了"
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前---------');
console.log("el     : " + this.$el);
console.log(" data   : " + this.$data);
console.log("methods: " + this.excuteMessage)
}
其他的七个阶段也是这样测试，通过测试后，我们发现：在beforeCreated() 创建前这个阶段，
el、data、methods都是undefined，也就是说，这个阶段中，其实Vue只是简单地帮我们new出一个实例，
其他事什么也没做。在created() 创建完成这个阶段，我们发现，data、methods发生了变化，
created这个这个阶段初始化了data和methods。但此时el仍然为undefined，所以直到created() 
阶段为止，	Vue只初始化了data和Methods。让我再看看挂载这个阶段，在beforeMount() 挂载前阶段，我们发现el已经被初始化了，
不再是undifined，在这个阶段，可以简单地认为Vue已经为我们找到了我们要挂载的DOM节点了。
但是，我们发现p标签中的{{meggage}}并没有被渲染出来。接着再看看mounted() 挂载完成阶段，
我们发现p标签的内容不是{{message}}了，而是“message出现了”，
在mouted()这个阶段，Vue已经将数据渲染到的DOM节点中了。到现在为止，创建和挂载阶段已经完成了。我们点击下页面“message出现了”的文字，这就是进入了我们的更新阶段。
在beforeUpdate() 更新前阶段，我们定义的data已经发生了变化，
但是p标签中的{{message}}还没有更新，还是一开始的“message出现了”，
没有对DOM进行重新渲染，在updated() 更新完成这个阶段，此时DOM的节点才进行重新渲染，
此时的p标签已变成“message更新了”。也就是说整个更新阶段，在更新前阶段完成了data的更新，
在更新后阶段完成了DOM的更新。在销毁整个阶段中，beforeDestroy（销毁前）、destroyed（销毁后）其实并没有太大的差异。
我们在控制台输入app.$destory()，此时就进入了销毁阶段，发现el，data和methods其实还都存在，
但它们其实已经不再属于Vue实例了。

2.2 Vue.js双向数据绑定

在双向数据绑定中，每个属性都有一对 get set方法 且为回调函数。假设现在有一个fullName属性，
fullName由value1和value2组成。先通过v-model监视fullName，当属性值发生改变时回调，
更新相关的属性数据，调用set回调函数，根据具体需求在set中进行操作。
当需要读取当前属性值时回调get函数，再将对应的value1和value2分配给对应属性。
fullName:{//被绑定的属性名
//当需要读取当前属性值时回调
get(){return this.value1+’ ’+this.value2;},
//监视当前属性值的变化，
set(value){Const val = value.split(‘ ’);
This.value1 = val[0];
This.value2 = val[1];}}
在执行过一次计算属性之后，vue.js会自动存入缓存，即多个相同的计算方法，只会执行一次。

2.3 Vue.js父子组件传值以及slot的使用

组件之间的传值一般分为两种：
1.是传入静态的值。＜blog-post title="My journey with Vue"＞＜/blog-post＞
2.是通过v-bind动态赋值。
父组件如何把数据传送个子组件呢？
子组件通过用props来生命它将要得到的数据
那么如何把子组件的数据传送到父组件呢？
使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件
总结：在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。
父组件借助props给子组件传递数据，子组件$emit给父组件传递信息。
接下来我们再说一下关于  Slot的使用。 当一个组件被反复用到，到组件显示的内容不同时，
可以使用slot。slot翻译成中文为插槽的意思，就是把slot上需要显示的插槽的内容显示在组件上，
若不需要这个插槽，则不显示任何信息。对应的计算属性，应写到父组件中去。代码示例：
在child.vue中
＜template＞
＜div＞
＜slot name="aaa"＞＜/slot＞
＜div＞组件确定的标签结构＜/div＞
＜slot name="bbb"＞＜/slot＞
＜/div＞
＜/template＞
parent.vue
＜child＞
＜div slot="aaa"＞需要显示的标签内容 1＜/div＞
＜div slot="bbb"＞需要显示的标签内容 2＜/div＞
＜/child＞
上述示例是定义了两个插槽的位置，同时都显示出来。当然，我们可以定义多个插槽，
根据需求来决定具体的内容显示在哪个插槽上。
代码示例：
在child.vue中
＜template＞
＜div＞
＜slot name="aaa"＞＜/slot＞
＜div＞组件确定的标签结构＜/div＞
＜slot name=”ccc”＞＜/slot＞
＜/div＞
＜/template＞
parent.vue
＜child＞
＜div slot="aaa"＞需要显示的标签内容 1＜/div＞
＜div slot="bbb"＞需要显示的标签内容 2＜/div＞
＜input type=”button” slot="ccc" /＞需要显示的标签内容 3
＜/child＞
虽然slot=”bbb”的插槽也有对应内容，但是在子组件中没有要求显示，所以不会显示出来。

3.Vue.js的常用插件

3.1Vue-Router

如今的开发模式流行SPA应用，点击路由链接不会向后台发请求。＜router-link＞生成路由链接，
＜router-view＞显示当前路由组件界面。VueRouter(): 用于创建路由器的构建函数。
在routes中配置路由，可以通过redirect属性进行重定向，使页面获得初始化信息。
被选中的理由组件会获得相应的class，可以去里面写特定的css样式。
配置对象的属性名都是特定的名称，不可随意修改，在注册路由时，最简便的方式，
直接在main.js中写router。示例代码：
import router from './router'
new Vue({
router
})

3.2axios和vue-resource的区别

vue-resource 是vue插件, 非官方库, 在vue1.x使用广泛。导入vue-resource插件，
声明使用，随后内部会给vm对象添加一个属性：$http，可以发送get 和 post两种请求。
发送请求之后会返回两个请求函数，第一个为成功请求函数，第二个为失败请求函数。代码示例：
import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get(url).then((response) =＞ {//请求成功的操作},(response) =＞ {//请求失败的操作})
axios用法和vue-resource类似，不同在于通过 catch 调用请求失败的函数代码示例：
import axios from 'axios'
axios.get(url) .then(response =＞ { //得到返回结果数据 }).
catch(error =＞ { //得到请求失败的数据})
axios也是官方推荐的发送ajax请求方式，在vue2.x中使用广泛。

3.3Vuex

Vuex就是一个专为Vue.js使用程序开发的状态管理体制，能够集中管理全部网页的状态，
非常适合单网页的开发。而而是Vuex的中央是store（仓库），Vue中的器件可从仓库中中输入
它自身的状态，每当仓库中中的状态发生变化，那么自身的状态还能产生对应的不断更新，
然而咱们不太能够直接扭转仓库的状态，若想扭转它的状态，只有借助递交的办法（commit）。

4.基于Vue.js的UI框架

随着Vue.js的盛行，它的UI框架都越发多，包含iView、ElementUI、VuxUI、MintUI、AT-UI等等
各种各样优良的框架，所以这里自己首推的还是iView以及ElementUI，首先说一下iView这个UI组件库，
它属于Vue官方的UI框架，它的组件非常齐全、而且它的版本更新速度也非常快，使用说明文档也很详细
它还有一套专门的后台管理系统模板iView Admin，它由talkingdata前端可视化团队部分成员开发维护
遵守iView的风格和开发约定，拥有很多强大的功能，尤其对于刚上手iView的人来说，
这是一个非常好的模板可以参考，其二再说一下ElementUI，一套作为开发人员、设计工作人员及
商品经理预备的基于Vue2.0的桌面端的组件库。Element就是饿了吗前端开源的VueUI组件库，
不断更新速度还是十分快的，一周到半个月也能颁布一个新版本。运用讲解档案文件都十分的详尽。
虽然他们都是基于Vue.js的UI框架，但它们两个之间还是略有区别的。
假设在咱们开发当中设计到表格当中单元格的兼并难题，提倡应用ElementUI，
由于iview的table表格芯片只提供了表头的兼并，而是ElementUI包罗了行列的全部兼并。
那么iView的优势在哪呢？iview的整体组件风格比较清新，适合后台管理系统，
而且它的表单验证样式比较友好。

图3.Vue-admin主界面图

5.总结

不得不说，Vue.js在当今前端框架中这么流行，还是有一定原因的，它不仅具有易学、上手容易快的好处
自身也具备组件化开发、双向的数据分析绑定及其余第三方插件、UI的框架的联结等等长处，
关于“前端小白”来讲，就是一个十分不错的抉择。