发表于: 2020-05-04 23:47:34

0 1554


今日完成

使用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>



返回列表 返回列表
评论

    分享到