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元素。
Vue 学习笔记 — 无法避免的dom操作的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- 《JavaScript权威指南》学习笔记 第七天 DOM操作
由衷的觉得,随着IT技术的广泛的运用,个人电脑以及智能手机的使用,信息的获取与传播更为简单.但是我们获取有用信息的难度相反是越来越大了,想要保持住自己的注意力越来越难了.除了吃饭睡觉,我的精力都在电脑 ...
- js学习笔记之日期倒计时DOM操作
1.访问html元素 getElementById() 方法 返回对拥有指定 id 的第一个对象的引用,只有dom对象有效 getElementsByName() 方法 返回指定名称的对象集合 g ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- 第三次java作业
编写“学生”类及其测试类. 5.1 “学生”类: ² 类名:Student ² 属性:姓名.性别.年龄.学号.5门课程的成绩 ² 方法1:在控制台输出各个属性的值. ² 方法2:计算平均成绩 ² 方法 ...
- Web开发疑难问题解决方案-(最近更新:2018-11-29)
这篇文章用来记录Web(包括PC和移动端)开发过程中遇到的一些疑难问题的解决方案. P1. '1像素边框'问题 P2.只读输入框在ios上的莫名表现 P3.自适应高度的textarea P4. CSS ...
- RAID磁盘阵列及CentOS7系统启动流程
磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意,,数据读取无影响.将数据切割成许多区段,分别存放在各个硬盘 ...
- js监听用户思否在当前页面
(function () { var t var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in docume ...
- Kubernetes 1.10.0离线安装
讲述如何通过离线的方式安装Kubernetes,主要用于对Kubernetes的研究学习,不建议在生产环境使用,安装包获取地址: 链接:https://pan.baidu.com/s/1nX5_mem ...
- CentOS 7安装OpenCV 3.3.1
1.CentOS具体版本: 2.安装步骤: 1).安装依赖: sudo yum groupinstall "Development Tools" -y sudo yum insta ...
- URL包里的URL.getpath()对路径中空格识别为%20的处理办法
方法(1),使用repaceAll("%20",' ')替换后,只能解决空格问题.但是路径中包含%和中文就不行了. 方法(2),使用URLDecoder.decode(str,&q ...
- Codeforces 258D Little Elephant and Broken Sorting （看题解） 概率dp
Little Elephant and Broken Sorting 怎么感觉这个状态好难想到啊.. dp[ i ][ j ]表示第 i 个数字比第 j 个数字大的概率.转移好像比较显然. #incl ...
- android studio 开发免安装的app之目录结构
尚未深入分析,暂且外链到我看到的,对此有帮助的博客,在此,感谢你们. 1.https://blog.csdn.net/tscyds/article/details/74331085 2.https:/ ...
- Linux环境下Hadoop集群搭建
Linux环境下Hadoop集群搭建 前言: 最近来到了武汉大学,在这里开始了我的研究生生涯.昨天通过学长们的耐心培训,了解了Hadoop,Hdfs,Hive,Hbase,MangoDB等等相关的知识 ...