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

最新推荐文章于 2024-09-03 08:59:22 发布

黑猫了个怪怪

最新推荐文章于 2024-09-03 08:59:22 发布

阅读量792

点赞数

文章标签： mvc vue.js 前端

本文链接：https://blog.csdn.net/Janicecat/article/details/121736044

版权

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>