![](http://okydwk9zh.bkt.clouddn.com/18-4-6/43596766.jpg)
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实战》