Vue常用API

选项

el 类型 string | element
vue实例挂载的dom元素

data 类型 obj | function
vue 实例的数据对象
因为同一个组件创建的不同实例会共享引用同一个data，所以在组件中 data只能是函数。

methods 类型 { [key: string]: function }
函数中this绑定到Vue实例

computed 类型 { [key: string]: function | { get: function,set: fucntion } }
默认使用get方法,当设置set方法时，当computed监听的值发生变化时，set会被调用。

template 类型 string
模板占位符，可以包裹元素，并且不会渲染到dom上

render 类型 (createElement : () => VNode) => VNode(虚拟节点）
渲染函数
watch 类型 {[key: string]: string | function | object | array}
key是需要观察的表达式

props 类型 array<string> | object
用于接收父组件的数据

Vue.component('my-title', {
  props: ['name'],
  template: '<span>{{name}}<span>'
})
<my-title name = 'test'><my-title>

生命周期/钩子函数

**created, mounted **
类型都是function，在不同阶段被调用

指令

v-bind 缩写 ‘：’ 动态绑定元素属性
<a v-bind:href='url'>link</a>
v-on 缩写’@’ 绑定事件监听器
<div v-on:click='functionName'></div>
v-for 多次渲染相应元素
<div v-for='each in items'>{{each}}</div>
v-if v-else v-else-if 根据条件渲染元素

<div v-if='a > 10'>10+</div>
<div v-else-if='a > 5'>5-10</div>
<div v-else='a > 0'>0-5</div>

v-once 只渲染一次
v-html 更改元素的innerHTML
v-text 更新元素的textContent
<p v-text='msg'></p>等同于<p>{{msg}}</p>
v-show 改变元素display值，元素会被渲染
v-model 在<input>,<textare>,<select>上创建双向数据绑定
<input v-model='msg' > <p>{{msg}}</p>
v-slot 缩写’#’ 用于<template> 组件 参数是插槽名
<template v-slot='header></template>'

实例

vm.$emit
官方给的解释是触发当前实例上的事件，附带参数会传给监听器回调，
所以子组件或者公用组件可以用它来向上一级传递数据
子组件

<child @click="childFuntion" ></child>

子组件中定义的方法

childFuncion() {
  this.$emit("popFunction",this.index)
}

父组件

<father @popFunction="faFunction"></father>

父组件中定义的方法

faFunction(index) {
	//利用index做其他事
}

父组件中，popFunction就是子组件通过$emit传递的自定义方法
faFunction则是父组件中接受子组件传递的参数(index)的方法