非常教程

Vue 2参考手册

接口 | API

接口 | API

全局配置

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

调试

  • 类型: Boolean
  • 默认: false
  • 用法: Vue.config.debug = true在调试模式下,Vue将:
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>
  • 默认: ["{{", "}}"]
  • 用法: // ES6 template string style Vue.config.delimiters ='$ {','}'更改纯文本插值分隔符。

unsafeDelimiters

  • 类型: Array<String>
  • 默认: ["{{{", "}}}"]
  • 用法: //让它看起来更危险Vue.config.unsafeDelimiters ='{!!','!!}'更改原始HTML插值分隔符。

silent

  • 类型: Boolean
  • 默认: false
  • 用法: Vue.config.silent = true禁止所有Vue.js日志和警告。

async

  • 类型: Boolean
  • 默认: true
  • 用法: Vue.config.async = false当异步模式关闭时,Vue将在检测到数据更改时同步执行所有DOM更新。这可能有助于在某些情况下进行调试,但也可能导致性能下降并影响调用观察程序回调的顺序。不建议在生产中使用。async: false

devtools

  • 类型: Boolean
  • 默认值: truefalse生产版本)
  • 用法: //确保在加载Vue Vue.config.devtools = true后立即同步设置此配置是否允许vue-devtools检查。此选项的默认值true位于开发版本和false生产版本中。您可以将其设置true为启用生产构建的检查。

全局 API

Vue.extend( options )

  • 参数:
- `{Object} options`
  • 用法: 创建基础Vue构造函数的“子类”。参数应该是包含组件选项的对象。这里需要注意的特殊情况是eldata选项 - 它们在使用时必须是函数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无法检测属性添加的限制。
  • 另见:深度的反应性

Vue.delete( object, key )

  • 参数:
- `{Object} object`
- `{String} key`
  • 用法: 删除对象的属性。如果对象处于被动状态,请确保删除触发器查看更新。这主要用于解决Vue无法检测属性删除的限制,但您应该很少需要使用它。
  • 另见:深度的反应性

Vue.directive(id,definition)

  • 参数:
- `{String} id`
- `{Function | Object} [definition]`
  • 用法: 注册或检索全局指令。// register Vue.directive('my-directive',{bind:function(){},update:function(){},unbind:function(){}})// register(简单函数指令)Vue.directive ('my-directive',function(){//这将被调用为update})// getter,如果注册返回指令定义var myDirective = Vue.directive('my-directive')
  • 另请参阅:自定义指令

Vue.elementDirective( id, definition )

  • 参数:
- `{String} id`
- `{Object} [definition]`
  • 用法: 注册或检索全局元素指令。//注册Vue.elementDirective('my-element',{bind:function(){},//元素指令不使用update unbind:function(){}})// getter,返回指令定义(如果已注册)var myDirective = Vue.elementDirective('my-element')
  • 另见:元素指令

Vue.filter( id, definition )

  • 参数:
- `{String} id`
- `{Function | Object} [definition]`
  • 用法: 注册或检索全局过滤器。// register Vue.filter('my-filter',function(value){// return processed value})//双向过滤器Vue.filter('my-filter',{read:function(){},write :function(){}})// getter,如果注册返回过滤器var myFilter = Vue.filter('my-filter')
  • 另请参阅:自定义过滤器

Vue.component( id, definition )

  • 参数:
- `{String} id`
- `{Function | Object} [definition]`
  • 用法: 注册或检索全局组件。//注册一个扩展构造函数Vue.component('my-component',Vue.extend({/ * ... * /}))//注册一个选项对象(自动调用Vue.extend)Vue.component('my -component',{/ * ... * /})//获取一个已注册的组件(总是返回构造函数)var MyComponent = Vue.component('my-component')
  • 另请参阅:组件。

Vue.transition( id, hooks )

  • 参数:
- `{String} id`
- `{Object} [hooks]`
  • 用法: 注册或检索全局转换挂钩对象。//注册Vue.transition('fade',{enter:function(){},leave:function(){}})//检索已注册的钩子var fadeTransition = Vue.transition('fade')
  • 另请参阅:转场。

Vue.partial( id, partial )

  • 参数:
