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

淡淡的烟草味﹌ 2021-08-13 15:33 557阅读 0赞

#### 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关系][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>

[MVVM]: /images/20210813/ce5b626a9fe2493180460d8a24d9311f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，557人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuejs java_vuejs深入浅出—基础篇

一、从HelloWorld说起任何语言的都是从Hello World开始的，VueJs也不例外，直接上代码： \{ \{hello\}\} new Vue(\{ el

朱雀/ 2022年11月05日 12:56/ 0 赞/ 451 阅读

相关 VueJS初探

文章目录 Vue基本代码和MVVM之间对应关系 v-cloak、v-text、v-html的基本使用 v-bind指令-缩写是：

电玩女神/ 2022年10月26日 15:27/ 0 赞/ 353 阅读

相关 Vuejs——（８）Vuejs组件的定义

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。

怼烎@/ 2022年07月18日 01:52/ 0 赞/ 381 阅读

相关 Vuejs——（6）Vuejs与form元素

资料来于官方文档： http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更

深藏阁楼爱情的钟/ 2022年07月18日 00:14/ 0 赞/ 363 阅读

相关 vuejs与外界通信

源代码：其中在vue项目中用npm安装jquery，vue-resource插件的的命令行： npm install jquery npm install vue-re

深碍√TFBOYSˉ_/ 2022年07月12日 06:12/ 0 赞/ 213 阅读

相关 vuejs 的watch 和 $emit

vue有很多像watch，prop，emit等这种api，自己看官网现在给出两个简单的例子： watch 有两种，一种是深度监听，一种是浅度监听 watch

悠悠/ 2022年06月12日 14:43/ 0 赞/ 505 阅读

相关 laravel和vuejs第一个最简单的示例hello Vuejs

纯laravel和vuejs：第一个最简单的示例如果你到网上搜索laravel+vuejs，大部分情况下你会得到一堆如何用nodejs，webpack, babel,

淩亂°似流年/ 2022年06月03日 04:09/ 0 赞/ 280 阅读

相关 vuejs的组件

组件的基本使用注册组件组件注册就是利用`Vue.component()`方法，先传入一个自定义组件的名字，然后传入这个组件的配置。 Vue.compo

╰+哭是因爲堅強的太久メ/ 2022年05月24日 06:50/ 0 赞/ 349 阅读

相关 Vuejs

1. 入门案例 1. 创建vuejs-demo.html <!DOCTYPE html> <html> <he

灰太狼/ 2021年12月21日 19:23/ 0 赞/ 411 阅读

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

Vue.js Vue.js的官方文档中是这样介绍它的：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式（P

淡淡的烟草味﹌/ 2021年08月13日 15:33/ 0 赞/ 558 阅读