Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
一、前言
这篇文章涉及的主要内容有：
1、ref绑定在标签上是获取DOM对象
2、ref绑定在子组件上获取的是子组件对象
3、案列：自动获取input焦点
二、主要内容
1、基础内容：
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
（1）将ref绑定到标签上：测试之后发现在mounted()函数之后拿到的是button对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script>
var App = {
template:`
<div class='app'>
<button ref='btn'>我是按钮1</button>
</div>`, created(){
console.log(this.$refs.btn)
}, beforeMount:function(){
console.log(this.$refs.btn);
}, mounted(){
console.log(this.$refs.btn)//在这里才能拿到$refs.xxx
}
} new Vue({
el:'#app',
data(){
return { }
}, template:'<App />',
components:{
App
}
})
</script> </body>
</html>
（2）将ref绑定到子组件上：拿到的是子组件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('subCom',{
data(){
return{ }
}, template:`<div>
这是子组件 </div>`
}); var App = {
data(){
return{ }
},
template:`<div>
<button ref='btn'>我是按钮1</button>
<button ref='btn2'>我是按钮2</button>
<subCom ref='a'></subCom> </div>`,//这里拿到的是子组件对象
created(){
console.log(this.$refs.btn);
}, beforeMount(){
console.log(this.$refs.btn);
},
mounted(){
console.log(this.$refs.btn);
console.log(this.$refs.btn2);
console.log(this.$refs.a);
}
} new Vue({
el:'#app',
data(){
return{}
},
template:'<App/>',
components:{
App }
})
</script> </body>
</html>
2、自动获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var App = {
data: function (){
return {
isShow:false
}
},
template:`<div class='app'>
<input type='text' v-show='isShow' ref = 'input'/> </div>`,
//$nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据后使用$nextTick可以获取更新之后的DOM
mounted:function(){
this.isShow = true;
console.log(this.$refs.input);
this.$nextTick(function() {
this.$refs.input.focus();
})
}
}
new Vue({
el:'#app',
data:function(){
return { }
}, template:'<App/>',
components:{
App
}
});
</script> </body>
</html>
三、总结
1、ref不能重名，重名后面会覆盖掉前面的
2、ref绑定到标签上，$refs.xxx获取到的是Dom对象
3、ref绑定到子组件上，获取到的是子组件实例对象
4、$nextTick([callback])是下一次dom对象更新后执行里面的回调函数
Vue(基础五)_vue中用ref和给dom添加事件的特殊情况的更多相关文章
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- vue基础五
条件渲染 1.v-if 1.1<template>中v-if条件组 因为 v-if 是一个指令,需要将它添加到一个元素上.但是如果我们想切换多个元素呢?此时我们可以把一个<templ ...
- Vue之获取DOM元素与更新DOM后事件的特殊情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
随机推荐
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- Docker 部署应用、jar 工程 docker 方式部署
https://blog.csdn.net/jiangyu1013/article/details/81988342
- PHP——emjoin表情存入数据库
前言 还有一种解决的方法是更改数据库,这里就不写了,这里直接对emoji进行转码 代码 mb_strlen() | strlen() | rawurlencode() | rawurldecode() ...
- Fence Repair POJ - 3253 哈夫曼思想 优先队列
题意:给出一段无限长的棍子,切一刀需要的代价是棍子的总长,例如21切一刀 变成什么长度 都是代价21 列如7切成5 和2 也是代价7题解:可以利用霍夫曼编码的思想 短的棍子就放在底层 长的尽量切少一次 ...
- Tmutarakan Exams URAL - 1091（莫比乌斯函数 || 容斥）
题意: 求1 - s 中 找出k个数 使它们的gcd > 1 求这样的k个数的对数 解析: 从每个素数的倍数中取k个数 求方案数 然后素数组合,容斥一下重的 奇加偶减 莫比乌斯函数的直接套模 ...
- [USACO07JAN]Cow School
题目链接:[USACO07JAN]Cow School 一开始还以为是一道分数规划,后来发现自己看错题了, 然后成功入坑 题目是要求先按照$t_i/p_i$从小到大排序,然后删除前$d$个后求出剩下的 ...
- luogu P2680 运输计划 (二分答案+树上差分）
题目背景 公元 20442044 年,人类进入了宇宙纪元. 题目描述 公元20442044 年,人类进入了宇宙纪元. L 国有 nn 个星球,还有 n-1n−1 条双向航道,每条航道建立在两个星球之间 ...
- C#中equal与==的区别
C#中equal与==的区别 来源 https://www.cnblogs.com/dearbeans/p/5351695.html C#中,判断相等有两种方式,一种是传统的==操作,一种是objec ...
- PhoneGap & Cordova 安装白皮书
1.前题: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用 iPhone,Android,Palm,Symbian, ...
- CS Academy Sliding Product Sum（组合数）
题意 有一个长为 \(N\) 的序列 \(A = [1, 2, 3, \dots, N]\) ,求所有长度 \(\le K\) 的子串权值积的和,对于 \(M\) 取模. \(N \le 10^{18 ...