- `{String} id`
- `{String} [partial]`
  • 用法: 注册或检索全局模板部分字符串。//注册Vue.partial('my-partial','<div> Hi </ div>')//检索已注册的部分var myPartial = Vue.partial('my-partial')
  • 另见:特殊元素 - <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
  • 限制:Function在组件定义中使用时才被接受。
  • 详细信息: Vue实例的数据对象。Vue.js将递归地将它的属性转换为getter / setters以使其成为“被动”。该对象必须是普通的:本地对象,现有的getter / setter和原型属性将被忽略。不建议观察复杂的物体。一旦创建实例,原始数据对象可以被访问为vm.$data。Vue实例还代理了在数据对象上找到的所有属性。与启动属性_$被在Vue公司的实例代理,因为它们可能与Vue公司的内部属性和API方法相冲突。你将不得不作为访问它们vm.$data._property。定义组件时data必须声明为返回初始数据对象的函数,因为将会有许多使用相同定义创建的实例。如果我们仍然使用普通对象data,那么将通过创建的所有实例的引用共享同一对象!通过提供一个data函数,每次创建新实例时,我们都可以简单地调用它来返回初始数据的全新副本。如果需要,可以通过vm.$data穿透获得原始对象的深层克隆JSON.parse(JSON.stringify(...))
  • 示例: var data = {a:1} //直接创建实例var vm = new Vue({data:data})vm.a // - > 1 vm。$ data === data // - > true //必须在Vue.extend()中使用函数var Component = Vue.extend({data:function(){return {a:1}}})
  • 另见:深度的反应性。

props

  • 类型: Array | Object
  • 详细信息: 用于接受来自父组件的数据的属性的列表/散列。它具有简单的基于数组的语法和基于对象的可选语法,允许进行高级配置,例如类型检查,自定义验证和默认值。
  • 例子: //简单的语法Vue.component('props-demo-simple',{props:'size','myMessage'})//带有验证的对象语法Vue.component('props-demo-advanced',{props :{//只是输入check size:Number,//输入check和其他验证名称:{type:String,required:true,//警告如果没有双向绑定twoWay:true}}})
  • 另请参阅:Props

propsData

1.0.22+

  • 类型: Object
  • 限制:仅在通过实例创建时受到尊重new
  • 详细信息: 在创建过程中将道具传递给实例。这主要是为了使单元测试更容易。
  • 示例: var Comp = Vue.extend({props:'msg',template:'<div> {{msg}} </ div>'})var vm = new Comp({propsData:{msg:'hello'} })

