vue实例属性

vm.$data

类型:Object【对象】
详细:Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
参考:选项 / 数据 - data

vm.$props

类型:Object【对象】
详细:当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

vm.$el

类型:HTMLElement 【DOM】
只读
详细:Vue 实例使用的根 DOM 元素。

vm.$options

类型:Object 【对象】
只读
详细:用于当前 Vue 实例的初始化选项。需要在vue实例中包含自定义属性时会有用处:

new Vue({
customOption: 'foo',
created: function () {
    console.log(this.$options.customOption) // => 'foo'
}
})

vm.$parent

类型:Vue instance 【vue实例】
只读
详细:父实例,如果当前实例有的话。

vm.$root

类型:Vue instance【vue实例】
只读
详细:当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

vm.$children

类型:Array<Vue instance> 【vue实例】
只读
详细:当前实例的直接子组件。需要注意$children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

vm.$slots

类型:{ [name: string]: ?Array<VNode> }
只读
详细:用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。
在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。
示例:

<blog-post>
<h1 slot="header">
About Me
</h1>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
<p slot="footer">
Copyright 2016 Evan You
</p>
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

<script>
Vue.component('blog-post', {
    render: function (createElement) {
        var header = this.$slots.header
        var body = this.$slots.default
        var footer = this.$slots.footer
        return createElement('div', [
            createElement('header', header),
            createElement('main', body),
            createElement('footer', footer)
      ])
}
</script>
})

参考:

  • <slot> 组件
  • 使用插槽分发内容
  • 渲染函数 - 插槽

vm.$scopedSlots

2.1.0 新增类型:{ [name: string]: props => VNode | Array<VNode> }
只读
详细:用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。
参考:

  • <slot> 组件
  • 作用域插槽
  • 渲染函数 - 插槽

vm.$refs

类型:Object 【对象】
只读
详细:一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。
参考:

  • 子组件引用
  • 特殊特性 - ref

vm.$isServer

类型:boolean
只读
详细:当前 Vue 实例是否运行于服务器。
参考:服务端渲染

vm.$attrs

类型:{ [key: string]: string }
只读
详细:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

vm.$listeners

类型:{ [key: string]: Function | Array<Function> }
只读
详细:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
实例方法 / 数据

vm.$watch( expOrFn, callback, [options] )

参数:

  • {string | Function} expOrFn
  • {Function | Object} callback
  • {Object} [options]
  • {boolean} deep
  • {boolean} immediate
    返回值:{Function} unwatch
    用法:
    观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
    注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
    示例:
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
//vm.$watch 返回一个取消观察函数,用来停止触发回调:
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项:immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:
vm.$watch('a', callback, {
immediate: true
})

// 立即以 a的当前值触发回调

vm.$set( target, key, value )

参数:

  • {Object | Array} target
  • {string | number} key
  • {any} value

返回值:设置的值。
用法:
这是全局 Vue.set 的别名。
参考:Vue.set

vm.$delete( target, key )

参数:

  • {Object | Array} target
  • {string | number} key

用法:
这是全局 Vue.delete 的别名。
参考:Vue.delete

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,048评论 0 29
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,960评论 6 13
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,015评论 4 129
  • 人是有理性的吗? 很多人会讲,如果人不理性,这个世界上就没有理性的动物了。这话的确不假,但是智慧的人类,也常常有非...
    黑的白的黑阅读 366评论 0 1
  • 有些东西是急不来的,需要等,而且要有耐心地等,就像禾苗的生长,它总需一节一节地来,就像日子的流逝,它总需从早晨到中...
    别山举水阅读 2,536评论 103 82