vuejs里如何獲取dom

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

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

<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

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

到此，相信大家對“vuejs里如何獲取dom”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！