vuejs里如何获取dom

本篇内容主要讲解“vuejs里如何获取dom”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vuejs里如何获取dom”吧!

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了襄城免费建站欢迎大家使用！

vuejs获取dom的方法：1、在组件的DOM部分，任意标签中写上“ref="xxx"”；2、通过组件对象“this.$refs.xxx”获取到元素即可。

vuejs里如何获取dom

本文操作环境：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：

let App = { template: `

我是按钮

`, beforeCreate() { //这里不能操作数据 console.log('beforeCreate: ', this.$refs.btn); }, created() { //这里可以操作数据了 console.log('created: ', this.$refs.btn); }, beforeMount() { //new Vue 发生装载，替换之前 console.log('beforeMount: ', this.$refs.btn); }, mounted() { //装在数据之后 console.log('mounted: ', this.$refs.btn); }, }; new Vue({ el: '#app', components: { app: App }, template: ``, });

控制台输出：
vuejs里如何获取dom
说明：mounted()时才能获取this.$refs.btn

2、获取组件的DOM

例2：

let Temp = { template: `

我是子组件

`, }; let App = { components: { temp: Temp, }, template: ``, mounted() { console.log(this.$refs.tmp); }, }; let vm = new Vue({ el: '#app', components: { app: App }, template: ``, });

控制台输出：
vuejs里如何获取dom
我们看到控制台输出的是 temp组件。
这里我们要关注的是组件的各个属性（eg: $ el、$ parent 等）···

假如我们把console.log(this.$refs.tmp)改为：

console.log(this.$refs.tmp.$el);

控制台会输出下图，由此可知 $el 代表着什么~
vuejs里如何获取dom

总结：

$parent：获取当前组件的父组件
$children：················ 的子组件
$root：获取new Vue的实例（即上面的：vm）
$el: 获取当前组件的DOM元素

二、给DOM元素添加事件的特殊情况

例：

要求：在显示input元素的瞬间，获取input的焦点

let App = { template: `

`, 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: ``, });

乐山网站建设