vuejs里如何獲取dom

本篇內(nèi)容主要講解“vuejs里如何獲取dom”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vuejs里如何獲取dom”吧!

vuejs獲取dom的方法：1、在組件的DOM部分，任意標(biāo)簽中寫上“ref="xxx"”；2、通過組件對(duì)象“this.$refs.xxx”獲取到元素即可。

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue.js實(shí)例學(xué)習(xí)：獲取DOM元素

一、獲取DOM元素

在Vue中獲取DOM元素，我們可以用ref。

用法(和React一樣)：
（1）在組件的DOM部分，任意標(biāo)簽中 寫上：ref="xxx"
（2）通過組件對(duì)象 this.$refs.xxx 獲取到元素

1、獲取HTML標(biāo)簽的DOM

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <button ref="btn">我是按鈕</button>    
      </div>`,
    beforeCreate() {
      //這里不能操作數(shù)據(jù)
      console.log('beforeCreate: ', this.$refs.btn);
    },
    created() {
      //這里可以操作數(shù)據(jù)了
      console.log('created: ', this.$refs.btn);
    },
    beforeMount() {
      //new Vue 發(fā)生裝載， 替換 <div id="app">之前
      console.log('beforeMount: ', this.$refs.btn);
    },
    mounted() {
      //裝在數(shù)據(jù)之后
      console.log('mounted: ', this.$refs.btn);
    }, 
  };

  new Vue({
    el: '#app',
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制臺(tái)輸出：

說明：mounted()時(shí)才能獲取this.$refs.btn

2、獲取組件的DOM

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

控制臺(tái)輸出：

我們看到控制臺(tái)輸出的是 temp組件。
這里我們要關(guān)注的是 組件的 各個(gè)屬性（eg: $ el、$ parent 等）···

假如我們把console.log(this.$refs.tmp)改為：

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

控制臺(tái)會(huì)輸出下圖，由此可知 $el 代表著什么~

總結(jié)：

• $parent： 獲取當(dāng)前組件的父組件

• $children：················ 的子組件

• $root：獲取new Vue的實(shí)例 （即上面的：vm）

• $el: 獲取當(dāng)前組件的DOM元素

二、給DOM元素添加事件的特殊情況

要求：在顯示input元素的瞬間，獲取input的焦點(diǎn)

<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的焦點(diǎn)
    },   
  };

  let vm = new Vue({
    el: '#app',
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

運(yùn)行后報(bào)錯(cuò)：

報(bào)錯(cuò)顯示focus不存在，原因是 this.$refs.myInput 也是undefined，為什么ref沒獲取到DOM元素呢？

我們先思考，如果我們把mounted函數(shù)內(nèi)改成：

mounted() {
      this.isShow = true;  
      this.isShow = false;  
      this.isShow = true;  
},

運(yùn)行過程中，input元素會(huì) 先顯示，再消失，然后再顯示嗎？
答案是否定的。因?yàn)閂ue會(huì)先讓代碼執(zhí)行完，然后才會(huì)根據(jù)最終的值，進(jìn)行DOM操作。 其實(shí)上面的代碼等同于下面的代碼：

mounted() {
      this.isShow = true;  
},

那么怎么解決呢？

這里我們用 $nextTick解決~

vm.$nextTick

什么時(shí)候用：在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元素的瞬間，獲取焦點(diǎn)
    this.isShow = true;
    this.$nextTick(function() {
      this.$refs.myInput.focus();  
    });
  },
  
};

let vm = new Vue({
  el: '#app',
  components: {
    app: App
  },
  template: `<app />`,
});

到此，相信大家對(duì)“vuejs里如何獲取dom”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！