zoukankan      html  css  js  c++  java
  • 01-vue分层概念MVVM

    什么是MVVM?

     + MVC 是后端的分层开发概念;
     + MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel

     + 为什么有了MVC还要有MVVM
    MVVM是视图层的分层开发思想,VM是核心,是V和M之间的调度者。
    M是每个页面中保存的单独的数据
    V是每个页面中的html结构
    VM是调度者,分割了M和V,每当V层想要获取和保存数据时都要由VM做中间的处理,实现数据的双向绑定,方便开发。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <!-- 1. 导入Vue的包 -->
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 -->
      <!-- Vue 实例所控制的这个元素区域,就是我们的 V  -->
      <div id="app">
        <p>{{ msg }}</p>
      </div>
    
      <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
        //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
        var vm = new Vue({
          el: '#app',  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
          // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
          data: { // data 属性中,存放的是 el 中要用到的数据
            msg: '欢迎学习Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
          }
        })
      </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    Go之运算符
    前端开发之工具库
    MVC与MVVM
    开发工具之Vscode编辑器
    常用名词汇总
    python常见错误总结
    Python之常用第三方库总结
    PHP程序员的成长路线
    web 应用常见安全漏洞
    redis和memcached的区别详解
  • 原文地址:https://www.cnblogs.com/HHR-SUN/p/14100882.html
Copyright © 2011-2022 走看看