Vue 学习笔记 — 无法避免的dom操作

简书

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

posted @ 2017-04-15 07:52 冰麟轻武阅读(21996) 评论(1) 编辑收藏举报

冰麟轻武

Vue 学习笔记 — 无法避免的dom操作

公告