Vue学习笔记（九） - 表单控件绑定

发表于 2016-09-02

表单中，可以使用 v-model 指令在控件中创建双向数据绑定。

基础用法

给 v-model 指令绑定一个变量

Text

<input type="text" v-model="message" placeholder="edit me">

Multiline text

<textarea v-model="message" placeholder="add multiple lines"></textarea>

Checkbox

单个时：

<input type="checkbox" id="checkbox" v-model="checked">

多个时，绑定到一个数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

Radio

<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">

Select

单选：

<select v-model="selected">
	<option selected>A</option>
	<option>B</option>
	<option>C</option>
</select>

多选（绑定到同一个数组）：

<select v-model="selected" multiple>
	<option selected>A</option>
	<option>B</option>
	<option>C</option>
</select>

绑定 Value

v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）
要绑定一个动态属性的话应该是用 v-bind

参数特性

lazy

在默认情况下，v-model 在 input 事件中同步输入框值与数据，可以添加一个特性 lazy，从而改到在 change 事件中同步：

<input v-model="msg" lazy>

number

如果想自动将用户的输入转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个特性 number：

<input v-model="age" number>

debounce

debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

<input v-model="msg" debounce="500">

注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。因此在使用 debounce 时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件，应当使用 debounce 过滤器。

Vue学习笔记（八） - 方法与事件处理器

发表于 2016-09-01

方法处理器

v-on 指令监听 DOM 事件：

<div id="example">
<button v-on:click="greet"> Greet </button>
</div>

var vm = new Vue({
	el: '#example',
	data:{
		name: 'Vue.js'
	},
	methods: {
		greet: function(event){
			alert('Hello ' + this.name + '!');
			alert(event.target.tagName);
		}
	}
})
vm.greet()	// 可以自己在 JavaScript 代码调用

内联语句处理器

即类似一个内联表达式，可以为事件处理器传入参数，如：

<button v-on:click="say('哦嗨哟')"> say something </button>

另外，在这里可以给其传入一个特殊变量 $event，可以访问原生事件对象，如：

<button v-on:click="say('哦嗨哟', $event)"> say something </button>

事件修饰符

使用指令后缀：
阻止事件冒泡 - .prevent
取消默认行为 - .stop
e.g.

<a v-on:click.stop.prevent="doSth"></a>

Vue 1.0.16+ 新增了两个
添加事件侦听器时使用 capture 模式 - .capture
只当事件在该元素本身（非子元素）触发 - .self

按键修饰符

当监听的事件是 keyup 键盘事件时，可以在后面加上按键修饰符。
按键修饰符可以是 keyCode，也可以是按键别名。

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

Vue.js 的按键别名：

enter
tab
delete
esc
space
up
down
left
right

P.s.
1.0.8+：支持单字母按键别名

<input v-on:keyup.a="submit"/>
<!-- 按“A”“a”都会触发 -->

1.0.17+：可以自定义按键别名
为 F1 键设置别名：

Vue.directive('on').keyCodes.f1 = 112
==> <input v-on:keyup.f1="doSth">

使用 v-on 的好处

根据模版可以轻松定位在 JavaScript 对应的方法
无须在 JavaScript 手动绑定事件
ViewModel 被销毁时，所有事件处理器都会自动被删除

Vue学习笔记（七） - 列表渲染

发表于 2016-08-31

一般形式

使用 v-for 来遍历一个数组或者对象以渲染一个列表。
形式： item in items
解释： item - 元素的别名 items - 数组/对象
其中，Vuejs 还给我们提供了一个特殊变量 $index，为当前数组元素的索引

<ul id="example">
	<li v-for="item in items">
		{{ parentMessage }} - {{ $index }} - {{ item.message }}
	</li>
</ul>

var example = new Vue({
	el: '#example',
	data: {
		parentMessage: 'Parent',
		item: [
			{ message: 'Foo' },
			{ message: 'Bar' }
		]
	}
})

也可以为索引指定一个别名：

<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>

Addition: 1.0.17 开始可以使用 v-for=”item of items”

模版 template v-for

结合 template 标签作为包裹块，可以实现渲染一个包含多个元素的模版：

<ul>
	<template v-for="item in items">
		<li> {{ item.text }} </li>
		<li class="divider"> </li>
	</template>
