在线文档教程
首页 技术教程 开发文档 觅分类 ICON图标
技术教程 开发文档 觅分类 ICON图标

接口 | API

全局配置

Vue.config是一个包含Vue全局配置的对象。在引导应用程序之前，您可以修改下面列出的属性：

调试

  • 类型： Boolean

1.  Print stack traces for all warnings.

2.  Make all anchor nodes visible in the DOM as Comment nodes. This makes it easier to inspect the structure of the rendered result.

调试模式仅在开发版本中可用。

分隔符

  • 类型： Array<String>

unsafeDelimiters

  • 类型： Array<String>

silent

  • 类型： Boolean

async

  • 类型： Boolean

devtools

  • 类型： Boolean

全局 API

Vue.extend( options )

  • 参数：

- `{Object} options`

  • 用法： 创建基础Vue构造函数的“子类”。参数应该是包含组件选项的对象。这里需要注意的特殊情况是el和data选项 - 它们在使用时必须是函数Vue.extend()。<div id =“mount-point”> </ div> //创建可重用构造函数var Profile = Vue.extend（{template：'<p > {{firstName}} {{lastName}}又名{{别名}} </ p>'}）//创建一个配置文件的实例var profile = new Profile（{data：{firstName：'Walter'，lastName：' White'，别名：'Heisenberg'}}）//将它装载到元素配置文件中$ mount（'＃mount-point'）将导致：<p> Walter White又名Heisenberg </ p>

Vue.nextTick( callback )

  • 参数：

- `{Function} callback`

  • 用法： 推迟在下一个DOM更新周期后执行的回调。在您更改某些数据以等待DOM更新后立即使用它。//修改数据vm.msg ='Hello'// DOM未更新Vue.nextTick（function（）{// DOM updated}）

Vue.set( object, key, value )

  • 参数：

- `{Object} object`
- `{String} key`
- `{*} value`

  • 返回：设定值。

Vue.delete( object, key )

  • 参数：

- `{Object} object`
- `{String} key`

  • 用法： 删除对象的属性。如果对象处于被动状态，请确保删除触发器查看更新。这主要用于解决Vue无法检测属性删除的限制，但您应该很少需要使用它。

Vue.directive（id，definition）

  • 参数：

- `{String} id`
- `{Function | Object} [definition]`

  • 用法： 注册或检索全局指令。

Vue.elementDirective( id, definition )

  • 参数：

- `{String} id`
- `{Object} [definition]`

  • 用法： 注册或检索全局元素指令。

Vue.filter( id, definition )

  • 参数：

- `{String} id`
- `{Function | Object} [definition]`

  • 用法： 注册或检索全局过滤器。

Vue.component( id, definition )

  • 参数：

- `{String} id`
- `{Function | Object} [definition]`

  • 用法： 注册或检索全局组件。

Vue.transition( id, hooks )

  • 参数：

- `{String} id`
- `{Object} [hooks]`

  • 用法： 注册或检索全局转换挂钩对象。

Vue.partial( id, partial )

  • 参数：

- `{String} id`
- `{String} [partial]`

  • 用法： 注册或检索全局模板部分字符串。

Vue.use( plugin, options )

  • 参数：

- `{Object | Function} plugin`
- `{Object} [options]`

  • 用法： 安装一个Vue.js插件。如果插件是一个对象，它必须公开一个install方法。如果它本身是一个函数，它将被视为安装方法。安装方法将以Vue作为参数来调用。

Vue.mixin( mixin )

  • 参数：

- `{Object} mixin`

  • 用法： 全局应用mixin，这会影响后面创建的每个Vue实例。这可以被插件作者用来将自定义行为注入组件。不在应用程序代码中推荐。

Options / Data

data

  • 类型： Object | Function

props

  • 类型： Array | Object

propsData

1.0.22+

  • 类型： Object

computed

  • 类型： Object

