-
Notifications
You must be signed in to change notification settings - Fork 20
Open
Description
概述
API速查表
全局配置
- silent,设置为true,取消 Vue 所有的日志与警告
- optionMergeStrategies,自定义合并策略的选项
- devtools,配置是否允许 vue-devtools 检查代码
- errorHandler,指定组件的渲染和观察期间未捕获错误的处理函数
- warnHandler,为 Vue 的运行时警告赋于一个自定义句柄
- ignoredElements,使 Vue 忽略在 Vue 之外的自定义元素
- keyCodes,给 v-on 自定义键位别名
- performance,设置为 true 以在浏览器开发工具中启用对组件初始化、编译、渲染和打补丁的性能追踪
- productionTip,设置为 false 以阻止 vue 在启动时生成生产提示
全局API
- Vue.extend,使用基础 Vue 构造器,创建一个“子类”
- Vue.nextTick,在下次 DOM 更新循环结束之后执行延迟回调
- Vue.set,设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新
- Vue.delete,删除对象的属性。如果对象是响应式的,确保删除能触发更新视图
- Vue.directive,注册或获取全局指令
- Vue.filter,注册或获取全局过滤器
- Vue.component,注册或获取全局组件
- Vue.use,安装 Vue.js 插件,必须提供 install 方法,如果插件是一个函数,它会被作为 install 方法
- Vue.mixin,全局注册一个混合,影响注册之后所有创建的每个 Vue 实例
- Vue.compile,在 render 函数中编译模板字符串
- Vue.version,提供字符串形式的 Vue 安装版本号
选项
选项/数据
- data,Vue 实例的数据对象
- props,可以是数组或对象,用于接收来自父组件的数据
- propsData,创建实例时传递 props。主要作用是方便测试
- computed,计算属性将被混入到 Vue 实例中
- methods,methods 将被混入到 Vue 实例中
- watch,一个对象,键是需要观察的表达式,值是对应回调函数
选项/DOM
- el,挂载目标
- template,一个字符串模板作为 Vue 实例的标识使用。挂载元素的内容都将被忽略,除非模板的内容有分发插槽
- render,字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力
- renderError,当 render 函数遭遇错误时,提供另外一种渲染输出。只在开发者环境下工作
选项/声明周期钩子
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated,keep-alive 组件激活时调用
- deactivated,keep-alive 组件停用时调用
- beforeDestroy
- destroyed
- errorCaptured,当捕获一个来自子孙组件的错误时被调用
选项/资源
- directives,包含 Vue 实例可用指令的哈希表
- filters,包含 Vue 实例可用过滤器的哈希表
- components,包含 Vue 实例可用组件的哈希表
选项/组合
- parent,指定已创建的实例之父实例,在两者之间建立父子关系
- mixins,接受一个混合对象的数组
- extends,允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend
- provide / inject
选项/其它
- name,允许组件模板递归地调用自身
- delimiters,改变纯文本插入分隔符
- functional,使组件无状态 (没有 data ))和无实例 (没有 this 上下文)
- model,允许一个自定义组件在使用 v-model 时定制 prop 和 event
- inheritAttrs,设置 inheritAttrs 到 false,父作用域的不被认作 props 的特性绑定 (attribute bindings) 将不会“回退”且作为普通的 HTML 特性应用在子组件的根元素上
- comments,当设为 true 时,将会保留且渲染模板中的 HTML 注释
functional组件类似于React里的高阶组件,返回一个新的组件
实例
实例属性
- vm.$data,Vue 实例观察的数据对象
- vm.$props,当前组件接收到的 props 对象
- vm.$el,Vue 实例使用的根 DOM 元素
- vm.$options,用于当前 Vue 实例的初始化选项
- vm.$parent,父实例
- vm.$root,当前组件树的根 Vue 实例
- vm.$children,当前实例的直接子组件
- vm.$slots,用来访问被插槽分发的内容
- vm.$scopedSlots,用来访问作用域插槽
- vm.$refs,一个对象,持有已注册过 ref 的所有子组件
- vm.$isServer,当前 Vue 实例是否运行于服务器
- vm.$attrs,包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)
- vm.$listeners,包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
实例方法/数据
- vm.$watch,观察 Vue 实例变化的一个表达式或计算属性函数,deep:为了发现对象内部值的变化、immediate:立即以表达式的当前值触发回调
- vm.$set,全局 Vue.set 的别名
- vm.$delete,全局 Vue.delete 的别名
实例方法/事件
- vm.$on,监听当前实例上的自定义事件
- vm.$once,监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器
- vm.$off,移除自定义事件监听器
- vm.$emit,触发当前实例上的事件
实例方法 / 生命周期
- vm.$mount,手动地挂载一个未挂载的实例
- vm.$forceUpdate,迫使 Vue 实例重新渲染,仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件
- vm.$nextTick,将回调延迟到下次 DOM 更新循环之后执行
- vm.$destroy,完全销毁一个实例
指令
- v-text,更新元素的 textContent
- v-html,更新元素的 innerHTML
- v-show,根据表达式之真假值,切换元素的 display CSS 属性
- v-if,根据表达式的值的真假条件渲染元素
- v-else,前一兄弟元素必须有 v-if 或 v-else-if
- v-else-if,前一兄弟元素必须有 v-if 或 v-else-if
- v-for,基于源数据多次渲染元素或模板块
- v-on,绑定事件监听器
- v-bind,动态地绑定一个或多个特性,或一个组件 prop 到表达式
- v-model,在表单控件或者组件上创建双向绑定
- v-pre,跳过这个元素和它的子元素的编译过程
- v-cloak,和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
- 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 } 模式添加侦听器
特殊特性
- key,有相同父元素的子元素必须有独特的 key
- ref,给元素或子组件注册引用信息
- slot,用于标记往哪个具名插槽中插入子组件内容
- slot-scope,用于将元素或组件表示为作用域插槽
- is,指定组件
内置组件
- component,渲染一个“元组件”为动态组件
- transition,作为单个元素/组件的过渡效果
- transition-group,作为多个元素/组件的过渡效果
- keep-alive,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
- slot,作为组件模板之中的内容分发插槽
参考
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels