初识Vue.js
2018-05-19 本文已影响0人
三石苏
标签 ： 前端框架、MVVM、Vue、
Vue.js是什么
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 简单小巧是指压缩后仅有17kb
- 渐进式是指你可以一步一步、有阶段性的使用Vue.js，不必一开始使用所有的东西
使用Vue.js可以让web开发变得简单，同时颠覆了传统前端开发模式。它提供了现代web开发中常见的高级功能，比如：
- 解耦视图和数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
MVVM模式
与知名前端框架 Angular、React 等一样，Vue.js在设计上也使用了 MVVM（Model-View-View-Model）模式
当 View（视图层）变化时，会自动更新到 ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定建立联系
Vue.js有什么不同
如果你使用过jQuery，比如我们在指定 DOM中插入一个元素，并且给它绑定一个点击事件：
if (showBtn) {
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>
笔记写于2018年五月19日午时
