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,使得我们 ...
随机推荐
- 【鸿蒙生态千帆起】HarmonyOS系统级地图与位置服务，赋能广大开发者
在"与HarmonyOS同行,开放生态,共赢未来"为主题的HUAWEI Developer Day(简称HDD)沙龙中,Petal Maps为开发者们带来了在HarmonyOS下 ...
- 【有奖互动】开发者版本新特性，你期待哪些更新？#HDC.Together2023#
<hdc.together< span="">>华为开发者大会2023再次启航,将于8月4日~6日在中国松山湖举办,承载万千期待,开启崭新时代.聚焦新版本. ...
- k8s 深入篇———— Job与CronJob[十]
开篇 简要演练一下job 和 cronjob 正文 实际上,它们主要编排的对象,都是"在线业务",即:Long Running Task(长作业).比如,我在前面举例时常用的 Ng ...
- 重新点亮shell————变量[三]
前言 简单介绍一下shell的变量. 正文 变量的定义 变量名的命名规则 字母.数字.下划线 不以数字开头 变量的赋值 在赋值的时候不能出现空格 a =123,在等号前面有一个空格,那么会报错. 这是 ...
- react中引入css的方式有哪几种？区别？
一.是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则: 可以编写局部css,不会随意污染其他组件内的原生: 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不 ...
- 力扣168(java)-Excel表列名称（简单）
题目: 给你一个整数 columnNumber ,返回它在 Excel 表中相对应的列名称. 例如: A -> 1B -> 2C -> 3...Z -> 26AA -> ...
- EMR StarRocks 极速数据湖分析原理解析
简介:数据湖概念日益火热,本文由阿里云开源大数据 OLAP 团队和 StarRocks 数据湖分析团队共同为大家介绍" StarRocks 极速数据湖分析 "背后的原理. [首月9 ...
- Flink 在有赞的实践和应用
简介: 本文介绍了Flink 在有赞的实践和应用,内容包括:Flink 的容器化改造和实践.Flink SQL 的实践和应用.未来规划. 作者:沈磊 一.Flink 的容器化改造和实践 1. 有赞的集 ...
- Oracle数据到MaxCompute乱码问题详解
简介:集成Oracle数据到MaxCompute,乱码问题分析: 为什么,在oracle数据不乱码,集成到MaxCompute就乱码了? 问题在哪里? 1.1 乱码现象 DataWorks的数据离线 ...
- [FAQ] Solidity 并发执行 ? 重入攻击 ?
Solidity 实现的合约中,函数操作都是原子操作,旷工本地执行,取得共识后发布到区块链上. 实际发布到区块链上的不存在并发,全节点同步状态到本地. Solidity 中有三种方式进行转账,addr ...