vue.js的M-V-VM思想
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思想的更多相关文章
- VUE 是个 M V VM框架
vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...
- （1）打鸡儿教你Vue.js
当今世界不会Vue.js,前端必定路难走 一个JavaScript MVVM库 以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- Vue.js介绍
http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...
- vue.js语法
Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更 ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- Vue.js——60分钟快速入门(转载)
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- openGauss2.1.0在openEuler 20.03 LTS SP2 安装后，yum无法使用的问题解决
openGauss2.1.0 在 openEuler 20.03 LTS SP2 安装后,yum 无法使用的问题解决 一.环境描述 操作系统: openEuler 20.03 LTS openEule ...
- 【我与openGauss的故事】如何管理数据库安全(第一部分)
前言 2021 年 6 月 10 日国家颁布数据安全法对我们国家来说具有重大意义 信息安全法 梳理几点重要意义: (一) 对数据的有效监管实现了有法可依,填补了数据安全保护立法的空白,完善了网络空间安 ...
- spark 计算前后两条记录之间的差(diff)，时间差等
有时候会遇到这样的场景:有一个datafram,我们需要计算同一组对象中,前后两条记录之间的差值,此处并不仅限于时间,还可以是其他的数据类型 需要用到两个工具:spark窗口函数Window对对象分组 ...
- C语言专业课复试整理
C复试专业基础测试整理 运行C程序的步骤和方法 编辑.编译.连接和运行 . 编辑是用户把编写好的C语言源程序输入计算机,以文本文件的形式存放在磁盘上.其标识为:"文件名.c". 编 ...
- 简单介绍 Vue 3.0 项目创建
一.前期转杯 确保电脑上已安装 node.js. 可通过命令 npm --version进行查询,如果展示了版本号,则说明已安装,若提示 npm 不是有内部或外部命令,也不是可运行的程序,则说明未安装 ...
- GaussDB(DWS)基于Flink的实时数仓构建
本文分享自华为云社区<GaussDB(DWS)基于Flink的实时数仓构建>,作者:胡辣汤. 大数据时代,厂商对实时数据分析的诉求越来越强烈,数据分析时效从T+1时效趋向于T+0时效,为了 ...
- 《c#高级编程》第5章C#5.0中的更改（十一）——字符串插值
在 C# 5 中,引入了字符串插值(string interpolation)语法,它提供了一种简单.直观的方式来将变量的值嵌入到字符串中.在以前的版本中,我们需要使用字符串格式化功能来实现这个目的, ...
- 学习 XQuery：XML数据查询的关键
XQuery 是 XML 数据的查询语言,类似于 SQL 是数据库的查询语言.它被设计用于查询 XML 数据. XQuery 示例 for $x in doc("books.xml" ...
- 【笔记】go语言--函数式编程
[笔记]go语言--函数式编程 简单来说,go语言的函数式编程体现的是一个闭包的情况 函数式编程 VS 函数指针 函数是一等公民:参数,变量,返回值都可以是函数 高阶函数 函数->闭包 &quo ...
- 力扣521(java&python)-最长特殊序列Ⅰ（简单）
题目: 给你两个字符串 a 和 b,请返回 这两个字符串中 最长的特殊序列 的长度.如果不存在,则返回 -1 . 「最长特殊序列」 定义如下:该序列为 某字符串独有的最长子序列(即不能是其他字符串的 ...