</ul>

数组变动检测

变异方法

所谓“变异方法”（名称来自 Vue.js 的中文 API），就是调用一些属性方法后，原始的数组会产生变化。
Vue.js 对被观察数组的这些变异方法进行了加工，使用这些方法时可以触发视图的更新，包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
( sort 在 Chrome 不会触发更新，火狐可以）

替换数组

使用新数组替换旧数组时，也可以触发视图的更新。
Vue.js 内部实现了一些启发算法，最大化地复用 DOM 元素，因此不必担心替换数组会因为重新渲染 DOM 而带来的性能问题。
（列表性能优化原理，http://gold.xitu.io/entry/5776187cd342d30058d50fd2）

因此，在使用一些不会修改原始数组的方法时，可以直接用获得的新数组来替换旧数组。

track by

绑定一个作为唯一 ID 的属性，从而可以使 Vue.js 尽可能地复用已有实例。

track by $index

问题

“因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：”(WHY?- -)

直接用索引设置元素，如： vm.items[0] = {};
修改数据的长度，如： vm.items.length = 0;

To solve Q1，可以使用 Vue.js 数组的 $set() 方法：
example.items.$set( key, data )
key - 键值或者索引
data - 要赋予其的数据

To solve Q2，只需要直接用一个空数组来替换 items

对象 v-for

遍历对象时，除了可以访问到 $index，也可以访问到 $key

值域 v-for

v-for 接收一个正整数，可以输出范围内的所有整数

过滤/排序

方法：
创建一个计算属性，返回过滤/排序过的数组
使用内置的过滤器 filterBy 和 orderBy

Vue学习笔记（六） - 条件渲染

发表于 2016-08-30

条件渲染，即根据指定的表达式的真假，来决定元素的渲染与否、显示与否

v-if

单个元素：
控制元素渲染与否，如果为否，则该元素不会出现在文档中

<h1 v-if="isHave">sth.</h1>
<h1 v-else>sb.</h1>

多个元素：
由于 v-if 只是一个指令，因此只能用于单个元素。
但若要切换多个元素的话，可以使用一个 \ 来作为包装元素，对其使用 v-if，则可以实现多个元素切换。
（随便一个 div 貌似也可以做到，但是与 template 的区别在于，前者会保留在渲染结果，而 template 不会。因此用 template 会更好）

v-show

用法基本和 v-if 一致，除了不支持 \ 语法。
只是控制元素的 display 属性，元素始终渲染在 DOM 中。

v-else

必须和 v-if、v-show 连用。

组件警告

// 此处省略

Conclusion

运行时条件改变的可能性不大—— v-if
频繁切换—— v-show

Vue学习笔记（五） - Class 与 Style 绑定

发表于 2016-08-29

绑定 HTML Class

绑定方式：

class="{{ className }}"    ||    v-bind:class="className"

使用文本插值的方式绑定 class时，由于输出的是文本，因此不能支持对象的输出，无法动态获取和改变 class。因此，要动态切换 class 的值，应该使用 v-bind:class 指令。因此下面也只是针对 v-bind:class 来讲。

对象语法

可以为 v-bind:class 传入一个对象表达式，以此实现动态切换 class：

<div class="test" v-bind:class="{ 'classA': isA, 'classB': isB }"></div>

data: {
    isA: true,
    isB: false
}
```  
==>


也可以直接绑定数据 data 里的一个对象：

```   
data: {
    classObj: {
        'classA': true,
        'classB': false
    }
}
```   
==>


## 数组语法
v-bind:class 也可以传入一个数组：

``` 
data: {
    classA: 'class-a',
    classB: 'class-b'
}

==>

<div class="class-a class-b"></div>

ps. 也可以使用三元表达式：

绑定内联样式

v-bind:style
CSS 属性名可以使用驼峰式（camelCase）或者短横分隔命名（kebab-case）

对象语法

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

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

同样，也可以直接绑定一个 data 中的样式对象给它

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

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

数组语法

可以同时将多个样式对象应用到一个元素上（注：可以实现样式的共用）

<div v-bind:style="[ styleObjA, styleObjB ]"></div>

自动添加前缀

Vue.js会自动侦测并添加相应的厂商前缀 if needed.

Andre Huang

GitHub