vue小结

2019独角兽企业重金招聘Python工程师标准>>>

全局 API

Vue.extend( options: 组件选项对象 )

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

创建其实例后可挂载在元素上。

new创建的子类().$mount('#mount-point')

 

Vue.nextTick( [callback: function, context] )

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

可在生命周期钩子函数中使用。

 

Vue.set( target: object, key, value )

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。(注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。)

 

Vue.delete( target: Object, key )

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。

 

Vue.directive( id: string, [definition]: 单个或多个钩子函数对象 )

注册或获取全局指令。

通过在元素上添加属性 v-id 实现。

 

Vue.filter( id: string, [definition]: function )

注册或获取全局过滤器。(ng中的管道)。

Vue.filter('my-filter', function (value) {

  // 返回处理后的值

})

参数输入方法{{ message | my-filter('arg1', arg2) }}

 

Vue.component( id: string, [definition] )

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。

注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* 组件选项 */ }))

 

Vue.use( plugin: function | object )

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。

 

Vue.mixin( mixin: 组件选项 )

全局注册一个混合，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混合，向组件注入自定义的行为。不推荐在应用代码中使用。

 

 

组件选项

属性方法

data: function

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

(以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突)

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

data() {

    return {prop: value}

}

 

props: Array<string> | Object

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。可以通过Vue实例访问。

  props: ['size', 'myMessage']

 

propsData: { [key: string]: any }

创建实例时传递 props。主要作用是方便测试。

  propsData: {

    msg: 'hello'

  }

 

computed: { [key: string]: Function | { get: Function, set: Function } }

计算属性将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。

  computed: {

    aPlus: {

      get: function () {return this.a + 1},

      set: function (v) {this.a = v - 1}

    },

    aDouble: function () {return …}

  }

 

methods: { [key: string]: Function }

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。

  methods: {

    plus: function () {console.log(‘hello world’)}

  }

 

watch: { [key: string]: string | Function | Object }

一个对象，key是需要观察的data、props、computed属性，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

  watch: {

    key: function (newVal, oldVal) {…}

  }

 

DOM操作

render: (createElement: () => VNode) => VNode

通过render函数渲染组件元素内容。优先级低于.vue文件中<template>。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

  render: function (createElement) {

    return createElement(tagName, ElementNodes)

}

 

 

 

生命周期钩子

beforeCreate: Function

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 

created: Function

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

 

beforeMount: Function

在挂载开始之前被调用：相关的 render 函数首次被调用。

 

mounted: Function

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

注意 mounted 不会承诺所有的子组件也都一起被挂载。

如果希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

mounted: function () {

  this.$nextTick(function () {…})

}

 

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

 

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

注意 updated 不会承诺所有的子组件也都一起被重绘。

如果希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated。

 

activated

keep-alive 组件激活时调用。

 

deactivated

keep-alive 组件停用时调用。

 

beforeDestroy: Function

实例销毁之前调用。在这一步，实例仍然完全可用。

 

destroyed: Function

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

 

 

组件内指令、管道、组件

Directives: {[id: string]: {[definition]: function}}

注册局部指令。

directives: {
  focus: {
    inserted: function (el) { el.focus() }
  }
}

 

filters: {[id: string]: function}

注册局部管道。

filters: {'my-filter': function (value) {

  // 返回处理后的值

}}

参数输入方法{{ message | my-filter('arg1', arg2) }}

 

components: {componentName, componentName}

局部注册组件。

 

 

 

组件组合

parent: Vue instance

指定已创建的实例之父实例，在两者之间建立父子关系。

不要用。

 

mixins: Array<Object>

接受引入的mixins。

  mixins: [mixin]

 

extends: Object | Function | 其他组件

声明扩展另一个组件，这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

  extends: CompA,

 

provide / inject

·                     provide：Object | () => Object

·                     inject：Array<string> | { [key: string]: string | Symbol | Object }

（provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。）

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

 

组件杂项

name：string

组件命名，只有作为组件选项时起作用。

 

delimiters：Array<string>

默认值：["{{", "}}"]

改变纯文本插入分隔符。

 

functional：boolean

使组件无状态 (没有 data ) 和无实例 (没有 this 上下文)。他们用一个简单的 render函数返回虚拟节点使他们更容易渲染。

 

Model：{ prop?: string, event?: string }

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

允许一个自定义组件在使用 v-model 时定制 prop 和 event。

 

inheritAttrs：boolean

默认值：true

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。

 

comments：boolean

当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

 

 

组件实例

属性实例

vm.$data：Object

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

可以通过this.data访问对应data。

 

vm.$props：Object

当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

可以通过this.prop访问对应prop。

 

vm.$el：HTMLElement

表示Vue 组件使用的最外层DOM元素。

 

vm.$options：Object

用于当前 Vue 实例的初始化选项。用于访问在选项中包含的自定义属性选项。

 

vm.$parent：Vue instance

用于访问组件的父组件实例。

 

vm.$root：Vue instance

当前组件树的根组件实例。如果当前实例没有父实例，此实例将会是自己。

 

vm.$children：Array<Vue instance>

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for来生成子组件，并且使用 Array 作为真正的来源。

 

vm.$slots：{ [name: string]: ?Array<VNode> }

用来访问被插槽分发的内容。default 属性包括了所有没有被包含在具名插槽中的节点。

 

vm.$scopedSlots：{ [name: string]: props => VNode | Array<VNode> }

用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode 的函数。

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

 

vm.$refs：Object

访问局部模板变量。

 

vm.$isServer：boolean

当前 Vue 实例是否运行于服务器。

 

vm.$attrs：{ [key: string]: string }

包含了父作用域中不作为 prop 被识别 (没有被获取的prop) 的特性绑定。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style除外)，并且可以通过 v-bind="$attrs" 传入内部组件。

 

vm.$listeners：{ [key: string]: Function | Array<Function> }

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

 

 

 

实例事件

vm.$on( event, callback )

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')

 

vm.$once( event, callback ) 同上

 

vm.$off( [event, callback] )

移除自定义事件监听器。

 

vm.$emit( event, […args] )

触发当前实例上的事件。附加参数都会传给监听器回调。

 

 

内置的组件

component

Props：

· is - string | ComponentDefinition | ComponentConstructor

· inline-template - boolean

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

 

transition

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上。

 

transition-group

<transition-group> 元素作为多个元素/组件的过渡效果（数组）。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>。

注意，每个 <transition-group> 的子节点必须有 独立的 key ，动画才能正常工作。

 

keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

 

slot

<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

 

 

特殊Attr

key：number | string

使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

Key变化时重新渲染对应的DOM元素。

 

ref：string

指定局部模板变量。

 

slot：string

用于标记往哪个具名插槽中插入子组件内容。

 

slot-scope：function argument expression

用于将元素或组件表示为作用域插槽。

 

is

用于动态组件且基于 DOM 内模板的限制来工作。

<component v-bind:is="currentView"></component>

 

转载于:https://my.oschina.net/u/3412211/blog/1604949