vue基础 - 21 （ MVC机制: Model View Controller、MVVM: Model(数据) View(视图) ViewModel(视图模型)）

1、 MVC机制: Model View ControllerModel：模型层 -- 数据部分View：视图层 -- 可见的html部分Controller：控制器，控制数据在变化时，自动更新到View中（数据重新赋值/发生变化，页面上的值自动更新，利用的是set、get方法）<body><div>{{message}}</div><script&gt

黑猫了个怪怪

860人浏览 · 2021-12-05 21:43:52

黑猫了个怪怪 · 2021-12-05 21:43:52 发布

1、 MVC机制: Model View Controller

Model：模型层 -- 数据部分

View：视图层 -- 可见的html部分

Controller：控制器，控制数据在变化时，自动更新到View中（数据重新赋值/发生变化，页面上的值自动更新，利用的是set、get方法）


  <body>
    <div>{{message}}</div>

    <script>
      var data = { message: "Hello" }

      // data.message = "Welcome" //Vue会自动更新到页面上,刷新DOM

      // 赋值操作: -- 赋值操作会触发属性的 set 方法

      // 专业名称: 控制器 Controller
      // 控制当属性变化时, 更新其对应的DOM元素!
      Object.defineProperty(data, "message", {
        // 赋值操作触发
        set(value) {
          console.log("message的新值:", value)
          // 读取 message所在的元素, 然后修改其值
          let div = document.getElementsByTagName("div")[0]
          div.innerHTML = value //更新DOM的值

          this._message = value
        },
        // get: 当读取操作发生时触发
        get() {
          return this._message
        },
      })

      data.message = "Welcome"
      data.message = "One Two Three"
    </script>
  </body>

2、 MVVM： Model(数据) View(视图) ViewModel(视图模型)

熟悉的属性： v-model ，页面变化时更新其对应的数据项

数据变化更新DOM：MVC 的 C

视图变化更新数据：MVVM 的 VM

v-model 本质是个语法糖，由两件事组成：赋值 + 修改监听

<body>
    <input type="text" />
    <p></p>

    <script>
      var data = { message: "Hello" }
      // MVC -> C
      Object.defineProperty(data, "message", {
        set(value) {
          // 在 vue中, 会自动查找 {{message}} 相关的内容, 进行更新
          let input =document.getElementsByTagName("input")[0]
          input.value = value

          let p = document.getElementsByTagName("p")[0]
          p.innerHTML = value

          this._message = value
        },
        get() {
          return this._message
        },
      })

      data.message = "666"

      // MVVM中的 VM 视图模型 -> 页面变化时更新其对应的数据项
      let input = document.getElementsByTagName("input")[0]
      input.addEventListener("input", function (e) {
        console.log(e.target.value)
        data.message = e.target.value
      })

      // VM: 视图模型
      // 当视图发生变化时(表单元素), 监听他们的变化, 然后更新其所对应的数据项,  数据项更新后 又会更新 绑定了此数据项的 相关DOM元素
    </script>
  </body>

天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