使用Vue了一段时间，感觉确实不错，“数据驱动视图”非常好用，大部分情况下都不需要关心dom，但是凡事都有例外，总有一些时候我们必须要直接对dom进行操作，比如下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vPager</title>
<script src="vue.js"></script>
<script src="vCheckBox.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>名称</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td>{{row.text}}</td>
<td>
<input v-model.number="row.count" type="number" />
<label style="color:red" v-show="row.count<0">数量不能为负数</label>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=" 2 " style="text-align:center ">
<button @click="submit ">提交</button>
</td>
</tr>
</tfoot>
</table>
<script>
var table = new Vue({
el: "table ",
data: {
rows: [
{ text: "苹果 ", count: 0 },
{ text: "香蕉 ", count: 0 },
{ text: "桃子 ", count: 0 }
]
},
methods: {
submit: function () {
var rows = this.rows;
var arr = ["您需要的水果是:"];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.count < 0) {
return;
}
arr.push(row.text + ": " + row.count + "个");
}
alert(arr.join("\n"));
}
}
});
</script>
</body>
</html>
这是一段很简单的示例，运行效果如下：
现在增加一个需求：
当某行count小于0时，点击提交按钮，将小于0的输入框激活（获得焦点）。
难道要为每一个input设置一个id或者别的属性？然后用jQuery去操作它？这岂不是非常坑爹？
呵呵，当然不用，借助自定义指令可以比较轻松的完成这件事：
Vue.directive('dom', {
bind: function (el, binding) {
var obj = binding.value;
if (obj != null) {
var key = Object.keys(binding.modifiers)[0] || "el";
Vue.set(obj, key, el);
}
}
});
注册一个全局自定义指令v-dom，并且这个指令可以用一个修饰符拓展，它的作用是在指令被绑定到元素时，将被绑定的dom元素添加到指定的对象的属性中去，属性名就是修饰符名称，如果不存在修饰符时默认为el；
然后将第一部分的代码做如下修改：
<input v-dom="row" v-model.number="row.count" type="number" />
表示将input元素保存到row对象的属性el里；
然后修改submit部分的代码：
methods: {
submit: function () {
var rows = this.rows;
var arr = ["您需要的水果是:"];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.count < 0) {
row.el.focus(); //获得焦点
row.el.select(); //全选
return;
}
arr.push(row.text + ": " + row.count + "个");
}
alert(arr.join("\n"));
}
}
执行效果：
已经获得了焦点
从控制台中也可以看到rows中的每一个对象都已经拥有了el属性
PS：如果不希望使用el为属性名可以使用修饰符自定义属性名称
<input v-dom.input="row" v-model.number="row.count" type="number" />
相应的，在取值的时候需要使用row.input来获取dom元素。