Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿

2019年9月1日 181次阅读 来源: 二月红

书接上文，上一回我们说到了如今的前端江湖早已经是框架三分世界的款式。接下来，我们就要说到主角 Vue 了。在说真正的 Vue 内容之前，我们还要先来讲说 Vue 与 MVVM 之间的那些事儿。

什么是Vue

想要近距离相识什么是 Vue，实在迥殊简朴。我们只需要接见 Vue的官方网站 就能够了。

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

映入眼帘的，我们能够看到说 Vue 是渐进式 JavaScript 框架，英文叫做“Progressive JavaScript Framework”。固然，你如今并不需要晓得什么是渐进式 JavaScript 框架。
那末接下来，我们再进一步看看 Vue 的官方是如何来引见本身的呢。

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与别的大型框架差别的是，Vue 被设想为能够自底向上逐层运用。Vue 的中心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的东西链以及种种支撑类库连系运用时，Vue 也完全能够为庞杂的单页运用供应驱动。

关于这个定义我们不做过量的诠释了，由于就算诠释预计你如今也很难晓得它在说个啥！假如你不满足，那我们就再看一个 Vue 官方供应的视频吧。

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

Vue的特性

依据 Vue 的官方供应的信息，我们能够看到 Vue 重要的特性集合在三点：

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

  • 易用：只需你控制了 HTML、CSS 和 JavaScript，就能够直接来进修 Vue 框架了。
  • 天真：Vue 供应一个中心库，类似于 jQuery。依托本身不停繁华的生态系统，类似于 jQuery 的插件库一样，能够在一个库和一套完全框架之间自若伸缩。
  • 高效：中心库文件紧缩以后只要 20KB，远比 jQuery 的紧缩版文件小得多。而且还供应超快的假造 DOM。

整体来讲，Vue 的官方就是通知你，用我这个框架请求很低，会HTML、CSS 和 JavaScript 就能够了。而且，我这个框架的中心库 Vue.js 文件很小，你运用的时刻不会对你如今的项目形成多大的影响。
裤裆里着火，固然了！我们如今也没用 Vue 来开辟个网页，所以它所谓的上风关于我们现阶段来讲只不过自说自话罢了。是否是这个模样，我们还需要在详细的案例中体验。

什么是 MVVM

关于 Vue 我们说了这么多，接下来再来讲说关于 MVVM 吧。MVVM 呢，实际上是一种开辟形式。固然，这么说预计你也是一脸懵逼的。
心急吃不了热豆腐，且听我逐步道来~
MVVM 实在示意的是 View-ViewModel-Model，就是视图层-视图模子层-模子层。View是作为视图层，简朴来讲能够把它理解为HTML页面；Model 是作为模子层，它是担任处理营业逻辑以及和服务器端举行交互的；ViewModel 是作为视图模子层，也就是 Vue 框架所起到的作用了，重如果作为 View 层和 Model 层之间的通讯桥梁。

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

Vue 与 MVVM

说到这呢，能够你会产生个疑问，Vue 和 MVVM 之间是个什么关联呢？
实在，Vue 框架就是一个典范的 MVVM 模子的框架。在诠释 MVVM 形式的时刻，我们也说了，Vue 框架实在就是起到 MVVM 形式中的 ViewModel 层的作用。
这么说照样会比较笼统，接下来我们用代码来进一步诠释 Vue 和 MVVM 之间的关联。
假如你运用过 jQuery 的话，那你对 DOM 操纵、事宜绑定肯定不生疏啦！比方我们如今经由过程 jQuery 来为指定的 DOM 增添一个 button 按钮，并为它绑定 click 事宜，详细的代码就像下面如许：

if (showBtn) {
  var btn = $('<button>点我点我点我</button>');
  btn.on('click', function(){
      console.log('你终究点中了我...');
  });
  $('#app').append(btn);
}

上面这段代码的逻辑并不庞杂。然则如许的代码最大的题目就是担任视图的 HTML 代码和担任营业逻辑的 JavaScript 代码耦合在一起。跟着功用的不停完善和增添，直接操纵 DOM 会变得愈来愈贫苦。
像 Vue 如许的 MVVM 框架将视图层和模子层有效地星散开来，如许你只需要体贴数据就行啦！

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <button v-if="showBtn" v-on:click="handleClick">点我点我点我</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            showBtn: true
        },
        methods: {
            handleClick: function(){
                console.log('你终究点中了我...');
            }
        }
    });
</script>

上面这段代码我们会发明，担任视图的 HTML 代码和担任营业逻辑的 JavaScript 代码有效地星散开来。之所以能做到这一点，重如果依托 Vue 框架才得以完成的。

《Vue中心50讲 | 第一回：Vue 与 MVVM 之间那些事儿》

所以，Vue 框架就是充当了 MVVM 开辟形式中的 ViewModel 层，担任 View 和 Model 之间通讯的桥梁。我们在运用 Vue 框开辟的时刻，只需要体贴 View 层的 HTML 代码和 Model 层的 JavaScript 逻辑就能够了。

    原文作者：二月红
    原文地址: https://segmentfault.com/a/1190000019402270
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