温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vuejs里如何获取dom

发布时间:2021-11-04 15:04:57 来源:亿速云 阅读:513 作者:iii 栏目:编程语言

本篇内容主要讲解“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:
<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>

控制台输出:
vuejs里如何获取dom
说明: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>

控制台输出:
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的焦点

<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>

运行后报错:
vuejs里如何获取dom
报错显示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 />`,
});

到此,相信大家对“vuejs里如何获取dom”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI