vue API 知识点(3) --- 实例 总结
一、实例 property
1.vm.$data
Vue 实例观察的数据对象,Vue 实例代理了对其 data 对象 property 的的访问
2.vm.$props
当前组件接收到的 props 对象。Vue实例代理了对其 props 对象 property 的访问
3.vm.$el
Vue 实例使用的根 DOM 元素
4.vm.$options
用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处
示例:通过这种方式我们可以自定义一些属性,通过 $options 获取自定义属性
export default {
name: 'testComponent',
// demo 是自定义属性 可以 通过 vm.$options.demo 获取到属性值
demo: '自定义属性',
//------
data () {
return {}
},
mounted () {
//使用 vm.$options 可以获取 实例上自定义的 属性
console.log( this.$options.demo, '$options'); //自定义属性
console.log( this.aaa); //111
}
}
5.vm.$parent
获取父实例(如果有父实例)
6.vm.$root
获取当前组件树的根 Vue 实例,如果当前实例没有父实例,此实例将会是自己
7.vm.$children
获取当前实例的直接子组件。获取到的值,并不能保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。
8.vm.$slots
用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如:v-slot: foo 中的内容将会在vm.$slots.foo中被找到)。default property 包括了所有没有被包含在具名插槽中的节点。或 v-slot: default 的内容
请注意插槽不是响应式的。如果需要一个组件可以在被传入的数据发生变化时重新渲染,我们建议改变策略,依赖诸如 props 或 data 等响应性实例选项
示例:
创建一个 lv-spa 组件
<template>
<div>
<slot name='header'></slot>
<h1>一级标题</h1>
</div>
</template>
使用组件
<div id='a'>
<!-- 老版本具名插槽 -->
<lv-spa>
<p slot='header'>
我是header
</p>
</lv-spa>
<!-- 新版本具名插槽 -->
<lv-spa>
<!-- 注意:这里的 v-slot 指令只能写在 template 标签上面,而不能放置到 p 标签上 -->
<template v-slot:header>
<p>我是header</p>
</template>
</lv-spa>
</div>
具名插槽的缩写
v-slot: 可以替换成 # 号
<div id='a'>
<lv-spa>
<template #header>
<p>我是header</p>
</template>
</lv-spa>
<lv-spa>
<!-- # 后面必须有参数,否则会报错。即便是默认插槽,也需要写成 #default -->
<template #default>
<p>我是header</p>
</template>
</lv-spa>
</div>
作用域插槽:就是让插槽的内容能够访问子组件中才有的数据。
声明一个组件 zn-div
<template>
<div>
<slot name='znnnn' :name='name' :age='age'></slot>
<h1>一级标题</h1>
</div>
</template>
使用
<div id='a'>
<!-- 老版本使用具名插槽 -->
<zn-div>
<div slot='znnnn' slot-scope='people'>
<h3>我的名字:{{ people.name }}</h3>
<h3>我的年龄:{{ people.age }}</h3>
</div>
</zn-div>
<!-- 新版本具名插槽 -->
<zn-div>
<template #znnnn='people'>
<h3>我的名字:{{ people.name }}</h3>
<h3>我的年龄:{{ people.age }}</h3>
</template>
</zn-div>
</div>
9.vm.$scopedSlots
用来访问作用域插槽。对于包括默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。平时开发过程中用到的比较少。
10.vm.$refs
一个对象,持有注册过 ref attribute 的所有 DOM 元素的组件实例
11.vm.$isServer
当前 Vue 实例是否运行于服务器
12.vm.$attrs
包含父作用域中不作为 prop 被识别(且获取的)的 attribute 绑定(class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定(class 和 style 除外),并且可以通过 v-bind='$attrs' 传入内部组件--在创建高级别的组件时非常有用,平时开发基本用不到
13.vm.$listeners
包含了父作用域中的(不含 .native 修饰器的)v-on 事件监听器。它可以通过 v-on='$listeners' 传入内部组件--在创建更高层次的组件时非常有用,平时开发基本用不到
二、实例方法/数据
1.vm.$watch
计算属性。这篇文章有详细的介绍
2.vm.$set 和 vm.$delete
vm.$set 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。他必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通新增 property
三、实例方法/事件
1.vm.$on
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数
2.vm.$once
监听一个自定义事件,但是只触发一次,一旦触发之后监听器就会被移除
3.vm.$off
移除自定义事件监听器
如果没有提供参数,则移除所有的事件监听器
如果只提供了事件,则移除该事件所有的监听器
如果同时提供了事件与回调,则只移除这个回调的监听器
4.vm.$emit
触发当前实例上的事件,附加参数都会传给监听器回调。(通常在子组件传递给父组件的时候使用)
四、实例方法/生命周期
1.vm.$mount
如果 Vue 实例在实例化时没有收到 el 选项,则它处于 未挂载 状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例
如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的元素,并且你必须使用原生 DOM API 把它插入文档中
这个方法返回实例自身,因而可以链式调用其他实例方法
2.vm.$forceUpdate()
迫使 Vue 实例重新渲染,注意它仅仅影响实例本身和插槽内容的子组件,而不是所有子组件
3.vm.$nextTick()
将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新,它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上
4.vm.$destroy()
完全销毁一个实例。清理它与其他实例的连接,解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子
在大多数场景中不应该调用这个方法,通常使用 v-if v-for 指令以数据驱动的方式控制子组件的生命周期
vue API 知识点(3) --- 实例 总结的更多相关文章
- vue API 知识点(2)---选项总结
一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...
- vue API 知识点(1)---全局 API 总结
1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...
- 记vue API 知识点
1. v-cloak指令:这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标 ...
- vue API 知识点(4) --- 指令、特殊 attribute 、内置组件
一.指令 1.v-text <span v-text="msg"></span> <!-- 两种写法是一样的 --> <span>{ ...
- Vue.2.0.5-Vue 实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...
- 转载 基于JAVA每月运势api调用代码实例
代码描述:基于JAVA每月运势api调用代码实例 接口地址:http://www.juhe.cn/docs/api/id/58 原文链接:http://outofmemory.cn/code-snip ...
- VUE API 重点
VUE API 重点 生命周期方法 每个组件都有生命周期,是向 ReactJs 学习的. computed 在一个组件声明一个人,人有名,人有姓,输入姓和名.((&--&%--& ...
- Vue中通过Vue.extend动态创建实例
Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...
随机推荐
- 用MindManager画思维导图的好处有哪些?
大家都听说过思维导图吧?有没有将这样一种图形思维工具真正运用到我们的日常生活中去呢?是否真的知道思维导图怎么用呢?今天小编就来给大家讲一讲,思维导图怎么用. 老规矩,先给大家讲一讲小编用的软件跟系统, ...
- 工作中使用mongodb
写了一个mongodb的基类 1 <?php 2 3 namespace BI\Service\MongoDB; 4 5 use MongoDB\Driver\BulkWrite; 6 use ...
- thinkphp3.2 添加自定义类似__ROOT__的变量
1 thinkphp3.2 添加自定义类似__ROOT__的变量 2 3 在config.php文件中 4 return array( 5 '' => '', 6 'TMPL_PARSE_STR ...
- Python文件学习遇到的问题
关于open函数文件打开模式的有意思的一个现象 关于Python中中文文本文件使用二进制方式读取后的解码UnicodeDecodeError问题 Python中str类型的字符串写入二进制文件时报Ty ...
- Python Flask后端异步处理(二)
在实际的应用场景中,如用户注册,用户输入了注册信息后,后端保存信息到数据库中,然后跳转至登录界面,这些操作用户需要等待的时间非常短,但是如果是有耗时任务,比如对输入的网址进行漏洞扫描,在后端处理就会花 ...
- 常见的HTML元素及常见检查点
1.<select>标签,可创建单选或多选菜单 检查点:下拉列表数据的正确性.数据被选中是否正确.是否变形.是否只读.多选/单选是否正确 2.<label>标签,相当于一个展示 ...
- 【老孟Flutter】41个酷炫的 Loading 组件库
老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以. Github 地址:https://github.c ...
- .net core 注入的几种方式
一.注册的几种类型: services.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();//单利模式,整个应用程序 ...
- mybatis批量修改数据
xxxMapper.xml: <update id="updateSensorWarnings" parameterType="java.util.List&quo ...
- Panda Global获悉,美国承诺4年内明确区块链数字资产监管方式!
近日,美国商品期货交易委员会(CFTC)宣布,在4年内将会全面把加密货币监管列为优先事项.Panda Global从7月8日公布的新战略中获悉,此次CFTC公布了自己接下来的新框架,并且在框架中承诺: ...