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>
    

      

  • 相关阅读:
    701. 二叉搜索树中的插入操作
    【ceph | 运维】 部署mgr
    【cpeh | 运维】mon相关命令
    【Leetcode】144. 二叉树的前序遍历
    【Linux】Linux中查看某个软件的安装路径
    【Leetcode】100. 相同的树
    【Leetcode】145. 二叉树的后序遍历
    【Leetcode】94. 二叉树的中序遍历
    redis学习04Redis的主从架构
    RabbitMQ学习02安装与配置(Ubuntu系统)
  • 原文地址:https://www.cnblogs.com/HHR-SUN/p/14100882.html
Copyright © 2011-2022 走看看