使用Vue了一段時(shí)間武福，感覺(jué)確實(shí)不錯(cuò)议双，“數(shù)據(jù)驅(qū)動(dòng)視圖”非常好用，大部分情況下都不需要關(guān)心dom捉片，但是凡事都有例外平痰，總有一些時(shí)候我們必須要直接對(duì)dom進(jìn)行操作编曼，比如下面這個(gè)例子：
<!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>數(shù)量</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">數(shù)量不能為負(fù)數(shù)</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: "蘋(píng)果 ", 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 + "個(gè)");
}
alert(arr.join("\n"));
}
}
});
</script>
</body>
</html>
這是一段很簡(jiǎn)單的示例矮冬，運(yùn)行效果如下：
現(xiàn)在增加一個(gè)需求：
當(dāng)某行count小于0時(shí)画舌，點(diǎn)擊提交按鈕孕锄，將小于0的輸入框激活（獲得焦點(diǎn)）。
難道要為每一個(gè)input設(shè)置一個(gè)id或者別的屬性逾礁？然后用jQuery去操作它？這豈不是非撤孟В坑爹嘹履？
呵呵，當(dāng)然不用债热，借助自定義指令可以比較輕松的完成這件事：
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);
}
}
});
注冊(cè)一個(gè)全局自定義指令v-dom砾嫉，并且這個(gè)指令可以用一個(gè)修飾符拓展，它的作用是在指令被綁定到元素時(shí)窒篱，將被綁定的dom元素添加到指定的對(duì)象的屬性中去焕刮，屬性名就是修飾符名稱，如果不存在修飾符時(shí)默認(rèn)為el墙杯；
然后將第一部分的代碼做如下修改：
<input v-dom="row" v-model.number="row.count" type="number" />
表示將input元素保存到row對(duì)象的屬性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(); //獲得焦點(diǎn)
row.el.select(); //全選
return;
}
arr.push(row.text + ": " + row.count + "個(gè)");
}
alert(arr.join("\n"));
}
}
執(zhí)行效果：
已經(jīng)獲得了焦點(diǎn)
從控制臺(tái)中也可以看到
rows中的每一個(gè)對(duì)象都已經(jīng)擁有了el屬性
PS：如果不希望使用el為屬性名可以使用修飾符自定義屬性名稱
<input v-dom.input="row" v-model.number="row.count" type="number" />
相應(yīng)的，在取值的時(shí)候需要使用row.input來(lái)獲取dom元素高镐。