computed

  • 类型: Object
  • 详细信息:将 计算属性混合到Vue实例中。所有getter和setter都将自己的this上下文自动绑定到Vue实例。
  • 例如: var vm = new Vue({data:{a:1},calculated:{//只获取,只需要一个函数aDouble:function(){return this.a * 2},//获取并设置aPlus :{get:function(){return this.a + 1},set:function(v){this.a = v - 1}}}})vm.aPlus // - > 2 vm.aPlus = 3 vm。 a // - > 2 vm.aDouble // - > 4
  • 也可以看看:
- [Computed Properties](../guide/computed)
- [Reactivity in Depth: Inside Computed Properties](../guide/reactivity#Inside-Computed-Properties)

方法

  • 类型: Object
  • 详细信息: 混合到Vue实例中的方法。您可以直接在VM实例上访问这些方法,或者在指令表达式中使用它们。所有方法都会将其this上下文自动绑定到Vue实例。
  • 示例: var vm = new Vue({data:{a:1},methods:{plus:function(){this.a ++}}})vm.plus()vm.a // 2
  • 另请参阅:方法和事件处理

watch

  • 类型: Object
  • 详细信息: 一个对象,其中键是表达式,值是相应的回调。该值也可以是方法名称的字符串,也可以是包含其他选项的对象。Vue实例将$watch()在实例化时调用对象中的每个条目。
  • 示例: var vm = new Vue({data:{a:1},watch:{'a':function(val,oldVal){console.log('new:%s,old:%s',val,oldVal )},// string method name'b':'someMethod',// deep watcher'c':{handler:function(val,oldVal){/ * ... * /},deep:true}}}) vm.a = 2 // - > new:2,old:1
  • 另请参阅:实例方法 - vm。$ watch

Options / DOM

el

  • 类型: String | HTMLElement | Function
  • 限制:Function在组件定义中使用时才接受类型。
  • 详细信息: 为Vue实例提供一个现有的DOM元素进行安装。它可以是CSS选择器字符串,实际的HTMLElement或返回HTMLElement的函数。请注意,提供的元素仅用作安装点; 如果还提供了模板,它将被替换,除非replace设置为false。已解析的元素将可以被访问为vm.$el。在使用时Vue.extend,必须提供一个函数,以便每个实例获取单独创建的元素。如果此选项在实例化时可用,实例将立即输入编译; 否则,用户将不得不显式调用vm.$mount()手动启动编译。
  • 另见:生命周期图

template

  • 类型: String
  • 详细信息: 用作Vue实例标记的字符串模板。默认情况下,该模板将替换已安装的元素。当replace选项设置为false,该模板将被插入到安装的元件来代替。在这两种情况下,挂起元素内的任何现有标记都将被忽略,除非模板中存在内容分发槽。如果字符串以#它作为开始,它将用作querySelector,并使用选定元素的innerHTML作为模板字符串。这允许使用通用的<script type="x-template">欺骗包括模板。请注意,在某些情况下,例如,当模板包含多个顶级元素或仅包含纯文本时,该实例将成为片段实例 - 即管理节点列表而不是单个节点的实例。片段实例的装入点上的非流量控制指令将被忽略。
  • 也可以看看:
- [Lifecycle Diagram](../guide/instance#Lifecycle-Diagram)
- [Content Distribution](../guide/components#Content-Distribution-with-Slots)
- [Fragment Instance](../guide/components#Fragment-Instance)

替代

  • 类型: Boolean
  • 默认: true
  • 限制:只有在模板选项也存在的情况下才能使用。
  • 详细信息: 确定是否用模板替换正在安装的元素。如果设置为false,模板将覆盖元素的内部内容而不替换元素本身。如果设置为true,模板将覆盖该元素并将该元素的属性与该组件的根节点的属性合并。
  • 例如:<div id =“replace”class =“foo”> </ div> new Vue({el:'#replace',template:'<p class =“bar”> replaced </ p>'})结果是:<p class =“foo bar”id =“replace”> replacement </ p>相比之下,当`replace`设置为false时:<div id =“insert”class =“foo”> < / div> new Vue({el:'#insert',replace:false,template:'<p class =“bar”> inserted </ p>'})会导致:<div id =“insert”class = “foo”> <p class =“bar”>插入</ p> </ div>

Options / Lifecycle Hooks

init

  • 类型: Function
  • 详细信息: 在实例刚刚初始化后,在数据观察和事件/观察器设置之前同步调用。
  • 另见:生命周期图

创建

  • 类型: Function
  • 详细信息: 在实例创建后同步调用。在这个阶段,实例已经完成了处理选项,这意味着已经设置了以下内容:数据观察,计算属性,方法,监视/事件回调。但是,DOM编译尚未启动,该$el属性将不可用。
  • 另见:生命周期图

beforeCompile

  • 类型: Function
  • 详细信息: 在编译开始之前调用。
  • 另见:生命周期图

编译

  • 类型: Function
  • 详细信息: 编译完成后调用。在这个阶段,所有的指令都已经被链接,所以数据的改变会触发DOM更新。但是,$el不能保证已经插入到文档中。
  • 另见:生命周期图

ready

  • 类型: Function
  • 详细说明: 编译后调用,并$el插入到首次的文件,即第一后立即attached挂机。注意,这个插入必须通过Vue执行(使用方法vm.$appendTo()或者作为指令更新的结果)来触发ready钩子。
  • 另见:生命周期图

  • 类型: Function
  • 详细信息:vm.$el通过指令或VM等实例方法 调用何时附加到DOM $appendTo()。的直接操作vm.$el不会触发这个钩子。

detached

  • 类型: Function
  • 详细信息:vm.$el通过指令或VM实例方法 调用何时从DOM中删除。的直接操作vm.$el不会触发这个hook。

beforeDestroy

  • 类型: Function
  • 详细信息: 在Vue实例被销毁之前调用。在这个阶段,实例仍然功能齐全。
  • 另见:生命周期图

destroyed

  • 类型: Function
  • 详细信息: 在Vue实例被销毁后调用。当这个钩子被调用时,Vue实例的所有绑定和指令都已被解除绑定,并且所有子Vue实例也被销毁。请注意,如果有离开转换,则在转换完成destroyed调用挂接。
  • 另见:生命周期图

Options / Assets

指令

  • 类型: Object
  • 详细信息: Vue实例可用的指令散列。
  • 也可以参看:
- [Custom Directives](../guide/custom-directive)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

elementDirectives

  • 类型: Object
  • 详细信息: 要使Vue实例可用的元素指令的哈希值。
  • 也可以参看:
- [Element Directives](../guide/custom-directive#Element-Directives)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

过滤器

  • 类型: Object
  • 详细信息: Vue实例可用的过滤器哈希。
  • 也可参看:
- [Custom Filters](../guide/custom-filter)
- [Assets Naming Convention](../guide/components#Assets-Naming-Convention)

组件

  • 类型: Object
  • 详细信息: 要提供给Vue实例的组件散列。
  • 也可参看:
- [Components](../guide/components)

过渡

  • 类型: Object
  • Details: 对Vue实例可用的转换的散列。
  • 也可参看:
- [Transitions](../guide/transitions)

partials

  • 类型: Object
  • 详细信息: Vue实例可用的部分字符串散列。
  • 也可参看:
- [Special Elements - partial](about:blank#partial)

Options / Misc

父类

  • 类型: Vue instance
  • 详细信息: 指定要创建的实例的父实例。建立两者之间的亲子关系。this.$parent对于孩子来说,父母可以被访问,并且孩子将被推入父母的$children数组中。
  • 另见:父子节点关系

events

  • 类型: Object
  • 详细信息: 键是要监听的事件的对象,值是相应的回调。注意这些是Vue事件而不是DOM事件。该值也可以是方法名称的字符串。Vue实例将$on()在实例化时调用对象中的每个条目。
  • 示例: var vm = new Vue({events:{'hook:created':function(){console.log('created!')},greeting:function(msg){console.log(msg)},//也可以使用字符串方法bye:'sayGoodbye'},方法:{sayGoodbye:function(){console.log('goodbye!')}}})// - > created!vm。$ emit('greeting','hi!')// - >嗨!vm。$ emit('bye')// - >再见!
  • 也可参看:
- [Instance Methods - Events](about:blank#Instance-Methods-Events)
- [Parent-Child Communication](../guide/components#Parent-Child-Communication)

mixins

  • 类型: Array
  • 详细信息:mixins选项接受一组mixin对象。这些mixin对象可以像普通实例对象一样包含实例选项,并且它们将与使用相同选项合并逻辑的最终选项合并Vue.extend()。例如,如果你的mixin包含一个创建的钩子,并且组件本身也有一个,那么这两个函数都会被调用。Mixin钩子按照它们提供的顺序调用,并在组件自己的钩子之前调用。
  • 例如: var mixin = {created:function(){console.log(1)}} var vm = new Vue({created:function(){console.log(2)},mixins:mixin})// - > 1 // - > 2
  • 另见: Mixins

命名

  • 类型: String
  • 限制:只有在使用时才受到尊重Vue.extend()
  • 详细信息: 允许组件在其模板中递归调用其自身。请注意,当组件全局注册时Vue.component(),全局ID会自动设置为其名称。指定name选项的另一个好处是控制台检查。在控制台中检查扩展的Vue组件时,默认的构造函数名称是VueComponent,这是不是很丰富。通过传递可选name选项Vue.extend(),您将获得更好的检查输出,以便您知道您正在查看哪个组件。该字符串将被骆驼化并用作组件的构造函数名称。
  • 例子: var Ctor = Vue.extend({name:'stack-overflow',template:'<div>'// // recursively invoke self'<stack-overflow> </ stack-overflow>'+'</ div> '})//这实际上会导致超过最大堆栈大小//错误,但让我们假设它可以工作... var vm = new Ctor()console.log(vm)// - > StackOverflow {$ el:null ,...}

扩展

1.0.22+

  • 类型: Object | Function
  • 细节: 允许声明性地扩展另一个组件(可以是简单的选项对象或构造函数)而无需使用Vue.extend。这主要是为了更容易在单个文件组件之间进行扩展。这与之类似mixins,不同之处在于组件自身的选项比源组件的扩展优先级更高。
  • 示例: var CompA = {...} //扩展CompA,而不必在任何变种上调用Vue.extend CompB = {extends:CompA,...}

实例属性

vm.$data

  • 类型: Object
  • 详细信息: Vue实例正在观察的数据对象。你可以把它换成一个新的对象。Vue实例代理访问其数据对象上的属性。

vm.$el

  • 类型: HTMLElement
  • 只读
  • 详细信息: Vue实例正在管理的DOM元素。请注意,对于片段实例,vm.$el将返回一个指示片段起始位置的锚节点。

vm.$options

  • 类型: Object
  • 只读
  • 详细信息: 用于当前Vue实例的实例化选项。当你想在选项中包含自定义属性时这很有用:new Vue({customOption:'foo',created:function(){console.log(this。$ options.customOption)// - >'foo'}} )

vm.$parent

  • 类型: Vue instance
  • 只读
  • 详细信息: 父实例,如果当前实例有一个实例。

vm.$root

  • 类型: Vue instance
  • 只读
  • 详细信息: 当前组件树的根Vue实例。如果当前实例没有父母,那么这个值就是它自己。

vm.$children

  • 类型: Array<Vue instance>
  • 只读
  • 详细信息: 当前实例的直接子组件。

vm.$refs

  • 类型: Object
  • 只读
  • 详细信息: 保存已v-ref注册的子组件的对象。
  • 也可参看:
- [Child Component Refs](../guide/components#Child-Component-Refs)
-  [v-ref](about:blank#v-ref).

vm.$els

  • 类型: Object
  • 只读
  • 详细信息: 保存已v-el注册DOM元素的对象。
  • 另见: v-el。

Instance Methods / Data

vm.$watch( expOrFn, callback, options )

  • 参数:
- `{String | Function} expOrFn`
- `{Function} callback`
-  `{Object} [options]`
    - `{Boolean} deep`
    - `{Boolean} immediate`
  • 返回: {Function} unwatch
  • 用法: 观察Vue实例上的表达式或计算的函数以进行更改。回调被调用新值和旧值。该表达式可以是单个键路径或任何有效的绑定表达式。

注意:在对对象或数组进行变异(而不是替换)时,旧值将与新值相同,因为它们引用相同的对象/数组。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()
  • 选项:deep 为了也检测对象内嵌套的值更改,您需要传入deep: true选项参数。请注意,您不需要这样做来侦听Array突变。vm。$ watch('someObject',callback,{deep:true})vm.someObject.nestedValue = 123 //回调被触发
  • 选项:立即 传入immediate: true选项将立即用表达式的当前值触发回调:vm。$ watch('a',callback,{immediate:true})//立即触发回调,当前值为a

vm.$get( expression )

  • 参数:
- `{String} expression`
  • 用法: 从给定表达式的Vue实例中检索一个值。抛出错误的表达式将被抑制并返回undefined
  • 例如: var vm = new Vue({data:{a:{b:1}}})vm。$ get('a.b')// - > 1 vm。$ get('ab + 1')/ / - > 2

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.msg ='hello'vm。$ eval('msg | uppercase')// - >'HELLO'

vm.$interpolate( templateString )

  • 参数:
- `{String} templateString`
  • 用法: 评估一段包含胡须插值的模板字符串。请注意,此方法仅执行字符串插值; 属性指令被忽略。
  • 例如: //假设vm.msg ='hello'vm。$ interpolate('{{msg}} world!')// - >'hello world!'

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.$emitvm.$dispatchvm.$broadcast。该回调将接收传入这些事件触发方法的所有附加参数。
  • 例如: vm。$ on('test',function(msg){console.log(msg)})vm。$ emit('test','hi')// - >“hi”

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。任何其他参数都将传递给侦听器的回调函数。
  • 例如: //创建父链var parent = new Vue()var child1 = new Vue({parent:parent})var child2 = new Vue({parent:child1})parent。$ on('test',function( ){console.log('parent notifications')})child1。$ on('test',function(){console.log('child1 notifications')})child2。我们不会通知你,因为child1没有返回/ /在其回调中为true
  • 另见:父子节点关系

vm.$broadcast( event, …args )

  • 参数:
- `{String} event`
- `[...args]`
  • 用法: 广播一个向下传播到当前实例的所有后代的事件。由于后代扩展为多个子树,事件传播将遵循许多不同的“路径”。除非回调函数返回,否则沿路径发出侦听器回调时,每条路径的传播都将停止true
  • 例如: var parent = new Vue() // child1 and child2 are siblings var child1 = new Vue({ parent: parent }) var child2 = new Vue({ parent: parent }) // child3 is nested under child2 var child3 = new Vue({ parent: child2 }) child1.$on('test', function () { console.log('child1 notified') }) child2.$on('test', function () { console.log('child2 notified') }) child3.$on('test', function () { console.log('child3 notified') }) parent.$broadcast('test') // -> "child1 notified" // -> "child2 notified" // child3不会被通知,因为child2在回调中没有返回true

Instance Methods / DOM

vm.$appendTo( elementOrSelector, callback )

  • 参数:
- `{Element | String} elementOrSelector`
- `{Function} [callback]`
  • 返回: vm - 实例本身
  • 用法: 将Vue实例的DOM元素或片段追加到目标元素。目标可以是元素或querySelector字符串。如果存在,此方法将触发转换。转换完成后触发回调(或者如果没有触发转换,立即触发回调)。

vm.$before( elementOrSelector, callback )

  • 参数:
- `{Element | String} elementOrSelector`
- `{Function} [callback]`
  • 返回: vm - 实例本身
  • 用法: 在目标元素之前插入Vue实例的DOM元素或片段。目标可以是元素或querySelector字符串。如果存在,此方法将触发转换。转换完成后触发回调(或者如果没有触发转换,立即触发回调)。

vm.$after( elementOrSelector, callback )

  • 参数:
- `{Element | String} elementOrSelector`
- `{Function} [callback]`
  • 返回: vm - 实例本身
  • 用法: 在目标元素之后插入Vue实例的DOM元素或片段。目标可以是元素或querySelector字符串。如果存在,此方法将触发转换。转换完成后触发回调(或者如果没有触发转换,立即触发回调)。

vm.$remove( callback )

  • 参数:
- `{Function} [callback]`
  • 返回: vm - 实例本身
  • 用法: 从DOM中移除Vue实例的DOM元素或片段。如果存在,此方法将触发转换。转换完成后触发回调(或者如果没有触发转换,立即触发回调)。

vm.$nextTick( callback )

  • 参数:
- `{Function} [callback]`
  • 用法: 推迟在下一个DOM更新周期后执行的回调。在您更改某些数据以等待DOM更新后立即使用它。这与全局相同Vue.nextTick,只是回调的this上下文自动绑定到调用此方法的实例。
  • 例子: new Vue({ // ... methods: { // ... example: function () { // modify data this.message = 'changed' // DOM is not updated yet this.$nextTick(function () { // DOM is now updated // this绑定到当前实例this.doSomethingElse()})}}})
  • 也可参看:
- [Vue.nextTick](about:blank#Vue-nextTick)
- [Async Update Queue](../guide/reactivity#Async-Update-Queue)

实例方法/生命周期

vm.$mount( elementOrSelector )

  • 参数:
- `{Element | String} [elementOrSelector]`
  • 返回: vm - 实例本身
  • 用法: 如果Vue实例el在实例化时没有收到选项,它将处于“未安装”状态,没有关联的DOM元素或片段。vm.$mount()可用于手动启动挂载/编译未挂载的Vue实例。如果没有提供参数,模板将被创建为文档外的片段,您将不得不使用其他DOM实例方法将其插入到文档中。如果replace选项设置为false,则空白<div>将自动创建为包装元素。调用$mount()已挂载的实例将不起作用。该方法返回实例本身,因此您可以在其之后链接其他实例方法。
  • 示例: var MyComponent = Vue.extend({template:'<div> Hello!</ div>'})//创建并挂载到#app(将替换#app)new MyComponent()。$ mount('#app ')//以上内容与新的MyComponent({el:'#app'})相同//或者编译脱离文件并追加:new MyComponent()。$ mount()。$ appendTo('容器')
  • 另见:生命周期图

vm.$destroy( remove )

  • 参数:
- `{Boolean} [remove] - default: false`
  • 用法: 彻底摧毁虚拟机。清理与其他现有vms的连接,解除其所有指令的绑定,关闭所有事件侦听器,并且如果remove参数为true,则从DOM中删除其关联的DOM元素或片段。触发beforeDestroydestroyed钩。
  • 另见:生命周期图

Directives

v-text

  • 预计: String
  • 详细信息: 更新元素的textContent。在内部,{{ Mustache }}内插也被编译为v-texttextNode上的指令。指令形式需要包装器元素,但性能稍好,并避免FOUC(未编译内容的Flash)。
  • 例如: <span v-text =“msg”> </ span> <! - 与 - > <span> {{msg}} </ span>相同

v-html

  • 预计: String
  • 详细信息: 更新元素的innerHTML。内容以纯HTML格式插入 - 数据绑定被忽略。如果您需要重新使用模板片段,则应该使用partials。在内部,{{{ Mustache }}}插值也被编译为v-html使用锚节点的指令。指令形式需要包装器元素,但性能稍好,并避免FOUC(未编译内容的Flash)。在您的网站上动态呈现任意HTML可能非常危险,因为它很容易导致XSS攻击。只能使用v-html可信内容,绝对不能使用用户提供的内容。
  • 例如: <div v-html =“html”> </ div> <! - 与 - > <div> {{{}}} </ div>

v-if

  • 预计: *
  • 用法: 根据表达式值的真实性有条件地渲染元素。元素及其包含的数据绑定/组件在切换期间被销毁并重新构建。如果该元素是一个<template>元素,则其内容将被提取为条件块。
  • 另请参阅:条件呈现

v-show

  • 预计: *
  • 用法:display根据表达式值的真实性 切换元素的CSS属性。触发器如果存在则转换。
  • 另请参阅:条件呈现 - v展示

v-else

  • 不期望表达
  • 限制:以前的兄弟元素必须有v-ifv-show
  • 用法: 表示“else块”为v-ifv-show<div v-if="Math.random() > 0.5”>对不起</ DIV> <DIV V-else>不好意思</ DIV>。
  • 另请参阅:条件呈现 - 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

  • 速记: @
  • 预计: Function | Inline Statement
  • 论据: event (required)
  • 修饰符:
-  `.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调用的附加参数的数组。
  • 例:<! - 方法处理程序 - > <button v-on:click =“doThis”> </ button>
  • <! - 内联语句 - > <button v-on:click =“doThat('hello',$事件)“> </ button>
  • <! - shorthand - > <button @click =”doThis“> </ button>
  • <! - 停止传播 - > <button @ click.stop =”doThis“> < / button>
  • <! - 防止默认 - > <button @ click.prevent =“doThis”> </ button>
  • <! - 防止默认无表达式 - > <form @ submit.prevent> </ form>
  • < ! - 链修饰符 - > <button @ click.stop.prevent =“doThis”> </ button>
  • <! - 使用keyAlias的键修饰符 - > <input @ keyup.enter =“onEnter”>
  • <! - - 使用keyCode的键修饰符 - >
  • <input @ keyup.13 =“onEnter”>监听子组件上的自定义事件(当孩子发出“my-event”时会调用该处理程序):<my-component @ my-event =“handleThis”> </ my-component>
  • <! - inline语句 - > <my-component @ my-event =“handleThis(123,$ arguments)”> </ my-component>
  • 另请参阅:方法和事件处理

v-bind

  • 速记: :
  • 预计: * (with argument) | Object (without argument)
  • 论据: attrOrProp (optional)
  • 修饰符:
-  `.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。有关更多详细信息,请参阅下面的链接指南部 当用于道具绑定时,道具必须在子组件中正确声明。支柱绑定可以使用其中一个修饰符指定不同的绑定类型。在没有参数的情况下使用时,可用于绑定包含属性名称 - 值对的对象。注意:在此模式下classstyle不支持数组或对象。
  • 例子: <! - 绑定一个属性 - > <img v-bind:src =“imageSrc”> <! - shorthand - > <img:src =“imageSrc”> <! - class binding - > <div class =“{red:isRed}”> </ div> <div class =“[classA,classB]”> </ div> <div class =“[classA,{classB:isB,classC: isC}]>> <! - style binding - > <div:style =“{fontSize:size +'px'}”> </ div> <div style =“[styleObjectA,styleObjectB]”> </ div> <! - 绑定属性对象 - > <div v-bind =“{id:someProp,'other-attr':otherProp}”> </ div> <! - prop绑定。“prop”必须在my-component中声明。 - > <my-component:prop =“someThing”> </ my-component>
  • 也可参看:
- [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

  • 不期望表达
  • 限于:子组件
  • 论据: id (required)
  • 用法: 在其父级上注册对子组件的引用以供直接访问。不期望表达。必须提供一个参数作为注册的ID。组件实例将可以在其父$refs对象上访问。当与组件一起使用时v-for,注册值将是一个数组,其中包含与它们绑定的数组对应的所有子组件实例。如果数据源为v-forObject,则注册的值将是包含镜像源Object的键 - 实例对的Object。
  • 注意: 由于HTML不区分大小写,因此camelCase的用法v-ref:someRef将被转换为全部小写。你可以使用v-ref:some-ref正确的设置this.$refs.someRef
  • 示例: <comp v-ref:child> </ comp> <comp v-ref:some-child> </ comp> //从父级访问:this。$ refs.child this。$ refs.someChild With v-for:<comp v-ref:list v-for =“item in list”> </ comp> //这是父数组中的数组$ refs.list
  • 另请参阅:子组件参考

v-el

  • 不期望表达
  • 论据: id (required)
  • 用法: 在其所有者Vue实例的$els对象上注册对DOM元素的引用,以便于访问。
  • 注意: 由于HTML不区分大小写,因此camelCase的用法v-el:someEl将被转换为全部小写。你可以使用v-el:some-el正确的设置this.$els.someEl
  • 例如: <span v-el:msg> hello </ span> <span v-el:other-msg> world </ span>。$ els.msg.textContent // - >“hello”this。$ els。 otherMsg.textContent // - >“world”

v-pre

  • 不期望表达
  • 用法 跳过此元素及其所有子元素的编译。您可以使用它来显示原始胡须标签。跳过大量没有指令的节点也可以加快编译速度。
  • 例如: <span v-pre> {{this will be be compiled}} </ span>

v-cloak

  • 不期望表达
  • 用法: 该指令将保留在元素上,直到关联的Vue实例完成编译。结合诸如CSS规则[v-cloak] { display: none },该指令可用于隐藏未编译的胡须绑定,直到Vue实例准备就绪。
  • 例如: v-cloak {display:none; } <div v-cloak> {{message}} </ div>在编译完成之前,<div>不可见。

特殊元素

组件

  • 属性:
- `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将用于解析部分内容的属性。
  • 示例: //注册一个局部Vue.partial('my-partial','<p>这是一个局部!{{msg}} </ p>')<! - 静态局部 - > <局部名称=“my-partial”> </ partial> <! - 一个动态部分 - > <! - 渲染带有id的部分=== vm.partialId - > <partial v-bind:name =“partialId”> </ partial> <! - 使用v-bind速记的动态部分 - > <partial:name =“partialId”> </ partial>

过滤器

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”。当有多个参数时,参数将被用作对应于要被复数化的单个单,双,三...形式的字符串数组。当要复数的数字超过参数的长度时,它将使用数组中的最后一个条目。
  • 例如: {{count}} {{count | pluralize'item'}} 1 =>'1 item'2 =>'2 items' {{date}} {{date | 复数'st''nd''rd''th'}}将导致: 1 =>'1st'2 =>'2nd'3 =>'3rd'4 =>'4th'5 =>'5th'

json

  • 参数:
- `{Number} [indent] - default: 2`
  • 用法: 输出调用结果JSON.stringify()而不是输出toString()值(例如[object Object])。
  • 示例: 使用4空格缩进打印对象:<pre> {{nestedObject | json 4}} </ pre>

debounce

  • 限于:期望值的指令Function,例如v-on
  • 参数:
- `{Number} [wait] - default: 300`
  • 用法: 包装处理程序以x毫秒为单位去除它,x参数在哪里。默认的等待时间是300ms。一个去抖动的处理程序将被延迟,直到x通话结束后经过至少ms。如果在延迟时间之前再次调用处理程序,则延迟时间将重置为xms。
  • 例如: <input @ keyup =“onKeyup | debounce 500”>

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'}]}})
  • 其他示例: 多个搜索键:<li v-for =“用户中的用户| filterBy'name''phone'中的searchText>”>> </ li>多个搜索键与动态数组参数:<! - fields = ['使用自定义过滤器函数:<div v-for =“用户中的用户| filterBy myCustomFilterFunction”>用户在过滤器中使用自定义过滤器函数<fieldA','fieldB'] - > <div v-for =

orderBy

  • 限于:期望值的指令Array,例如v-for
  • 参数:
- `{String | Array<String> | Function} ...sortKeys`
- `{String} [order] - default: 1`
  • 用法: 返回源数组的排序版本。您可以传递任意数量的字符串来对键进行排序。如果您想使用自己的排序策略,也可以传递包含排序键或函数的数组。可选order参数指定结果是以升序(order >= 0)还是降序(order < 0)顺序排列。对于原始值数组,只需省略sortKeys并提供顺序,例如orderBy 1
  • 例: 按名称排序用户:<ul> <li v-for =“user in users | orderBy'name'”> {{user.name}} </ li> </ ul>按降序排列:<ul> <li v -for =“user in users | orderBy'name'-1”> {{user.name}} </ li> </ ul>对原始值进行排序:<ul> <li v-for =“n in number | orderBy动态排序顺序:<div id =“orderby-example”> <button @ click =“order = order \ * -1”>反向排序顺序</ li> </ li>按钮> <ul> <li v-for =“user in users | orderBy'name'order”> {{user.name}} </ li>新vue({el:'# orderby-example',data:{order:1,users:[{name:'Bruce'},{name:'Chuck'},{name:'Jackie'}]}})使用两个键进行排序:<ul> <li v-for =“user in user | orderBy'lastName''firstName'”> {{user.lastName}} {{user.firstName}} </ li> </ ul>使用函数排序:<div id =“orderby-compare-example”class =“demo”> <button @ click =“order = order \ * -1 “>反向排序顺序</ button> <ul> <li v-for =”user in users | orderBy ageByTen order“> {{user.name}} - {{user.age}} </ li> </ ul > </ div> new Vue({el:'#orderby-compare-example',data:{order:1,users:[{name:'Jackie',age:62},{name:'Chuck',age :76}, { name: 'Bruce', age: 61 } },方法:{ageByTen:function(a,b){return Math.floor(a.age / 10) - Math.floor(b.age / 10)}}})

数组扩展方法

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)
  • 另见:突变方法
接口 | API
Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2