Vue2 备忘清单 === 渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。 入门 --- ### 介绍 Vue 是一套用于构建用户界面的渐进式框架 - [Vue 2.x 官方文档](https://v2.cn.vuejs.org/) - [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/) ### 声明式渲染 ```html
{{ message }}
``` ```js var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` ### 基础例子 ```html

原始信息: "{{ message }}"

计算的反向信息: "{{ reversedMessage }}"

``` ```js var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('') .reverse().join('') } } }) ``` 结果 ``` 原始信息: "Hello" 计算的反向信息: "olleH" ``` ### 绑定元素属性 ```html
鼠标悬停几秒钟查看此处动态绑定的提示信息！
``` ```js var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() .toLocaleString() } }) ``` ### 条件 ```html

现在你看到我了

``` ```js var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ``` 控制切换一个元素是否显示 ### 循环 ```html
  1. {{ todo.text }}
``` ```js var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) ``` ### 点击事件处理 ```html

{{ message }}

``` ```js var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('') .reverse().join('') } } }) ``` ### 输入事件处理 ```html

{{ message }}

``` `v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定 ```js var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) ``` 模板语法 --- ### 文本 ```html Message: {{ msg }} 这个将不会改变: {{ msg }} ``` 使用 `v-once` 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新 ### 原始 HTML ```html

解释为普通文本: {{ rawHtml }}

使用 v-html 指令:

``` 使用 `v-html` 指令，输出真正的 `HTML` ### 属性 ```html
``` 如果 `isDisabled` 的值是 null/undefined/false 则 `disabled` 不会被渲染出来 ### JavaScript 表达式 ```html
消息: {{ msg }} {{ msg + '这是字符串' }} {{ isWorking ? '是':'否' }} {{ msg.getDetials() }}
``` ### 指令 ```html

现在你看到我了

``` `v-if` 指令将根据表达式 `seen` 的值的真假来插入/移除 \

元素 ### 指令参数 ```html ... ``` `v-bind` 指令将该元素 `href` 属性与表达式 `url` 的值绑定 ```html ... ``` `v-on` 指令，用于监听 DOM 事件，oSomething 是事件名 ### 指令动态参数 **v2.6** ```html ... ``` 当 `eventName` 的值为 `focus` 时，`v-on:[eventName]` 将等价于 `v-on:focus` ### 指令修饰符 ```html

...
``` `.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()` ### 指令缩写 ```html ... ... ... ``` Class 与 Style 绑定 --- ### 对象语法 ```html
``` 传给 `v-bind:class` 一个对象，以动态地切换 `class` ### 与普通的 class 属性共存 ```html {2}
``` 如下 data ```js data: { isActive: true, hasError: false } ``` 结果渲染为 ```html
``` ### 绑定的数据对象不必内联定义在模板里 ```html
``` 如下 data ```js data: { classObject: { active: true, 'text-danger': false } } ``` 结果渲染为 ```html
``` ### 三元表达式 ```html
``` ### 数组 ```html
``` ### 数组语法 ```html
``` 如下 data ```js data: { activeClass: 'active', errorClass: 'text-danger' } ``` 结果渲染为 ```html
``` ### 内联样式 ```html
``` 如下 data ```js data: { activeColor: 'red', fontSize: 30 } ``` 结果渲染为 ```html
``` ### 内联样式对象通常更好 ```html
``` 如下 data ```js data: { styleObject: { color: 'red', fontSize: '13px' } } ``` 同样的，对象语法常常结合返回对象的计算属性使用 ### 内联样式数组语法 ```html
``` ### 内联样式多重值 ```html
``` 条件渲染 --- ### v-if ```html

Vue is awesome!

Oh no 😢

``` ### v-else-if ```html
A
B
C
Not A/B/C
``` `@2.1.0` 新增，必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后 ### v-else ```html
现在你看到我了
现在你看不见我了
``` `v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面 ### \