Vue.js的官方文档是这样介绍它的。
简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
简单小巧是指vue.js压缩后只有17KB。所谓渐进式,就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。随着本身的不断介绍,你会深刻的感受到这一点,这也正是开发者热爱Vue.js的主要原因之一。
使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能,比如:
1 解耦视图与数据
2 可复用的组件
3 前端路由
4 状态管理
5 虚拟DOM
MVVM模式(Model-View-View-Model模式)
Vue.js有什么不同?
如果你使用过jQuery,那么一定对操作DOM、绑定事件等这些原生JavaScript能力非常熟悉,比如我们在指定DOM中插入一个元素,并给它绑定一个点击事件。
if(showBth){ 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> </body> <script> new Vue({ el:"#app", data:{ showBtn:true }, methods:{ handleClick:function(){ console.log("Clicked"); } } }) </script>