Home >Web Front-end >Vue.js >How to get dom in vuejs
Vuejs method of obtaining dom: 1. In the DOM part of the component, write "ref="xxx"" in any tag; 2. Get the element through the component object "this.$refs.xxx". Can.
The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.
Vue.js Example Learning: Get DOM Elements
##1. Get DOM Elementsref.
(1) In the DOM part of the component, write in any tag:
ref="xxx" (2) Through the component Object
this.$refs.xxx Get the element
<div id="app"></div> <script type="text/javascript"> let App = { template: ` <div> <button ref="btn">我是按钮</button> </div>`, beforeCreate() { //这里不能操作数据 console.log('beforeCreate: ', this.$refs.btn); }, created() { //这里可以操作数据了 console.log('created: ', this.$refs.btn); }, beforeMount() { //new Vue 发生装载, 替换 <div id="app">之前 console.log('beforeMount: ', this.$refs.btn); }, mounted() { //装在数据之后 console.log('mounted: ', this.$refs.btn); }, }; new Vue({ el: '#app', components: { app: App }, template: `<app />`, }); </script>
Note: this.$refs.btn can only be obtained when mounted()
<div id="app"></div> <script type="text/javascript"> let Temp = { template: ` <div>我是子组件</div> `, }; let App = { components: { temp: Temp, }, template: `<temp ref="tmp"/>`, mounted() { console.log(this.$refs.tmp); }, }; let vm = new Vue({ el: '#app', components: { app: App }, template: `<app />`, }); </script>
We see that the
of the console output
is
temp component .
What we want to focus on here are the various properties of the component (eg: $ el, $ parent, etc.)...
console.log(this.$refs.tmp.$el);The console will output the following picture, from which we can know what $el represents~
<div id="app"></div> <script type="text/javascript"> let App = { template: ` <div> <input type="text" v-if="isShow" ref="myInput" /> </div>`, data() { return { isShow: false, }; }, mounted() { this.isShow = true; //显示input元素 this.$refs.myInput.focus(); //获取input的焦点 }, }; let vm = new Vue({ el: '#app', components: { app: App }, template: `<app />`, }); </script>Error reported after running:
The error message shows that focus does not exist, the reason is
this. $refs.myInput is also undefined. Why doesn't ref get the DOM element?
mounted() { this.isShow = true; this.isShow = false; this.isShow = true; },During the operation process, will the input element be displayed first, then disappear, and then be displayed again?
the answer is negative.
Because Vue will let the code be executed first, and then perform DOM operations based on the final value. In fact, the above code is equivalent to the following code:
mounted() { this.isShow = true; },So how to solve it? Here we use
$nextTick to solve~
Render DOM in Vue to To do something immediately after the page, use $nextTick
this.$nextTick(function() { ·····dosomething })
let App = { template: ` <div> <input type="text" v-if="isShow" ref="myInput" /> </div>`, data() { return { isShow: false, }; }, mounted() { //显示input元素的瞬间,获取焦点 this.isShow = true; this.$nextTick(function() { this.$refs.myInput.focus(); }); }, }; let vm = new Vue({ el: '#app', components: { app: App }, template: `<app />`, });
The latest 5 vue.js video tutorials Featured》
The above is the detailed content of How to get dom in vuejs. For more information, please follow other related articles on the PHP Chinese website!