初识vue
Vue是什么
Vue.js是一个渐进式的前端框架，所谓渐进式就是你可以有阶段性地使用Vue，而不必一开始就使用它的所有东西。同时，Vue也改变了传统的前端开发模式，提供了一下常见的高级功能，比如：
- 解耦视图和数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM（Virtual DOM）
MVVM模式
与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用了MVVM（Model-View-ViewModel）模式。
MVVM模式是由经典的软件架构MVC衍生而来的。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然，View和ViewModel之间通过双向数据绑定（data-binding）建立联系，如下所示：
Vue.js与Jquery有什么不同
如下代码用jquery操作dom、绑定一个点击事件
var btn = $('<button>Click me</button>');
btn.on('click',function(){
console.log('Clicked!');
})
$('#app').append(btn);可以看出，虽然操作的内容不复杂，但是此时我们的视图代码已经和业务逻辑代码紧耦合在一起了，随着功能的不断增加，直接通过操作dom的方式会使代码越来越难维护。
而Vue.js通过MVVM模式拆分为视图和数据两部分，并将其分离，因此你只需要关心数据即可，dom的操作Vue会帮你搞定，用Vue.js改写上述代码：
<body>
<div id="app">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
<script>
new Vue({
el:'#app',
data:{
showBtn:true
},
methods:{
handleClick:function(){
console.log('Clicked!');
}
}
});
</script>
</body>如何使用Vue.js
对比传统前端开发模式和Vue.js的开发模式
- 传统的前端开发模式
前端技术快速发展，比如EMCAScript6、Node.js、NPM、前端工程化等不断在优化我们的开发模式，常用的用于生产的万金油的技术栈：
Jquery+RequestJs（SeaJs）+artTemplate(doT)+Gulp(Grunt)
RequireJs（SeaJs）:模块化代码，解决代码依赖混乱的问题，便于团队协作
doT:前端模板，可以将数据与html模板分离
gulp：自动化构建工具，可以合并压缩代码
传统的开发模式简单高效，但是随着项目扩大和时间推移，出现了更为复杂的业务场景，如SPA（单页面富应用）、组件解耦。为了提高开发效率，降低维护成本，这时候就出现了Angular、React以及Vue.js。
- Vue.js的开发模式
如果只是开发简单的html5页面或者小应用，可以直接通过script加载csn文件，如
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
接着，在body结束标签前使new Vue()来创建一个实例，这就是Vue.js最基本的开发模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,5,56,41]
},
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}
});
function sortNumber(a,b){
return a-b
}
</script>
</body>
</html>对于业务逻辑复杂，对前端工程有要求的项目，可以使用Vue单文件的形式配合webpack使用，必要时候还会使用vuex来管理状态，vue-router来管理路由。
参考文章
- 《vue.js实战》