vuejs获取dom的方法：1、在组件的dom部分，任意标签中写上“ref=xxx”；2、通过组件对象“this.$refs.xxx”获取到元素即可。
本文操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue.js实例学习：获取dom元素
一、获取dom元素在vue中获取dom元素，我们可以用ref。
用法(和react一样)：
（1）在组件的dom部分，任意标签中 写上：ref=xxx
（2）通过组件对象 this.$refs.xxx 获取到元素
1、获取html标签的dom例1：<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>
控制台输出：
说明：mounted()时才能获取this.$refs.btn
2、获取组件的dom例2：<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>
控制台输出：
我们看到控制台输出的是 temp组件。
这里我们要关注的是 组件的 各个属性（eg: $ el、$ parent 等）···
假如我们把console.log(this.$refs.tmp)改为：
console.log(this.$refs.tmp.$el);
控制台会输出下图，由此可知 $el 代表着什么~
总结：$parent： 获取当前组件的父组件$children：················ 的子组件$root：获取new vue的实例 （即上面的：vm）$el: 获取当前组件的dom元素二、给dom元素添加事件的特殊情况例：要求：在显示input元素的瞬间，获取input的焦点
<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>
运行后报错：
报错显示focus不存在，原因是 this.$refs.myinput 也是undefined，为什么ref没获取到dom元素呢？
我们先思考，如果我们把mounted函数内改成：
mounted() { this.isshow = true; this.isshow = false; this.isshow = true; },
运行过程中，input元素会 先显示，再消失，然后再显示吗？
答案是否定的。因为vue会先让代码执行完，然后才会根据最终的值，进行dom操作。 其实上面的代码等同于下面的代码：
mounted() { this.isshow = true; },
那么怎么解决呢？
这里我们用 $nexttick解决~
vm.$nexttick什么时候用：在vue渲染dom到页面后 立即做某件事，用$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 />`,});
推荐学习：《最新的5个vue.js视频教程精选》
以上就是vuejs里怎么获取dom的详细内容。