Skip to content

VueJS API #67

@coconilu

Description

@coconilu

概述

API速查表

全局配置

  1. silent,设置为true,取消 Vue 所有的日志与警告
  2. optionMergeStrategies,自定义合并策略的选项
  3. devtools,配置是否允许 vue-devtools 检查代码
  4. errorHandler,指定组件的渲染和观察期间未捕获错误的处理函数
  5. warnHandler,为 Vue 的运行时警告赋于一个自定义句柄
  6. ignoredElements,使 Vue 忽略在 Vue 之外的自定义元素
  7. keyCodes,给 v-on 自定义键位别名
  8. performance,设置为 true 以在浏览器开发工具中启用对组件初始化、编译、渲染和打补丁的性能追踪
  9. productionTip,设置为 false 以阻止 vue 在启动时生成生产提示

全局API

  1. Vue.extend,使用基础 Vue 构造器,创建一个“子类”
  2. Vue.nextTick,在下次 DOM 更新循环结束之后执行延迟回调
  3. Vue.set,设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新
  4. Vue.delete,删除对象的属性。如果对象是响应式的,确保删除能触发更新视图
  5. Vue.directive,注册或获取全局指令
  6. Vue.filter,注册或获取全局过滤器
  7. Vue.component,注册或获取全局组件
  8. Vue.use,安装 Vue.js 插件,必须提供 install 方法,如果插件是一个函数,它会被作为 install 方法
  9. Vue.mixin,全局注册一个混合,影响注册之后所有创建的每个 Vue 实例
  10. Vue.compile,在 render 函数中编译模板字符串
  11. Vue.version,提供字符串形式的 Vue 安装版本号

选项

选项/数据

  1. data,Vue 实例的数据对象
  2. props,可以是数组或对象,用于接收来自父组件的数据
  3. propsData,创建实例时传递 props。主要作用是方便测试
  4. computed,计算属性将被混入到 Vue 实例中
  5. methods,methods 将被混入到 Vue 实例中
  6. watch,一个对象,键是需要观察的表达式,值是对应回调函数

选项/DOM

  1. el,挂载目标
  2. template,一个字符串模板作为 Vue 实例的标识使用。挂载元素的内容都将被忽略,除非模板的内容有分发插槽
  3. render,字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力
  4. renderError,当 render 函数遭遇错误时,提供另外一种渲染输出。只在开发者环境下工作

选项/声明周期钩子

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. activated,keep-alive 组件激活时调用
  8. deactivated,keep-alive 组件停用时调用
  9. beforeDestroy
  10. destroyed
  11. errorCaptured,当捕获一个来自子孙组件的错误时被调用

选项/资源

  1. directives,包含 Vue 实例可用指令的哈希表
  2. filters,包含 Vue 实例可用过滤器的哈希表
  3. components,包含 Vue 实例可用组件的哈希表

选项/组合

  1. parent,指定已创建的实例之父实例,在两者之间建立父子关系
  2. mixins,接受一个混合对象的数组
  3. extends,允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend
  4. provide / inject

选项/其它

  1. name,允许组件模板递归地调用自身
  2. delimiters,改变纯文本插入分隔符
  3. functional,使组件无状态 (没有 data ))和无实例 (没有 this 上下文)
  4. model,允许一个自定义组件在使用 v-model 时定制 prop 和 event
  5. inheritAttrs,设置 inheritAttrs 到 false,父作用域的不被认作 props 的特性绑定 (attribute bindings) 将不会“回退”且作为普通的 HTML 特性应用在子组件的根元素上
  6. comments,当设为 true 时,将会保留且渲染模板中的 HTML 注释

functional组件类似于React里的高阶组件,返回一个新的组件

实例

实例属性

  1. vm.$data,Vue 实例观察的数据对象
  2. vm.$props,当前组件接收到的 props 对象
  3. vm.$el,Vue 实例使用的根 DOM 元素
  4. vm.$options,用于当前 Vue 实例的初始化选项
  5. vm.$parent,父实例
  6. vm.$root,当前组件树的根 Vue 实例
  7. vm.$children,当前实例的直接子组件
  8. vm.$slots,用来访问被插槽分发的内容
  9. vm.$scopedSlots,用来访问作用域插槽
  10. vm.$refs,一个对象,持有已注册过 ref 的所有子组件
  11. vm.$isServer,当前 Vue 实例是否运行于服务器
  12. vm.$attrs,包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)
  13. vm.$listeners,包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

实例方法/数据

  1. vm.$watch,观察 Vue 实例变化的一个表达式或计算属性函数,deep:为了发现对象内部值的变化、immediate:立即以表达式的当前值触发回调
  2. vm.$set,全局 Vue.set 的别名
  3. vm.$delete,全局 Vue.delete 的别名

实例方法/事件

  1. vm.$on,监听当前实例上的自定义事件
  2. vm.$once,监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器
  3. vm.$off,移除自定义事件监听器
  4. vm.$emit,触发当前实例上的事件

实例方法 / 生命周期

  1. vm.$mount,手动地挂载一个未挂载的实例
  2. vm.$forceUpdate,迫使 Vue 实例重新渲染,仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件
  3. vm.$nextTick,将回调延迟到下次 DOM 更新循环之后执行
  4. vm.$destroy,完全销毁一个实例

指令

  1. v-text,更新元素的 textContent
  2. v-html,更新元素的 innerHTML
  3. v-show,根据表达式之真假值,切换元素的 display CSS 属性
  4. v-if,根据表达式的值的真假条件渲染元素
  5. v-else,前一兄弟元素必须有 v-if 或 v-else-if
  6. v-else-if,前一兄弟元素必须有 v-if 或 v-else-if
  7. v-for,基于源数据多次渲染元素或模板块
  8. v-on,绑定事件监听器
  9. v-bind,动态地绑定一个或多个特性,或一个组件 prop 到表达式
  10. v-model,在表单控件或者组件上创建双向绑定
  11. v-pre,跳过这个元素和它的子元素的编译过程
  12. v-cloak,和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
  13. v-once,只渲染元素和组件一次

修饰符:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

特殊特性

  1. key,有相同父元素的子元素必须有独特的 key
  2. ref,给元素或子组件注册引用信息
  3. slot,用于标记往哪个具名插槽中插入子组件内容
  4. slot-scope,用于将元素或组件表示为作用域插槽
  5. is,指定组件

内置组件

  1. component,渲染一个“元组件”为动态组件
  2. transition,作为单个元素/组件的过渡效果
  3. transition-group,作为多个元素/组件的过渡效果
  4. keep-alive,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
  5. slot,作为组件模板之中的内容分发插槽

参考

VueJS官方API
服务端渲染

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions