Vue2 备忘清单

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

入门

介绍

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

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

注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本

快速创建 Vue 项目 (Vue CLI)

npx @vue/cli create hello-world

声明式渲染

<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 的值的真假来插入/移除 \

元素

指令参数

<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 属性共存

```html {2}

Vue is awesome!

Oh no 😢

Hello!

• {{ item.message }}

`、`
`、`` 和 ``，对于哪些元素可以出现在其内部是有严格限制的。有些元素，诸如 ``、`` 和 ``，只能出现在其它某些特定的元素内部 ```html ``` `` 会被作为无效的内容提升到外部 --- 如果我们从以下来源使用模板的话，这条限制是不存在的 - 字符串 (例如：`template: '...'`) - 单文件组件 (`.vue`) - `