随着手机和移动互联网市场的日益成熟，移动App领域也从如何开发，发展到如何更高效、更低成本地开发阶段。传统的原生平台（PC、IOS和Android）开发技术虽然比较成熟，但由于其开发效率和成本的限制，已经无法满足移动互联网App的开发需求。
跨平台技术横空出世，大量的JavaScript框架和工具得以迅速流行，而Vue.js跃升为其中的佼佼者，成为构建用户界面的绝佳实践技术之一。Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js的核心库只关注视图层，并且采用自底向上增量开发的设计，非常容易学习。Vue.js完全有能力驱动采用单文件组件和Vue.js生态系统支持的库来开发复杂的单页应用，它本身也非常容易与其他库或已有项目进行整合。
Vue.js的五大特征：
一、组件
组件是 Vue.js最强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue.js中，组件是基础HTML元素的拓展，可方便地自定义其数据与行为。
<script src="https://unpkg.com/vue"></script>
<div id="app">
<my-component></my-component>
</div>
<script>
// 注册
Vue.component('my-component', {
template: '<div>Hello Vue!</div>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
二、模板
Vue.js使用基于HTML的模板语法，允许开发者将DOM元素与底层Vue.js实例中的数据相绑定。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和html解析器解析。
在底层的实现上，Vue.js将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue.js能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
如果对原生的JavaScript熟悉，也可以不用模板，直接编写渲染（render）函数，使用可选的JSX语法即可。
三、响应式设计
响应式网络设计（RWD/AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（甚至超大）的不同分辨率的屏幕。
响应式界面的4个层次：
- 同一页面在不同大小和比例上看起来都应该是舒适的；
- 同一页面在不同分辨率上看起来都应该是合理的；
- 同一页面在不同操作方式下，体验应该是统一的；
- 同一页面在不同类型的设备（手机、平板电脑、计算机）上，交互方式应该是符合用户习惯的。
而作为专注于显示前端效果的Vue.js，其本身提供的大多数控件和内容都是基于响应式的设计。不仅如此，为了方便众多的开发者便捷使用，Vue.js衍生出了很多美观又简洁的UI组件库，而这类UI组件库是完全支持响应式设计的。
所以说，作为一个合格的Vue.js程序开发者，在进行应用开发时，必须要考虑到其UI的响应式设计，让用户在不同尺寸和分辨率的屏幕及设备上能够拥有一致而优良的体验。
四、过渡效果
Vue.js在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果，以下工具：
- 在css过渡和动画中自动应用class；
- 可以配合使用第三方css动画库，如Animate.css;
- 在过渡钩子函数中使用JavaScript直接操作DOM；
- 可以配合使用第三方JavaScript动画库，如Velocity.js。
Vue.js提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加entering/leaving过渡。 - 条件渲染（使用v-if）
- 条件展示（使用v-show）
- 动态组件；
- 组件根节点。
简单来说，可以在用户进行操作或者和页面元素进行交互时，提供良好且适当的用户体验效果。
下方实例中 点击click按钮之后，hello vue会渐变地消失，其实是因为样式的更改，当再次点击之后，样式的fade会随着添加或者删除而产生渐变效果，以便所有的用户操作或内容的显示不再是突兀地出现或者消失。
<script src="https://unpkg.com/vue"></script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
</style>
<div id="app">
<button v-on:click="show = !show">
click
</button>
<transition name="fade">
<p v-if="show">hello Vue</p>
</transition>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
五、单文件组件
为了更好地适应复杂的项目，Vue.js支持以.vue为扩展名的文件夹来定义一个完整组件，用以替代使用Vue.component注册组件的方式。开发者可以使用Webpack或Browserify等构建工具来打包单文件组件。该特性带来的好处主要是将来对于上线的引用，在通过压缩工具和基本的封装工具之后，可能只有一个文件，这极大的减少了对于网络请求多个文件带来的文件缓存或延时问题。
