Vue与Jquery的区别到底在哪里?

比如我们用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>

猜你喜欢

转载自blog.csdn.net/weixin_44041659/article/details/84976073