使用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元素。