reference/docs/vue2.md

Vue2 备忘清单

渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。

入门

介绍

Vue 是一套用于构建用户界面的渐进式框架

• Vue 2.x 官方文档
• Vue Router 3.x 官方文档

声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

基础例子

<div id="example">
  <p>原始信息: "{{ message }}"</p>
  <p>
    计算的反向信息: "{{ reversedMessage }}"
  </p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('')
          .reverse().join('')
    }
  }
})

结果

原始信息:  "Hello"
计算的反向信息:  "olleH"

绑定元素属性

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date()
        .toLocaleString()
  }
})

条件

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

控制切换一个元素是否显示

循环

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

点击事件处理

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">
    反转消息
  </button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('')
            .reverse().join('')
    }
  }
})

输入事件处理

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

模板语法

文本

<span>Message: {{ msg }}</span>
<span v-once>
  这个将不会改变: {{ msg }}
</span>

使用 v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新

原始 HTML

<p>解释为普通文本: {{ rawHtml }}</p>
<p>
  使用 v-html 指令: 
  <span v-html="rawHtml"></span>
</p>

使用 v-html 指令，输出真正的 HTML

属性

<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isDisabled">
  Button
</button>

如果 isDisabled 的值是 null/undefined/false 则 disabled 不会被渲染出来

JavaScript 表达式

<div id="app">
  <span>消息: {{ msg }}</span>
  <span>{{ msg + '这是字符串' }}</span>
  <span>{{ isWorking ? '是':'否' }}</span>
  <span>{{ msg.getDetials() }}</span>
  <div v-bind:id="'list-' + id"></div>
<div>

指令

<p v-if="seen">
  现在你看到我了
</p>

v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素

指令参数

<a v-bind:href="url">...</a>

v-bind 指令将该元素 href 属性与表达式 url 的值绑定

<a v-on:click="doSomething">...</a>

v-on 指令，用于监听 DOM 事件，oSomething 是事件名

指令动态参数 v2.6

<a v-on:[eventName]="doSomething">...</a>

当 eventName 的值为 focus 时，v-on:[eventName] 将等价于 v-on:focus

指令修饰符

<form v-on:submit.prevent="onSubmit">
  ...
</form>

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

指令缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

Class 与 Style 绑定

对象语法

<div v-bind:class="{ active: isActive }">

</div>

传给 v-bind:class 一个对象，以动态地切换 class

与普通的 class 属性共存

<div
  class="static"
  v-bind:class="{
    active: isActive,
    'text-danger': hasError
  }"
></div>

如下 data

data: {
  isActive: true,
  hasError: false
}

结果渲染为

<div class="static active"></div>

绑定的数据对象不必内联定义在模板里

<div v-bind:class="classObject"></div>

如下 data

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

结果渲染为

<div class="static active"></div>

三元表达式

<div v-bind:class="[
  isActive ? activeClass : ''
]">
</div>

数组

<div v-bind:class="[
  { active: isActive }, errorClass
]"></div>

数组语法

<div v-bind:class="[
  activeClass, errorClass
]">
</div>

如下 data

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果渲染为

<div class="active text-danger"></div>

内联样式

<div v-bind:style="{
    color: activeColor,
    fontSize: fontSize + 'px'
}"></div>

如下 data

data: {
  activeColor: 'red',
  fontSize: 30
}

结果渲染为

<div style="color: red; font-size: 30px;"></div>

内联样式对象通常更好

<div v-bind:style="styleObject"></div>

如下 data

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用

内联样式数组语法

<div v-bind:style="[
  baseStyles, overridingStyles
]"></div>

内联样式多重值

<div :style="{
  display: ['-webkit-box', 'flex']
}"></div>

条件渲染

v-if

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>
  Not A/B/C
</div>

@2.1.0 新增，必须紧跟在带 v-if 或者 v-else-if 的元素之后

v-else

<div v-if="Math.random() > 0.5">
  现在你看到我了
</div>
<div v-else>
  现在你看不见我了
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面

<template> 上使用 v-if 条件渲染分组

<template v-if="ok">
  <p>Paragraph 1</p>
</template>

用 key 管理可复用的元素

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="输入用户名" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="输入邮箱" key="email-input">
</template>

v-show

<h1 v-show="ok">
  Hello!
</h1>

带有 v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 CSS 属性 display

Vue 2 API

全局配置

:-	:-
silent	取消所有的日志与警告 #
optionMergeStrategies	自定义合并策略的选项 #
devtools	是否允许 devtools 检查 #
errorHandler	未捕获错误的处理函数 (开发模式生效) #
warnHandler (2.4.0)	运行时警告处理函数 #
ignoredElements	忽略 Vue 之外的 (自定义元素) #
keyCodes	v-on 自定义键位别名 #
performance (2.2.0)	性能追踪 #
productionTip (2.2.0)	是否生成生产提示 #

