Vue.js概述、MVVM模式、Vue.js与JavaScript和jQuery的不同之处

最新推荐文章于 2024-03-20 11:39:12 发布

吴声子夜歌

最新推荐文章于 2024-03-20 11:39:12 发布

阅读量5.2k

点赞数 11

分类专栏： Vue.js 文章标签： Vue.js Vue.js概述 Vue.js特点

本文链接：https://blog.csdn.net/cold___play/article/details/102178627

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

Vue.js

Vue.js的官方文档中是这样介绍它的：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式（Progressive），就是我们可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。

使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：

解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM（Virtual DOM）

MVVM模式

与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用MVVM（Model-View-View Model）模式。

MVVM模式是由经典的软件架构MVC衍生来的。当View（视图层）变化时，会自动更新ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定（data-binding）建立联系。

MVVM关系

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>

吴声子夜歌

关注

11
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Vue.js概述、MVVM模式、Vue.js与JavaScript和jQuery的不同之处

Vue.jsVue.js的官方文档中是这样介绍它的：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式（Progressive），就是我们可以一步一步、有阶段性地来使用Vue.js，不必一开始就使用所有的东西。使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能：解耦视图与...
复制链接

扫一扫