发表于： 2020-05-04 23:47:34
0 1556
今日完成
使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：
解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM（Virtual DOM）
Vue.js与JavaScript和jQuery的不同之处
在我们使用JavaScript或jQuery时，做的最多的事情就是操作DOM、绑定事件等这些。比如在制定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="myApp">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
<script>
new Vue({
el: '#myApp',
data: {
showBtn: true
},
methods: {
handleClick: function(){
console.log('Clicked!');
}
}
});
</script>
</body>
返回列表
评论