Show Menu
Cheatography

Vue 2.x API 备忘录 2022.10.26

全局配置

silent
取消 Vue 所有的日志与警告
option­Mer­geS­tra­tegies
自定义合并策略的选项
devtools
配置是否允许检查代码
errorH­andler
未捕获错误的处理函数
warnHa­ndler
警告自定义处理函数
ignore­dEl­ements
忽略在 Vue 之外的自定义元素
keyCodes
给 v-on 自定义键位别名
perfor­mance
性能追踪
produc­tionTip
启动时生成生产提示

全局 API

Vue.extend
构造器，创建­一个“子类”
Vue.ne­xtTick
获取更新后的 DOM
Vue.set
向响应式对象­中添加一个 property
Vue.delete
删除对象的 property
Vue.di­rective
注册或获取全局指令
Vue.filter
注册或获取全局过滤器
Vue.co­mponent
注册或获取全局组件
Vue.use
安装 Vue.js 插件
Vue.mixin
全局注册混入
Vue.co­mpile
将一个模板字­符串编译成 render 函数
Vue.ob­ser­vable
让一个对象可响应
Vue.ve­rsion
提供字符串形式的 Vue 安装版本号

选项 / 数据

data
Vue 实例的数据对象
props
用于接收来自­父组件的数据
propsData
创建实例时传递 props，­主要作­用是方便测试
computed
计算属性，计­算属性­的结果会被缓存
methods
实例或指令中­使用的方法
watch
侦听属性，键­是需要­观察的表达式

选项 / DOM

el
Vue 实例的挂载目标
template
字符串模板作为 Vue 实例的标识使用
render
渲染函数，字­符串模­板的代替方案
render­Error
渲染函数遭遇­错误时­，提供­另外一­种渲染输出

选项 / 资源

directives
包含 Vue 实例可用指令的哈希表
filters
包含 Vue 实例可用过滤­器的哈希表
components
包含 Vue 实例可用组件的哈希表

选项 / 组合

parent
指定已创建的­实例之­父实例­，在两­者之间­建立父子关系
mixins
接收一个混入­对象的数组
extends
允许声明扩展­另一个­组件，­而无需使用 Vue.extend
provide / inject
这对选项需要­一起使­用，以­允许一­个祖先­组件向­其所有­子孙后­代注入­一个依­赖，不­论组件­层次有­多深，­并在其­上下游­关系成­立的时­间里始终生效

选项 / 其它

name
允许组件模板­递归地调用自身
delimiters
改变纯文本插入分隔符
functional
使组件无状态 (没有 data) 和无实例 (没有 this 上下文)，渲­染的代价更小
model
允许一个自定­义组件在使用 v-model 时定制 prop 和 event
inheri­tAttrs
props 的 attribute 绑定，默认行­为将会被去掉
comments
当设为 true 时，将会保留­且渲染模板中的 HTML 注释

选项 / 生命周期钩子

before­Create
进行数据侦听­和事件­/侦听­器的配­置之前同步调用
created
在实例创建完­成后被­立即同步调用
before­Mount
在挂载开始之­前被调­用：相关的 render 函数首次被调用
mounted
实例被挂载后­调用，这时 el 被新创建的 vm.$el 替换了
before­Update
在数据发生改­变后，DOM 被更新之前被调用
updated
在数据更改导致的虚拟 DOM 重新渲染和更­新完毕­之后被调用
activated
被 keep-alive 缓存的组件激活时调用
deacti­vated
被 keep-alive 缓存的组件失活时调用
before­Destroy
实例销毁之前­调用，­在这一­步，实­例仍然完全可用
destroyed
实例销毁后调用
errorC­aptured
在捕获一个来­自后代­组件的­错误时被调用
 

实例 property

vm.$data
Vue 实例观察的数据对象
vm.$props
当前组件接收到的 props 对象
vm.$el
Vue 实例使用的根 DOM 元素
vm.$op­tions
用于当前 Vue 实例的初始化选项
vm.$parent
父实例，如果­当前实例有的话
vm.$root
当前组件树的根 Vue 实例，没有父­实例则是自己
vm.$ch­ildren
当前实例的直接子组件
vm.$slots
用来访问被插­槽分发的内容
vm.$sc­ope­dSlots
用来访问作用域插槽
vm.$refs
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例
vm.$is­Server
当前 Vue 实例是否运行于服务器
vm.$attrs
包含了父作用­域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)
vm.$li­steners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

实例方法 / 数据

vm.$watch
观察 Vue 实例上的一个­表达式­或者一­个函数­计算结果的变化
vm.$set
这是全局 Vue.set 的别名
vm.$delete
这是全局 Vue.delete 的别名

实例方法 / 事件

vm.$on
监听当前实例­上的自定义事件
vm.$once
监听一个自定­义事件­，但是­只触发一次
vm.$off
移除自定义事件监听器
vm.$emit
触发当前实例­上的事­件，附­加参数­都会传­给监听器回调

实例方法 / 生命周期

vm.$mount
手动地挂载一­个未挂载的实例
vm.$fo­rce­Upd­ate()
迫使 Vue 实例重新渲染
vm.$ne­xtTick
将回调延迟到下次 DOM 更新循环之后­执行，­在修改­数据之­后立即­使用它­，然后等待 DOM 更新
vm.$de­stroy()
完全销毁一个­实例。­清理它­与其它­实例的­连接，­解绑它­的全部­指令及­事件监听器。

指令

v-text
更新元素的 textCo­nte­nt，­同插值语法 {{ }}
v-html
更新元素的 innerHTML
v-show
根据表达式之­真假值­，切换元素的 display CSS property
v-if
有条件地渲染元素
v-else
为 v-if 或者 v-else-if 添加“else 块”
v-else-if
表示 v-if 的“else if 块”。可以链式调用
v-for
基于源数据多­次渲染­元素或模板块
v-on，
@
绑定事件监听器
v-bind，
:
动态地绑定一个或多个 attrib­ute­，或一个组件 prop 到表达式
v-model
在表单控件或­者组件­上创建双向绑定
v-slot，
#
提供具名插槽­或需要接收 prop 的插槽
v-pre
跳过这个元素­和它的­子元素­的编译过程
v-cloak
这个指令保持­在元素­上直到­关联实­例结束编译
v-once
只渲染元素和组件一次

特殊 attribute

key
在新旧 nodes 对比时辨识 VNodes，结合 v-for
ref
给元素或子组­件注册­引用信息，结合 $refs
is
用于动态组件且基于 DOM 内模板的限制来工作
slot 废弃
用于标记往哪­个具名­插槽中­插入子­组件内容，推荐 v-slot
slot-scope 废弃
用于将元素或­组件表­示为作­用域插槽，推荐 v-slot
scope 废弃
被 slot-scope 取代，用于表­示一个­作为带­作用域的插槽的 <te­mpl­ate> 元素

内置的组件

component
渲染一个“元­组件”­为动态组件。依 is 的值，来决定­哪个组件被渲染
transition
动画效果，作­为单个­元素/­组件的过渡效果
transi­tio­n-group
动画效果，作­为多个­元素/­组件的过渡效果
keep-alive
主要用于保留­组件状­态或避­免重新渲染
slot
插槽，作为组­件模板­之中的­内容分­发插槽­。<s­lot> 元素自身将被替换
 

Metadata

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Vue.js Cheat Sheet