简书

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

Vue 学习笔记 — 无法避免的dom操作的更多相关文章

  1. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  2. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  3. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  4. 《JavaScript权威指南》学习笔记 第七天 DOM操作

    由衷的觉得,随着IT技术的广泛的运用,个人电脑以及智能手机的使用,信息的获取与传播更为简单.但是我们获取有用信息的难度相反是越来越大了,想要保持住自己的注意力越来越难了.除了吃饭睡觉,我的精力都在电脑 ...

  5. js学习笔记之日期倒计时DOM操作

    1.访问html元素 getElementById() 方法  返回对拥有指定 id 的第一个对象的引用,只有dom对象有效 getElementsByName() 方法  返回指定名称的对象集合 g ...

  6. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  7. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  8. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  9. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

随机推荐

  1. python sys.argv[]简单解释

    上一篇UDP编程中简单使用了一些sys模块的argv参数,也是我第一次看见这个参数,这里做个记录: sys.argv是一个从程序外部获取参数的桥梁,这个“外部”很关键, 因为我们从外部取得的参数可以是 ...

  2. Tomcat设置Windows下随系统自启

    一:确保tomcat 在点击bin\startup 文件可以正常启动访问: 二:本机安装有JDK: 三:本机环境变量配置:JAVA_HOME:C:\Java\jdk1.7.0_17; 四:本机Tomc ...

  3. How does rt.jar works?

    转载自:https://stackoverflow.com/questions/30222702/how-does-java-link-lib-rt-jar-to-your-app-at-runtim ...

  4. 利用js实现 禁用浏览器后退

    现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退, ...

  5. URL包里的URL.getpath()对路径中空格识别为%20的处理办法

    方法(1),使用repaceAll("%20",' ')替换后,只能解决空格问题.但是路径中包含%和中文就不行了. 方法(2),使用URLDecoder.decode(str,&q ...

  6. XYZZY spfa 最长路 判环

    题意: 有n个点  m条边  每个边有权值 一开始有一百血  每次经过一条路都会加上其权值 判断是否能够到达n 显然  有正环的时候肯定能够到达 最短路好题!!!!!!! 显用folyed判断是否联通 ...

  7. NRF51822模块无法识别问题解决办法

    我知道没图是没人看的,所以随便瞎截图了几张. 对于很多新手朋友们,或许可能还不是很了解jtag相关的一些调试所需的必须电路,就像很多人不喜欢用stm32的硬件i2c,而是喜欢软件io模拟,就算是使用了 ...

  8. （二）shell中的变量

    1.常用系统变量 $HOME.$PWD.$SHELL.$USER等 2.自定义变量 基本语法: (1)定量变量:变量=值 (2)撤销变量:unset 变量 (3)声明静态变量:readonly变量 注 ...

  9. [开源]使用C# 对CPU卡基本操作封装

    Github 地址:https://github.com/zifeiniu/CPUCardLib 项目需求及简介: 公司要求将用户相关的信息储存到射频卡中,之前项目使用的Mifare类型卡,只储存了用 ...

  10. ARTS Challenge- Week 1 (2019.03.25~2019.03.31)

    1.Algorithm - at least one leetcode problem per week(Medium+) 986. Interval List Intersections https ...