全局 API

:-	:-
Vue.extend	Vue 构造器，创建一个“子类” #
Vue.nextTick	执行延迟回调 #
Vue.set	向响应式对象中添加一个属性 #
Vue.delete	删除对象的 property #
Vue.directive	注册或获取全局指令 #
Vue.filter	注册或获取全局过滤器 #
Vue.component	注册或获取全局组件 #
Vue.use	安装 Vue.js 插件 #
Vue.mixin	全局注册一个混入 #
Vue.compile	将模板字符串编译成 render 函数 #
Vue.observable (2.6.0)	让一个对象可响应 #
Vue.version	Vue 安装版本号 #

数据

:-	:-
data	实例的数据对象 #
props	接收来自父组件的数据 #
propsData	创建实例时传递 props #
computed	计算属性将被混入到 Vue 实例中 #
methods	将被混入到 Vue 实例中 #
watch	对象键是观察的表达式，值是回调函数 #

DOM

:-	:-
el	实例的挂载目标 #
template	字符串模板作为 Vue 实例的标识使用 #
render	字符串模板的代替方案 #
renderError (2.2.0)	render错误时提供另一种渲染 #

生命周期钩子

:-	:-
beforeCreate	实例初始化之后 #
created	实例创建完成后被立即同步调用 #
beforeMount	在挂载开始之前被调用 #
mounted	实例被挂载后调用 #
beforeUpdate	数据改变后 DOM 更新之前调用 #
updated	数据更改更新完毕之后被调用 #
activated	keep-alive 缓存组件激活时调用 #
deactivated	keep-alive 缓存的组件失活时调用 #
beforeDestroy	实例销毁之前调用 #
destroyed	实例销毁后调用 #
errorCaptured (2.5.0)	来自后代组件的错误时被调用 #

资源

:-	:-
directives	包含 Vue 实例可用指令的哈希表 #
filters	包含 Vue 实例可用过滤器的哈希表 #
components	包含 Vue 实例可用组件的哈希表 #

组合

:-	:-
parent	指定已创建的实例之父实例 #
mixins	接收一个混入对象的数组 #
extends	声明扩展另一个组件 #
provide/inject (2.2.0)	祖组件向所有子孙后代注入依赖 #

其它

:-	:-
name	允许组件模板递归地调用自身 #
delimiters	改变纯文本插入分隔符 #
functional	使组件无状态和无实例 #
model (2.2.0)	使用 v-model 时定制 prop 和 event #
inheritAttrs (2.4.0)	#
comments (2.4.0)	是否保留模板中的HTML注释 #

实例方法 / 数据

:-	:-
vm.$watch	观察 Vue 实例上的一个表达式 或者一个函数计算结果的变化 #
vm.$set	全局 Vue.set 的别名 #
vm.$delete	全局 Vue.delete 的别名 #

实例 property

:-	:-
vm.$data	#
vm.$props (2.2.0)	#
vm.$el	#
vm.$options	#
vm.$parent	#
vm.$root	#
vm.$children	#
vm.$slots	#
vm.$scopedSlots (2.1.0)	#
vm.$refs	#
vm.$isServer	#
vm.$attrs (2.4.0)	#
vm.$listeners (2.4.0)	#

实例方法 / 事件

:-	:-
vm.$on	监听当前实例上的自定义事件 #
vm.$once	监听一个自定义事件，只触发一次 #
vm.$off	移除自定义事件监听器 #
vm.$emit	触发当前实例上的事 #

实例方法 / 生命周期

:-	:-
vm.$mount	手动地挂载一个未挂载的实例 #
vm.$forceUpdate	迫使 Vue 实例重新渲染 #
vm.$nextTick	回调延迟执行 #
vm.$destroy	完全销毁一个实例 #

指令

:-	:-
v-text	#
v-html	#
v-show	#
v-if	#
v-else	#
v-else-if (2.1.0)	#
v-for	#
v-on	#
v-bind	#
v-model	#
v-slot	#
v-pre	#
v-cloak	#
v-once	#

特殊 attribute

:-	:-
key	#
ref	#
is	#
slot	推荐 2.6.0 新增的 v-slot #
slot-scope	推荐 2.6.0 新增的 v-slot #
scope	2.5.0 新增的 slot-scope 取代 #

内置的组件

:-	:-
component	#
transition	#
transition-group	#
keep-alive	#
slot	#

另见

• Vue Essentials Cheat-Sheet.pdf (vuemastery.com)
• Vue 2 官方文档 (vuejs.org)
• Vue 2 实例方法事件 (marozed.com)