(03)Vue 初识——③ MVVM 模式 | Vue 基础理论实操

本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!

转载请注明出处,未经同意,不可修改文章内容。

🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕,有需要的小伙伴可按需前往查看。

🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”,已于本月大改版,合二为一,干货满满,欢迎点击公众号菜单栏各模块了解。

(03)Vue 初识——③ MVVM 模式 | Vue 基础理论实操


涉及面试题:
1. 什么是 MVVM?比之 MVC 有什么区别?
2. Vue 的优点?
3. 渐进式框架的理解?
4. 三大框架的对比?

[编号:vue_03]

🔗本阶段对应的“官方文档”阅读“介绍”章节

MVVM 设计模式

(03)Vue 初识——③ MVVM 模式 | Vue 基础理论实操

Vue 是 MVVM 模式的框架。

当我们使用 MVVM 这种模式的框架进行编码的时候,我们不需要关注 VM 这一层到底是怎么实现的,它是 Vue 内置的。我们只需要关注“ M 层”和“ V 层”。

对 MVVM 这种模式进行编码的时候,编码的重点在于“视图层”和“模型层”。

  • View:视图层,负责显示数据。 会监听数据、事件的触发(主要是 Vue 的指令)。
<div id="app">
  <input type="text" v-model="inputValue">
  <button v-on:click="handleBtnClick">添加</button>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
  • Model:数据层,负责存储数据。 在 Vue 中,我们主要在写数据。

     💡 【重点关注这一层】——面向数据开发。

<script>
  var app = new Vue({
    el: '#app',
    data: {
      list: [],
      inputValue: ''
    },
    methods: {
      handleBtnClick() {
        this.list.push(this.inputValue) // 1️⃣实现了当点击时,把获取到的输入内容这个数据放入列表中;
        this.inputValue = '' // 2️⃣通过改变 inputValue 数据,实现了清空输入框的功能。
      }
    }
  })
</script>
  • ViewModel: 这是 Vue 自带的一层,不需要我们编写。它将 View 层和 Model 层连接起来,当视图层变化时,数据层也跟着变化,反之亦然。这其中 ViewModel 带动其视图和数据的变化。

🏆总结:
(03)Vue 初识——③ MVVM 模式 | Vue 基础理论实操

  • Vue (即 ViewModel 层)会监听到你数据变了,它会帮你去改变视图层;
  • Vue 也会监听到视图层有一些事件触发,然后帮助你通过 VM 这一层去调用你写的一些逻辑代码,通过这些代码,你又改变了 M 层的“数据”。当“数据”发生变化的时候,VM 层又会自动地把“数据”的变化映射到“视图层”上面来。

🏆这样的话有一个好处:
当我们使用 Vue 这种 MVVM 框架进行开发的时候,我们只需要去关注“ M 层”的开发就可以了!我们把“数据”做一个修改,页面会自动地跟着变。同时,页面上的变化,Vue 实例也能感知到,可以方便地帮我们去操作数据。

祝好,qdywxs ♥ you!

原文链接:https://juejin.cn/post/7213252345550372901 作者:itsOli

(0)
上一篇 2023年3月22日 下午7:00
下一篇 2023年3月22日 下午7:10

相关推荐

发表评论

登录后才能评论