MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

编写代码，让我们更加清晰的了解MVVM：

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.min.js"></script>

    <script>

    window.onload = function(){

        // 创建vm对象

        var vm = new Vue({

            el: "#app",

            data: {

                name:"yuan",

                age:22,

            },

        })

    }

    </script>

</head>

<body>

    <div id="app">

        <!-- 在双标签中显示数据要通过{{  }}来完成 -->

        <h1 ref='title'>{{name}}</h1>

        <p>{{age}}</p>

    </div>

</body>

</html>

　　

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据：

console.log(vm)     // box  vm对象可以控制的范围

console.log(vm.$el)     // box  vm对象可以控制的范围

console.log(vm._data);  // vm对象要显示到页面中的数据

console.log(vm._data.name);  // 访问data里面的数据

console.log(vm.name);  // 这个 name就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,name只是举例.

console.log(vm.$refs.title) // 结果就是获取页面中ref = "title"的html元素，类似docment.querySelector("[ref=title]")

　　

vue.js的M-V-VM思想的更多相关文章

  1. VUE 是个 M V VM框架

    vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...

  2. （1）打鸡儿教你Vue.js

    当今世界不会Vue.js,前端必定路难走 一个JavaScript MVVM库 以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...

  3. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  4. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  5. Vue.js快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  6. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  7. vue.js语法

    Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更 ...

  8. Vue.js——快速入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  9. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  10. Vue.js——60分钟快速入门(转载)

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. Hessian反序列化分析

    RPC协议 RPC全称为Remote Procedure Call Protocol(远程调用协议),RPC和之前学的RMI十分类似,都是远程调用服务,它们不同之处就是RPC是通过标准的二进制格式来定 ...

  2. Android 开发入门（5）

    0x07 数据存储 (1)共享参数 SharedPreferences a. 用法 用法 SharedPreferences 是 Android 的一个轻量级存储工具,采用的存储结构为键值对的方式 共 ...

  3. http json请求工具类

    import java.io.InputStream; import java.net.URL; import java.net.URLConnection; import java.util.Sca ...

  4. pageSpy - 远程调试利器

    视频版: https://www.bilibili.com/video/BV1Zi4y167TZ 前言 在工作中, 经常需要面对的问题就是处理客户提出的bug. 但是这个事儿最耗费精力甚至决定能不能修 ...

  5. 云效DevOps实践-如何基于云效实现测试自动化集成和分析

    简介: 对于现代软件研发来说,持续.快速.高质量.低风险地交付需求特性,是业务对研发的主要诉求.而要做到这一点,除了要有良好的架构设计.卓越的工程能力,快速可靠的测试反馈也是其非常重要的一环,达到这一 ...

  6. 让容器跑得更快：CPU Burst 技术实践

    ​简介:让人讨厌的 CPU 限流影响容器运行,有时人们不得不牺牲容器部署密度来避免 CPU 限流出现.我们设计的 CPU Burst 技术既能保证容器运行服务质量,又不降低容器部署密度.CPU Bur ...

  7. WinForm 下的高性能笔迹方法

    在 WPF 中可以通过 StylusPlugIn 的方式快速从触摸线程拿到触摸数据,而 WinForms 没有这个机制,但是可以通过 Microsoft.Ink 组件和 WPF 相同在 RealTim ...

  8. 2019-8-31-dotnet-动态代理魔法书

    title author date CreateTime categories dotnet 动态代理魔法书 lindexi 2019-08-31 16:55:58 +0800 2019-06-02 ...

  9. STLINK/V2下载器接线方法

    一.ST-LINK ST-LINK产品如下图所示: ST-LINK接口定义如下图所示 ST-LINK与stm32接线 使用SW接法只需要四根线: STM32 ST-LINK VCC(3.3V) TVC ...

  10. P10118 『STA - R4』And

    P10118 『STA - R4』And 题意:给定 A,B,求 \(\sum y - x\),其中 x,y 满足: x < y x + y = A x & y = B 对于加运算和与运 ...