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请求 ...
随机推荐
- JS--innerHTML属性
innerHTML属性,不是DOM的组成部分(常用) 获取标签里的文本内容,var span=document.getElementById("span").innerHTML; ...
- cuda编程-矩阵乘法（2）
采用shared memory加速 代码 #include <stdio.h> #include <stdlib.h> #include <math.h> #inc ...
- centOS7 下配置和启动maria数据库
从最新版本的linux系统开始,默认的是 Mariadb而不是mysql! 使用系统自带的repos安装很简单: yum install mariadb mariadb-server systemct ...
- Python读取excel中的图片
作为Java程序员,Java自然是最主要的编程语言.但是Java适合完成大型项目,对于平时工作中小的工作任务,需要快速完成,易于修改和调试,使用Java显得很繁琐,需要进行类的设计,打成jar包,出现 ...
- LIRE图片识别搜索demo--Ubuntu开发
Ubuntu安装shadowsocks客户端/服务端教程 1.安装shadowsocks sudo apt-get update sudo apt-get install python-pip sud ...
- js弹框的3种方法
js的三种弹框的方法 1.第一种 : alert("1"); 2.第二种 : window.open("Tests2.html"); var r = con ...
- 吉哥系列故事――恨7不成妻 HDU - 4507 数位dp
思路 和普通的DP不一样的是 这里求的是满足条件的数的平方的和 而数位DP只跟数每位是什么密切相关 所以要开一个结构 (多加一个 数的和sum 和平方和qsum)存一下各个状态的和的情况 dp[p ...
- 非阻赛IO模型
实例一: 只能在waitdata 阶段找到IO的解决方案 from concurrent.futures import ThreadPoolExecutor import socket server ...
- King of Destruction HDU - 3002 && HDU - 3691（全局最小割）
求无向图的最小割 有没有源点都一样,不影响 #include <iostream> #include <cstdio> #include <sstream> #in ...
- MT【273】2014新课标压轴题之$\ln2$的估计
已知函数$f(x)=e^x-e^{-x}-2x$(1)讨论$f(x)$的单调性;(2)设$g(x)=f(2x)-4bf(x),$当$x>0$时,$g(x)>0,$求$b$的最大值;(3)已 ...