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请求 ...
随机推荐
- C#里XML(JSON)序列化时，自动隐藏值为Null的成员的输出
从StackOverflow里找到的答案.发现对最新的Newtownsoft的JSON序列化也同样适用. https://stackoverflow.com/questions/5818513/xml ...
- codeforces379C
New Year Ratings Change CodeForces - 379C One very well-known internet resource site (let's call it ...
- Keepalived+Haproxy高可用负载均衡群集
介绍 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会 ...
- 微信小程序——常用快捷键【四】
格式调整 ctrl+[, ctrl+]:代码行缩进(向前|向后) ctrl+shift+[, ctrl+shift+] :折叠打开代码块 ctrl+C, ctrl+V:复制粘贴,如果没有选中任何文件则 ...
- [luogu3157][bzoj3295][CQOI2011]动态逆序对【cdq分治+树状数组】
题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...
- python 逻辑运算符问题
1 正确 if('A' not in self.storageDevice.softVersion or\ 'B' not in self.storageDevice.softVersion or\ ...
- luogu5022 [NOIp2018]旅行 (dfs)
m=n-1的时候,就直接贪心地dfs就可以 m=n的话,就可以枚举删掉一条边,然后照着m=n-1做 $O(n^2)$大概能过 (然而我眼瞎看不到m<=n) #include<cstdio& ...
- bzoj1014 火星人 (hash+splay+二分答案)
求公共前缀的问题可以用hash+二分来解决,但这个是动态的,所以我们用平衡树来维护区间的hash值 复杂度$O(mlog^2n)$ #include<bits/stdc++.h> #def ...
- django 模板语言
母版与继承: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 通俗讲解MOSFET
一位工程师曾经对我讲,他从来不看MOSFET数据表的第一页,因为“实用”的信息只在第二页以后才出现.事实上,MOSFET数据表上的每一页都包含有对设计者非常有价值的信息.但人们不是总能搞得清楚该如何解 ...