前端开发|Vue2.x API 学习

目录
Vue 2.x API
全局配置
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip
属性
$data
$props
$el
$options
$parent
$root
$children
$slots
$scopedSlots
$refs
$isServer
$attrs
$listeners
特殊属性
key
ref
is
slot
slot-scope
scope
数据【实例方法】
$watch
$set
$delete
事件
$on
$once
$off
$emit
全局函数
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.filter
Vue.component
Vue.use
Vue.mixin
Vue.compile
Vue.observable
Vue.version
数据【选项】
data
props
propsData
computed
methods
watch
DOM
el
template
render
renderError
指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once
生命周期
$mount
$forceUpdate
$nextTick
生命周期调用方法
beforeCreate
created
beforeMount
Mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
资源
directives
filters
components
组件
Component
transition
transition-group
keep-alive
slot
组合
parent
mixins
extends
provide/inject
其它
name
delimiters
functional
model
inheritAttrs
comments
Vue 2.x APIAPI全称为Application Programming Interface,即应用程序接口。
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改其中的一些属性。
silent
是否 取消 Vue 所有的日志与警告,默认值为false。

optionMergeStrategies
自定义合并策略的选项,默认值为{}。

devtools
是否 允许 vue-devtools 检查代码,开发版本默认值为 true,生产版本默认值为 false。
生产版本设为 true 可以启用检查。

errorHandler
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。
用法:

Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 }


warnHandler
为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下它会被忽略。

ignoredElements
使 Vue 忽略在 Vue 之外的自定义元素 【使用了 Web Components APIs】。

keyCodes
给 v-on 自定义键位别名。

performance
是否 在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。默认为false。只适用于开发模式和支持 performance.mark API 的浏览器上。

productionTip
是否 在 vue 启动时生成生产提示。默认为true。


属性 $data
Vue 实例观察的数据对象【object】。
Vue 实例代理了对其 data 对象 property 的访问。

$props
当前组件接收到的 props 对象【object】。
Vue 实例代理了对其 props 对象 property 的访问。

$el
Vue 实例使用的根 DOM 元素【Element】。

$options
用于当前 Vue 实例的初始化选项【object】。

$parent
父实例,如果当前实例有的话【Vue instance(Vue 实例)】。

$root
当前组件树的根 Vue 实例【Vue instance】。
如果当前实例没有父实例,此实例将会是其自己。

$children
当前实例的直接子组件【Array 】。
注意:
$children 并不保证顺序,也不是响应式的。所以在使用 $children 来进行数据绑定时,可以考虑使用一个数组配合 v-for 来生成子组件。

$slots
用来访问被插槽分发的内容【 [name: string]: ?Array】。每个具名插槽有其相应的 property。
在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。
注意:
插槽不是响应性的。如果需要一个组件可以在被传入的数据发生变化时重渲染,建议使用诸如 props 或 data 等响应性实例选项。

$scopedSlots
用来访问作用域插槽【[name: string]: props => Array | undefined】。对于包括 默认 slot 在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。
vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

注意:从 2.6.0 开始,这个 property 有两个变化:
(1).作用域插槽函数现在保证返回一个 VNode 数组,除非在返回值无效的情况下返回 undefined。
(2).所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。在使用渲染函数时,不论当前插槽是否带有作用域,都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单,也可以轻松迁移到所有插槽都是函数的 Vue 3。

$refs
一个对象【Object】,持有注册过 ref attribute 的所有 DOM 元素和组件实例。

$isServer
当前 Vue 实例 是否 运行于服务器【boolean】。

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

$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器【[key: string]: Function | Array】。
它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。


特殊属性 key
key【number | string | boolean | symbol】主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能地尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key,重复的 key 会造成渲染错误。
最常见的用例是结合 v-for。
key 也可以用于强制替换元素/组件而不是重复使用它。在如下场景时它可能会很有用:
1. 完整地触发组件的生命周期钩子。
2. 触发过渡。

ref
ref【string】被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件。
注意:
因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候不能访问它们 。
$refs 不是响应式的,因此不应该试图用它在模板中做数据绑定。

is
is【string | Object (组件的选项对象)】用于动态组件且基于 DOM 内模板的限制来工作。
示例代码:


slot
废弃。【string】用于标记往哪个具名插槽中插入子组件内容。
推荐改用 2.6.0 新增的 v-slot。

slot-scope
废弃。【function argument expression】用于将元素或组件表示为作用域插槽。
推荐改用v-slot。

scope
移除。用于表示一个作为带作用域的插槽的