第七章：处理表单和自定义指令
有话说在前面
表单是非常重要的一项，尤其是当你需要提交数据到后台的时候，双向绑定input，select，checkbox等表单元素，再也不用像jquery一样每一个id去挨个获取value了。
阅读本章节，你会了解更多vue绑定表单元素的方法。
双向绑定到表单元素
前面已经讲过：你可以在表单的 input 元素上使用 v-model 指令来创建双向数据绑定。它会根据 input 元素的类型自动选取正确的绑定模式。
<form id="demo">
<!-- text -->
<p>
<input type="text" v-model="msg">
{{msg}}
</p>
<!-- checkbox -->
<p>
<input type="checkbox" v-model="checked">
{{checked ? "yes" : "no"}}
</p>
<!-- radio buttons -->
<p>
<input type="radio" name="picked" value="one" v-model="picked">
<input type="radio" name="picked" value="two" v-model="picked">
{{picked}}
</p>
<!-- select -->
<p>
<select v-model="selected">
<option>one</option>
<option>two</option>
</select>
{{selected}}
</p>
<!-- multiple select -->
<p>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
{{multiSelect}}
</p>
<p><pre>data: {{$data | json 2}}</pre></p>
</form>
new Vue({
el: '#demo',
data: {
msg : 'hi!',
checked : true,
picked : 'one',
selected : 'two',
multiSelect: ['one', 'three']
}
})
惰性更新
默认情况下，v-model 会在每个 input 事件之后同步输入的数据。你可以添加一个 lazy 特性，将其改变为在 change 事件之后才进行同步。
<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>
转换为数字
如果你希望将用户的输入自动转换为数字，你可以在 v-model 所在的 input 上添加一个 number 特性。
<input v-model="age" number>
动态 select 选项
当你需要为一个 <select> 元素动态渲染列表选项时，推荐将 options 特性和 v-model 指令配合使用，这样当选项动态改变时，v-model 会正确地同步：
<select v-model="selected" options="myOptions"></select>
在你的数据里，myOptions 应该是一个指向选项数组的路径或是表达式。
该数组可以包含普通字符串或对象。对象的格式应为 {text:'', value:''}。这允许你把展示的文字和其背后对应的值区分开来。
[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
会渲染成：
<select>
<option value="a">A</option>
<option value="b">B</option>
</select>
另外，数组里对象的格式也可以是 {label:'', options:[...]}。这样的数据会被渲染成为一个 <optgroup>：
[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]
会渲染成：
<select>
<optgroup label="A">
<option value="a">a</option>
<option value="b">b</option>
</optgroup>
<optgroup label="B">
<option value="c">c</option>
<option value="d">d</option>
</optgroup>
</select>
你的原始数据很有可能不是这里所要求的格式，因此在动态生成选项时必须进行一些数据转换。为了简化这种转换，options 特性支持过滤器。将数据的转换逻辑做成一个可复用的 自定义过滤器 。通常来说是个好主意：
Vue.filter('extract', function (value, keyToExtract) {
return value.map(function (item) {
return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract 'name'">
</select>
上述过滤器将像 [{ name: 'Bruce' }, { name: 'Chuck' }] 这样的原始数据转化为 ['Bruce', 'Chuck']，从而符合动态选项的格式要求。
输入 Debounce
<input v-model="msg" debounce="500">
注意 debounce 参数并不对用户的输入事件进行 debounce：它只对底层数据的 “写入” 操作起作用。因此当使用 debounce 时，你应该用 vm.$watch() 而不是 v-on 来响应数据变化。
自定义指令
以下那内容你了解即可，反正我没有用到，如果你的项目中可能真的出现了相关规范需要你去开饭新的指令，请使用以下方法：
| 指令名 | |
|---|---|
| bind | 仅调用一次，当指令第一次绑定元素的时候。 |
| update | 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会被调用，获得新值与旧值两个参数。 |
| unbind | 仅调用一次，当指令解绑元素的时候。 |
例子：
Vue.directive('my-directive', {
bind: function () {
// 做绑定的准备工作
// 比如添加事件监听器，或是其他只需要执行一次的复杂操作
},
update: function (newValue, oldValue) {
// 根据获得的新值执行对应的更新
// 对于初始值也会被调用一次
},
unbind: function () {
// 做清理工作
// 比如移除在 bind() 中添加的事件监听器
}
})
一旦注册好自定义指令，你就可以在 Vue.js 模板中像这样来使用它（需要添加 Vue.js 的指令前缀，默认为 v-）：
<div v-my-directive="someValue"></div>
如果你只需要 update 函数，你可以只传入一个函数，而不用传定义对象：
Vue.directive('my-directive', function (value) {
// 这个函数会被作为 update() 函数使用
})
所有的钩子函数会被复制到实际的指令对象中，而这个指令对象将会是所有钩子函数的this
上下文环境。指令对象上暴露了一些有用的公开属性：
| 指令名 | 作用 |
|---|---|
| el | 指令绑定的元素 |
| vm | 拥有该指令的上下文 ViewModel |
| expression: | 指令的表达式，不包括参数和过滤器 |
| arg | 指令的参数 |
| raw | 未被解析的原始表达式 |
| name | 不带前缀的指令名 |
这些属性是只读的，不要修改它们。你也可以给指令对象附加自定义的属性，但是注意不要覆盖已有的内部属性。
使用指令对象属性的示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<div id="demo" v-demo-directive="LightSlateGray : msg"></div>
<script>
Vue.directive('demoDirective', {
bind: function () {
this.el.style.color = '#fff'
this.el.style.backgroundColor = this.arg
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'raw - ' + this.raw + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'value - ' + value
}
});
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
</script>
</body>
</html>
网友评论