- [Computed Properties](../guide/computed)
- [Reactivity in Depth: Inside Computed Properties](../guide/reactivity#Inside-Computed-Properties)

方法

  • 类型： Object

watch

  • 类型： Object

Options / DOM

el

  • 类型： String | HTMLElement | Function

template

  • 类型： String

- [Lifecycle Diagram](../guide/instance#Lifecycle-Diagram)
- [Content Distribution](../guide/components#Content-Distribution-with-Slots)
- [Fragment Instance](../guide/components#Fragment-Instance)

替代

  • 类型： Boolean

Options / Lifecycle Hooks

init

  • 类型： Function

创建

  • 类型： Function

beforeCompile

  • 类型： Function

编译

  • 类型： Function

ready

  • 类型： Function

附

  • 类型： Function

detached

  • 类型： Function

beforeDestroy

  • 类型： Function

destroyed

  • 类型： Function

Options / Assets

指令

  • 类型： Object

- [Custom Directives](../guide/custom-directive)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

elementDirectives

  • 类型： Object

- [Element Directives](../guide/custom-directive#Element-Directives)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

过滤器

  • 类型： Object

- [Custom Filters](../guide/custom-filter)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

组件

  • 类型： Object

- [Components](../guide/components)

过渡

  • 类型： Object

- [Transitions](../guide/transitions)

partials

  • 类型： Object

- [Special Elements - partial](about:blank#partial)

Options / Misc

父类

  • 类型： Vue instance

events

  • 类型： Object

- [Instance Methods - Events](about:blank#Instance-Methods-Events)
- [Parent-Child Communication](../guide/components#Parent-Child-Communication)

mixins

  • 类型： Array

命名

  • 类型： String

扩展

1.0.22+

  • 类型： Object | Function

实例属性

vm.$data

  • 类型： Object

vm.$el

  • 类型： HTMLElement

vm.$options

  • 类型： Object

vm.$parent

  • 类型： Vue instance

vm.$root

  • 类型： Vue instance

vm.$children

  • 类型： Array<Vue instance>

vm.$refs

  • 类型： Object

- [Child Component Refs](../guide/components#Child-Component-Refs)
-  [v-ref](about:blank#v-ref).

vm.$els

  • 类型： Object

Instance Methods / Data

vm.$watch( expOrFn, callback, options )

  • 参数：

- `{String | Function} expOrFn`
- `{Function} callback`
-  `{Object} [options]`
    - `{Boolean} deep`
    - `{Boolean} immediate`

  • 返回： {Function} unwatch

注意：在对对象或数组进行变异（而不是替换）时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留pre-mutate值的副本。

  • 例如： // keypath vm。$ watch（'abc'，function（newVal，oldVal）{// do something}）// expression vm。$ watch（'a + b'，function（newVal，oldVal）{// （）函数vm。$ watch（function（）{return this.a + this.b}，function（newVal，oldVal）{// do something}） vm.$watch返回一个unwatch函数，停止触发回调函数：var unwatch = vm。$ watch（'a'，cb）//稍后，拆散观察者unwatch（）

vm.$get( expression )

  • 参数：

- `{String} expression`

  • 用法： 从给定表达式的Vue实例中检索一个值。抛出错误的表达式将被抑制并返回undefined。

vm.$set( keypath, value )

  • 参数：

- `{String} keypath`
- `{*} value`

  • 用法： 在给定有效的keypath的Vue实例上设置一个数据值。在大多数情况下，您应该更喜欢使用简单对象语法设置属性，例如vm.a.b = 123。该方法仅在两种情况下需要：

1.  When you have a keypath string and want to dynamically set the value using that keypath.

2.  When you want to set a property that doesn’t exist.

如果路径不存在，它将被递归创建并被动。如果由于$set调用而创建新的根级别反应属性，则Vue实例将被强制进入“摘要循环”，在此期间所有观察者都将被重新评估。

  • 例如： var vm = new Vue（{data：{a：{b：1}}}）//设置现有路径vm。$ set（'a.b'，2）vm.ab // - > 2 / /设置一个不存在的路径，将强制digest vm。$ set（'c'，3）vm.c // - >

vm.$delete( key )

  • 参数：

- `{String} key`

  • 用法： 删除Vue实例（及其$data）的根级别属性。强制消化循环。不建议。

vm.$eval( expression )

  • 参数：

- `{String} expression`

  • 用法： 评估当前实例上的有效绑定表达式。该表达式还可以包含过滤器。

vm.$interpolate( templateString )

  • 参数：

- `{String} templateString`

  • 用法： 评估一段包含胡须插值的模板字符串。请注意，此方法仅执行字符串插值; 属性指令被忽略。

vm.$log( keypath )

  • 参数：

- `{String} [keypath]`

  • 用法： 将当前实例数据记录为一个普通对象，该对象比一组getter / setter更易于检查。也接受一个可选的密钥。vm。$ log（）//记录整个ViewModel数据vm。$ log（'item'）// logs vm.item

Instance Methods / Events

vm.$on( event, callback )

  • 参数：

- `{String} event`
- `{Function} callback`

  • 用法： 监听当前虚拟机上的自定义事件。事件可以由被触发vm.$emit，vm.$dispatch或vm.$broadcast。该回调将接收传入这些事件触发方法的所有附加参数。

vm.$once( event, callback )

  • 参数：

- `{String} event`
- `{Function} callback`

  • 用法： 听取自定义事件，但只能听一次。侦听器第一次触发后会被删除。

vm.$off( event, callback )

  • 参数：

- `{String} [event]`
- `{Function} [callback]`

  • 用法： 删除事件侦听器。

-  If no arguments are provided, remove all event listeners;

-  If only the event is provided, remove all listeners for that event;

-  If both event and callback are given, remove the listener for that specific callback only.

vm.$emit( event, …args )

  • 参数：

- `{String} event`
- `[...args]`

触发当前实例上的事件。任何其他参数都将传递到侦听器的回调函数中。

vm.$dispatch( event, …args )

  • 参数：

- `{String} event`
- `[...args]`

  • 用法： 派发一个事件，首先在实例本身触发它，然后沿着父链向上传播。传播在触发父事件侦听器时停止，除非该侦听器返回true。任何其他参数都将传递给侦听器的回调函数。

vm.$broadcast( event, …args )

  • 参数：

- `{String} event`
- `[...args]`

  • 用法： 广播一个向下传播到当前实例的所有后代的事件。由于后代扩展为多个子树，事件传播将遵循许多不同的“路径”。除非回调函数返回，否则沿路径发出侦听器回调时，每条路径的传播都将停止true。

Instance Methods / DOM

vm.$appendTo( elementOrSelector, callback )

  • 参数：

- `{Element | String} elementOrSelector`
- `{Function} [callback]`

  • 返回： vm - 实例本身

vm.$before( elementOrSelector, callback )

  • 参数：

- `{Element | String} elementOrSelector`
- `{Function} [callback]`

  • 返回： vm - 实例本身

vm.$after( elementOrSelector, callback )

  • 参数：

- `{Element | String} elementOrSelector`
- `{Function} [callback]`

  • 返回： vm - 实例本身

vm.$remove( callback )

  • 参数：

- `{Function} [callback]`

  • 返回： vm - 实例本身

vm.$nextTick( callback )

  • 参数：

- `{Function} [callback]`

  • 用法： 推迟在下一个DOM更新周期后执行的回调。在您更改某些数据以等待DOM更新后立即使用它。这与全局相同Vue.nextTick，只是回调的this上下文自动绑定到调用此方法的实例。

- [Vue.nextTick](about:blank#Vue-nextTick)
- [Async Update Queue](../guide/reactivity#Async-Update-Queue)

实例方法/生命周期

vm.$mount( elementOrSelector )

  • 参数：

- `{Element | String} [elementOrSelector]`

  • 返回： vm - 实例本身

vm.$destroy( remove )

  • 参数：

- `{Boolean} [remove] - default: false`

  • 用法： 彻底摧毁虚拟机。清理与其他现有vms的连接，解除其所有指令的绑定，关闭所有事件侦听器，并且如果remove参数为true，则从DOM中删除其关联的DOM元素或片段。触发beforeDestroy和destroyed钩。

Directives

v-text

  • 预计： String

v-html

  • 预计： String

v-if

  • 预计： *

v-show

  • 预计： *

v-else

  • 不期望表达

v-for

  • 预计： Array | Object | Number | String

- [`track-by`](../guide/list#track-by)
- [`stagger`](../guide/transitions#Staggering-Transitions)
- [`enter-stagger`](../guide/transitions#Staggering-Transitions)
- [`leave-stagger`](../guide/transitions#Staggering-Transitions)

  • 用法： 根据源数据多次渲染元素或模板块。该指令的值必须使用特殊语法alias (in|of) expression为当前正在迭代的元素提供别名：<div v-for =“item in items”> {{item.text}} </ div>注意使用`of`作为分隔符只支持1.0.17+。或者，您还可以为索引指定别名（或用于对象的键）：项目中的<div v-for =“（index，item）> </ div> <div v-for =”（ key），val）in object“> </ div>`v-for`的详细用法在下面链接的指南部分进行了说明。

v-on

  • 速记： @

-  `.stop` - call `event.stopPropagation()`.
-  `.prevent` - call `event.preventDefault()`.
-  `.capture` - add event listener in capture mode.
-  `.self` - only trigger handler if event was dispatched from this element.
-  `.{keyCode | keyAlias}` - only trigger handler on certain keys.

  • 用法： 将一个事件监听器附加到该元素。事件类型由参数表示。该表达式既可以是方法名称也可以是内联语句，或者在存在修饰符时简单地省略。在普通元素上使用时，它只侦听本地DOM事件。在自定义元素组件上使用时，它还会侦听在该子组件上发出的自定义事件。在监听本地DOM事件时，该方法接收本地事件作为唯一参数。如果使用内联语句，则语句可以访问特殊$event属性：v-on:click="handle('ok', $event)"。 1.0.11+在收听自定义事件时，内联语句可以访问特殊事件$arguments属性，它是传递给子组件$emit调用的附加参数的数组。

v-bind

  • 速记： :

-  `.sync` - make the binding two-way. Only respected for prop bindings.
-  `.once` - make the binding one-time. Only respected for prop bindings.
-  `.camel` - convert the attribute name to camelCase when setting it. Only respected for normal attributes. Used for binding camelCase SVG attributes.

  • 用法： 将一个或多个属性或组件prop动态绑定到表达式。用于绑定classor style属性时，它支持其他值类型，如Array或Objects。有关更多详细信息，请参阅下面的链接指南部 当用于道具绑定时，道具必须在子组件中正确声明。支柱绑定可以使用其中一个修饰符指定不同的绑定类型。在没有参数的情况下使用时，可用于绑定包含属性名称 - 值对的对象。注意：在此模式下class和style不支持数组或对象。

- [Class and Style Bindings](../guide/class-and-style)
- [Component Props](../guide/components#Props)

v-model

  • 预计：根据输入类型而变化

- `<input>`
- `<select>`
- `<textarea>`

  • 参数属性：

- [`lazy`](../guide/forms#lazy)
- [`number`](../guide/forms#number)
- [`debounce`](../guide/forms#debounce)

  • 用法： 在表单输入元素上创建双向绑定。有关详细用法，请参阅下面链接的指南部分。

v-ref

  • 不期望表达

v-el

  • 不期望表达

v-pre

  • 不期望表达

v-cloak

  • 不期望表达

特殊元素

组件

  • 属性：

- `is`

  • 参数属性：

- [`keep-alive`](../guide/components#keep-alive)
- [`transition-mode`](../guide/components#transition-mode)

  • 用法： 调用组件的替代语法。主要用于具有以下is属性的动态组件：<！ - 动态组件由 - > <！ - vm上的`componentId`属性 - > <component：is =“componentId”> </ component>

slot

  • 属性：

- `name`

  • 用法： <slot>元素用作组件模板中的内容分发网点。插槽元素本身将被替换。具有该name属性的插槽称为命名插槽。指定的插槽将分发具有slot与其名称匹配的属性的内容。有关详细用法，请参阅下面链接的指南部分。

局部

  • 属性：

- `name`

  • 用法： <partial>元素作为注册模板部分的出口。部分内容在插入时也由Vue编译。该<partial>元素本身将被替换。它需要一个name将用于解析部分内容的属性。

过滤器

capitalize

  • 例如： {{msg | 大写}} 'abc'=>'Abc'

大写

  • 例如： {{msg | 大写}} 'abc'=>'ABC'

小写

  • 例如： {{msg | 小写}} 'ABC'=>'abc'

currency

  • 参数：

- `{String} [symbol] - default: '$'`
-  **1.0.22+** `{Number} [decimal places] - default: 2`

  • 例如： {{amount | currency}} 12345 => $ 12,345.00 使用不同的符号：{{amount | currency'£'}} 12345 =>£12,345.00 部分货币有3位或4位小数位，而其他货币则没有，例如日元（¥）或越南盾（₫）：{{amount | currency'₫'0}} 12345 =>₫12,345

pluralize

  • 参数：

- `{String} single, [double, triple, ...]`

  • 用法： 根据过滤的值多重化参数。当只有一个参数时，复数形式最后只加一个“s”。当有多个参数时，参数将被用作对应于要被复数化的单个单，双，三...形式的字符串数组。当要复数的数字超过参数的长度时，它将使用数组中的最后一个条目。

json

  • 参数：

- `{Number} [indent] - default: 2`

  • 用法： 输出调用结果JSON.stringify()而不是输出toString()值（例如[object Object]）。

debounce

  • 限于：期望值的指令Function，例如v-on

- `{Number} [wait] - default: 300`

  • 用法： 包装处理程序以x毫秒为单位去除它，x参数在哪里。默认的等待时间是300ms。一个去抖动的处理程序将被延迟，直到x通话结束后经过至少ms。如果在延迟时间之前再次调用处理程序，则延迟时间将重置为xms。

limitBy

  • 限于：期望值的指令Array，例如v-for

- `{Number} limit`
- `{Number} [offset]`

  • 用法： 按照参数的指定将数组限制为前N个项目。<！ - 只显示前10项 - > <div v-for =“ items| limitBy 10 items> 5至15 - > <div v-for =“item in items | limitBy 10 5”> </ div>

filterBy

  • 限于：期望值的指令Array，例如v-for

- `{String | Function} targetStringOrFunction`
- `"in" (optional delimiter)`
- `{String} [...searchKeys]`

  • 用法： 返回源数组的过滤版本。第一个参数可以是一个字符串或一个函数。当第一个参数是一个字符串时，它将被用作在数组的每个元素中搜索的目标字符串：items | filterBy'hello'“>在上面的例子中，只有项目将会显示包含目标字符串`“hello”`的信息。如果项目是一个对象，过滤器将递归搜索目标字符串的对象的每个嵌套属性。要缩小搜索范围，可以指定其他搜索关键字：<div v-for =“user in user | filterBy'Jack'in'name'”>在上例中，过滤器将只搜索`“Jack” `在每个用户对象的`name`字段中。**总是限制搜索范围以获得更好的性能是一个好主意**上面的例子使用静态参数 - 当然，我们可以使用动态参数作为目标字符串或搜索关键字。结合`v-model`，我们可以轻松实现输入提前过滤：<div id =“filter-by-example”> <input v-model =“name”> <ul> <li v-for =“user in用户名| filterBy name in'name'“> {{user.name}} </ li> </ ul> </ div> new Vue（{el：'＃filter-by-example'，data：{name：' '，users：[{name：'Bruce'}，{name：'Chuck'}，{name：'Jackie'}]}}）

orderBy

  • 限于：期望值的指令Array，例如v-for

- `{String | Array<String> | Function} ...sortKeys`
- `{String} [order] - default: 1`

  • 用法： 返回源数组的排序版本。您可以传递任意数量的字符串来对键进行排序。如果您想使用自己的排序策略，也可以传递包含排序键或函数的数组。可选order参数指定结果是以升序（order >= 0）还是降序（order < 0）顺序排列。对于原始值数组，只需省略sortKeys并提供顺序，例如orderBy 1。

数组扩展方法

Vue.js扩展Array.prototype了两个额外的方法，使得更容易执行一些常见的数组操作，同时确保被动更新被正确触发。

array.$set(index, value)

  • 参数

- `{Number} index`
- `{*} value`

  • 用法 通过索引将数组中的元素设置为值，并触发视图更新。vm.animals。$ set（0，{name：'Aardvark'}）

array.$remove(reference)

  • 参数

- `{Reference} reference`

  • 用法 通过引用从数组中删除元素并触发视图更新。这是一个用于首先搜索数组中的元素的糖方法，然后如果找到，调用array.splice(index, 1)。var aardvark = vm.animals0 vm.animals。$ remove（aardvark）

  • 黔ICP备2021005045号