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>'

本文地址：https://blog.csdn.net/qq_42817444/article/details/107346156