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

範例1：

控制台輸出：

說明：mounted()時才能取得this.$refs.btn

---

#2、取得元件的DOM

範例2：

控制台輸出：

我們看到控制台
輸出的是 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的焦點

運行後報錯：

報錯顯示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: `
    

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

推薦學習：《

最新的5個vue.js影片教學精選

》

#

以上是vuejs裡怎麼取得dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！