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相关开发是为了能为鸿蒙生态建设尽一份绵薄之力,从小了讲,就是为了自己的兴趣.而万能卡片是一个让我非常感兴趣的东西. 很多时候我跟别 ...
- HarmonyOS多媒体框架介绍
原文:https://mp.weixin.qq.com/s/_2LHv7s7X4IJMCPU8hcCeg,点击链接查看更多技术内容. 随着科技进步,我们的生活发生了翻天覆地的变化.过去几年音视频技 ...
- BTC的数据结构
区块链是一个个block所构成的链,或者链表状的数据结构,在比特币中或者区块链中,一个重要的组成部分是哈希指针 指针 在程序运行过程中,需要用到数据.最简单的是直接获取数据,但当数据本身较大,需要占用 ...
- Win7 局域网服务器 - FTP 服务器搭建指南
1. 打开 "开始" 菜单,找到控制面板 2. 选择 "程序" 3. 选择 "打开或关闭 Windows 功能" 4. 选择 "I ...
- 常用注解使用总结系列: @Order 注解
@Order 注解 @Order注解主要用来控制配置类的加载顺序示例代码: package com.runlion.tms.admin.constant; public class AService ...
- Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错
项目场景:解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述使用内网穿透时出现 invalid host header找了好多都是 ...
- Vue3开源组件库
最近收到的很多问题都是关于Vue3组件库的问题 今天就给大家推荐几个基于Vue3重构的开源组件库 目前状态都处于Beta阶段,建议大家抱着学习的心态入场,勿急于用到生产环境 Ant-design-vu ...
- Tencent 闲聊对话机器人接口调用，画像：设计员小白
from datetime import datetime import time import requests from hashlib import md5 from urllib import ...
- gensim的word2vec的简单使用
from gensim.models import Word2Vec as wtv import jieba s1 = "刘新宇是一个自然语言处理算法工程师" s2 = " ...
- bs4、selenium的使用
爬取新闻 # 1 爬取网页---requests # 2 解析 ---xml格式,用了re匹配的 ---html,bs4,lxml... ---json: -python :内置的 -java : f ...