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);
<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>
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; },
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; },
$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!