比如我们用Jquery在Dom中插入一个元素,并且对其绑定一个click事件:
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写成:
<body>
<div id='' app>
<button v-if='showBtn' @click='handleClick'>Click me</button>
</div>
</body>
<script>
export default {
data() {
return {
showBtn: true
}
},
methods: {
handleClick() {
console.log('Click me');
},
}
}
</script>