Vue 学习记录 官方网站

一、 生命周期

1.2 生命周期方法示例

created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a)}

二、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

1. 插值（数据绑定）

1. 文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

	<span>Message: {{ msg }}</span>

2. 原始 HTML：你需要使用 v-html 指令, 绝不要对用户提供的内容使用插值。

	<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>

3. Attribute: Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind指令

	<div v-bind:id="dynamicId"></div>

4. JavaScript 表达式: 所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，只能包含单个表达式。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

2. 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1. 参数
   一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

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

2. 动态参数
   可以用方括号括起来的 JavaScript 表达式作为一个指令的参数，某些字符，如空格和引号，放在 HTML attribute 名里是无效的。浏览器会把 attribute 名全部强制转为小写，避免使用大写字符来命名键名。

	<a v-bind:[attributeName]="url"> ... </a>

3. 修饰符
   修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

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

4. 缩写
   Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

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

三、计算属性

对于任何复杂逻辑，你都应当使用计算属性。你可以像绑定普通 property 一样在模板中绑定计算属性。而且最妙的是我们已经以声明的方式创建了依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

1. 基础例子

	<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>

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

2. 计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3. 计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

	watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}

4. 计算属性的 setter

	computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}// ...

四、Class 与 Style 绑定

1. 绑定 HTML Class

1. 对象语法
   我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

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

	data: {isActive: true,error: null},computed: {classObject: function () {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}

2. 数组语法
   我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

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

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

2. 绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

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

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

五 事件处理

1. js 代码

   <button v-on:click="counter += 1">Add 1</button>

2. 事件处理方法

	<button v-on:click="greet">Greet</button>greet: function (event) {...}

3. 内联处理器中的方法

	<button v-on:click="say('hi')">Say hi</button>

4. 事件传递

	<button v-on:click="warn('Form cannot be submitted yet.', $event)">warn: function (message, event) {...}

5. 修饰符

5.1 事件修饰符

1. 修饰符清单

修饰符	说明	示例
.stop	阻止单击事件继续传播	v-on:click.stop=“doThis”
.prevent	提交事件不再重载页面	v-on:submit.prevent=“onSubmit”
.capture	即内部元素触发的事件先在此处理，然后才交由内部元素进行处理	v-on:click.capture=“doThis”
.self	事件不是从内部元素触发的	v-on:click.self=“doThat”
.once	点击事件将只会触发一次	v-on:click.once=“doThis”
.passive	滚动事件的默认行为 (即滚动行为) 将会立即触发	v-on:scroll.passive=“onScroll”

2. 修饰符可以串联

	<form v-on:submit.prevent></form>

5.2 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

	<input v-on:keyup.enter="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

5.3 系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17

	<!-- Alt + C --><input v-on:keyup.alt.67="clear"><!-- Ctrl + Click --><div v-on:click.ctrl="doSomething">Do something</div>

.exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

	<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --><button v-on:click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 --><button v-on:click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 --><button v-on:click.exact="onClick">A</button>

5.4 鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.left
.right
.middle

六、表单输入绑定

1. 基础用法

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

• v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源
• v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

1.1 文本

	<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

1.2 多行文本

在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。

	<span>Multiline message is:</span><p style="white-space: pre-line;">{{ message }}</p><br><textarea v-model="message" placeholder="add multiple lines"></textarea>

1.3 复选框

• 单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

• 多个复选框，绑定到同一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>new Vue({el: '...',data: {checkedNames: []}
})

1.4 单选按钮

	<div id="example-4"><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div>new Vue({el: '#example-4',data: {picked: ''}})

1.5 选择框

• 单选框
  如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

	<div id="example-5"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div>new Vue({el: '...',data: {selected: ''}})

• 多选时 (绑定到一个数组)：

	<div id="example-6"><select v-model="selected" multiple style="width: 50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selected }}</span></div>new Vue({el: '#example-6',data: {selected: []}})

• 用 v-for 渲染的动态选项：

<select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<span>Selected: {{ selected }}</span>

2. 修饰符

修饰符	说明	示例
.lazy	在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步	v-model.lazy=“msg”
.number	如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符	v-model.number=“age” type=“number”
.trim	如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符	v-model.trim=“msg”