Vuejs vm对象详解

vue数据是怎么驱动视图的?
一堆数据放在那里是不会有任何作用的，它必须通过我们的View Model（视图模型）才能操控视图。

图中的model其实就是数据，一般我们写成js对象的格式；

中间的这个所谓View Model，就是

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
我们把数据放到了vm里，然后把各种directive放到视图里，这样我们就可以以vm为媒介，通过改变数据来改变视图。

vm这个对象有哪些属性和方法

我们看到

var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
误区

vm实际上是Vue这个类的一个实例，非常容易混淆的是，你会很容易的以为

vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
实际上这都是错误的，

{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
这只是传进 Vue()的一个参数，它可不是vm本身。

通过vm读取数据

实际上，vm.messasge == 'Hello Vue!', vm的属性是直接跟数据的key绑定的（至于怎样绑定的现在不用管),这是一种代理属性;

这个数据是响应式(reactive)的

var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置vm数据会使原来的数据发生改变
vm.a = 2
data.a // -> 2
// ... 反过来亦然
data.a = 3
vm.a // -> 3
怎么通过vm获取其他属性

vm.el == '#app';
vm.data== {
message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';
以上虽然是错误的写法，有时候我们还是希望获得这些属性的，通过vm你需要这样写：

vm.$el === document.getElementById('app') // -> true
vm.$data === data // -> true
vm.$data.message ==='Hello Vue!' // -> true
这个$符代表的就是vm的真实属性了。

详细其他属性的请查阅文档Api

不仅有属性，还有方法

vm.$watch('a', function (newVal, oldVal) {
// 当vm.a发生改变的时候，这个回调函数将会被触发
})
详细其他方法,请查阅文档Api

Vuejs vm对象详解相关推荐

JavaScript高级编程--对象详解
对象详解 Object.prototype.hasOwnProperty() 返回布尔 (原型对象的方法) 表示是否是对象自身的属性.所有实例对象都可以访问这个方法会查找一个对象是否有某个属性,但是 ...
jQuery的deferred对象详解
阮一峰大神的关于jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
javascript BOM对象详解
javascript BOM对象详解目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
转载雨松mono Unity获取游戏对象详解（来自我的长微博）
Unity获取游戏对象详解(来自我的长微博) 转载自雨松mono 本文固定链接: http://www.xuanyusong.com/archives/2768 转载请注明: 雨松MOMO 201 ...
html内置时间对象,JavaScript中的常用事件，以及内置对象详解
原标题:JavaScript中的常用事件,以及内置对象详解今天是刘小爱自学Java的第81天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 学前端有一个非常权威的组织,也就是w3c,其有个专 ...
JS----window对象详解
一.说明他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用"Window.XXX"这种形式,而是直接使用"XXX".一个框架 ...
Hibernate Criteria对象详解(条件查询)
Hibernate Criteria对象详解 2014-9-1 16:21| 发布者: 传智特刊| 查看: 7290| 评论: 0 摘要: Hibernate框架是目前JavaEE软件开发的企业主流框 ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...

Vuejs vm对象详解

Vuejs vm对象详解相关推荐

最新文章

热门文章