Vue.js method to obtain DOM: 1. Define the ref attribute in the original tag pair or sub-component in HTML, and use [this.$refs] after the [mounted(){}] method to obtain the DOM element ;2. Mounted continues to use [this.$refs] after modifying the content of the component.
【Related article recommendations: vue.js】
vue.js gets dom Method:
Define the ref attribute in the original tag pair or subcomponent in HTML, and use this.$refs after the mounted(){} method or this method. Specifically The ref value is used to obtain the DOM element. Because when using the previous hook function of mounted, the component has not been mounted on the DOM, so naturally the elements on the DOM cannot be obtained through $refs;
-
What needs to be distinguished is that printing this .$refs. The specific ref value. If it is an original tag pair, the output result is the original tag pair. If the ref attribute is in a sub-component tag, the output is the component object, not the content in the component's corresponding template;
this.$refs outputs a collection of tags or subcomponents that define the ref attribute contained in the current component;
During the component rendering process , for example, after modifying the content of the component during mounting, continue to use
this.$refs. The ref corresponding to the modified component. At this time, what is obtained is the DOM element before modification. In order to obtain the modified DOM element , you must use the this.$nextTick() method, and use this.$refs in the callback function of this method. At this time, the modified DOM element is obtained. Of course, you can get the modified DOM elements under the updated function, but in some specific scenarios you need to get the modified DOM elements in mounted;
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue组件中获取DOM元素的方式之$refs的使用</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('Btn',{
template:`
<button>我是按钮</button>
`
})
let App = {
data:function() {
return {
isShow:false
}
},
template:`
<div>
<input type='text' ref='input1'/>
<input type='text' ref='input2' v-show='isShow'/>
<Btn ref='btn1'/>
</div>
`,
//对应输出结果为下面第一张图
// mounted:function() {
// console.log(this.$refs)
// console.log(this.$refs.input1)
// console.log(this.$refs.input2)
// console.log(this.$refs.btn1)
// }
mounted:function() {
// 修改ref=input2的v-show值，让其显示, 接着获取该DOM并让其获得焦点,但是没法获得焦点，这是因为mounted内无法获得更新DOM后的DOM元素，这个时候需要调用this.$nextTick方法，在其回掉函数中重新执行代码this.$refs.input2.focus()
this.isShow = true
// this.$refs.input2.focus()
this.$nextTick(function() {
this.$refs.input2.focus()
})
},
}
let vm = new Vue({
el:'#app',
data:function() {
return {
}
},
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>corresponds to the annotated mounted The content in
The use of this.$nextTick in mounted allows the updated DOM elements to be obtained in mounted. Let the updated DOM element get focus in this code
Related free learning recommendations:javascript(Video)
The above is the detailed content of How to get dom in vue.js. For more information, please follow other related articles on the PHP Chinese website!
总结分享几个 VueUse 最佳组合，快来收藏使用吧！Jul 20, 2022 pm 08:40 PMVueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合，希望对大家有所帮助！
聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PMVue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。
Github 上 8 个不可错过的 Vue 项目，快来收藏！！Jun 17, 2022 am 10:37 AM本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目，都是非常棒的项目，希望当中有您想要收藏的那一个。
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何使用VueRouter4.x？快速上手指南Jul 13, 2022 pm 08:11 PM如何使用VueRouter4.x？下面本篇文章就来给大家分享快速上手教程，介绍一下10分钟快速上手VueRouter4.x的方法，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
Dreamweaver Mac version
Visual web development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Notepad++7.3.1
Easy-to-use and free code editor
Zend Studio 13.0.1
Powerful PHP integrated development environment
