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请求 ...
随机推荐
- HTML——标签说明
基本 <html>…</html> 定义 HTML 文档 <head>…</head> 文档的信息 <meta> ...
- DotNetty 实现 Modbus TCP 系列 (三) Codecs & Handler
本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 DotNetty 作为一个半成品,我们不需要关注细节的实现,只需要关注自己的业务即可,所以最主要的就是处理 Codecs ...
- JS 强制类型转化
在Js中, 强制类型转化分为两种情况: 一种是引用类型转化基本类型, 如数组转化成数字:一种是两种不同基本类型之间的转化,如字符串转化为数字.你不能将基本类型转化成引用类型,比如,不可能把数字转化为数 ...
- codeforces401C
Team CodeForces - 401C Now it's time of Olympiads. Vanya and Egor decided to make his own team to ta ...
- ie11的版本判断
我的电脑昨天更新的时候把ie11给更新出来了,然后发现我的skylineweb项目提示我的浏览器不是ie,这样显然是浏览器检测出现了问题.查找后找到了下面的解决方法.大家的电脑如果也更新成了ie11的 ...
- 了解AutoCAD对象层次结构 —— 1 ——应用程序
想象这样一个场景:当您开始一天的工作,坐到电脑前面,用鼠标双击桌面上的AutoCAD Civil 3D图标,这时一个AutoCAD Civil 3D应用程序将运行起来.打开Windows任务管理器,我 ...
- linq之group by 的使用
group by var list = from s in _sysBll.GetList(s => s.ParamID == "TraSchType" && ...
- 蒟阵P3390 【模板】矩阵快速幂
代码如下: #include<iostream> #include<cstdio> #include<cstdlib> #include<cmath> ...
- 前端 -- BOM和DOM
一,引入 到目前为止,已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- 【BZOJ1426】收集邮票 期望DP
题目大意 有\(n\)种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是\(n\)种邮票中的哪一种是等概率的,概率均为\(\frac{1} ...