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：

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

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <button ref="btn">我是按钮</button>    
      </div>`,
    beforeCreate() {
      //这里不能操作数据
      console.log(&#39;beforeCreate: &#39;, this.$refs.btn);
    },
    created() {
      //这里可以操作数据了
      console.log(&#39;created: &#39;, this.$refs.btn);
    },
    beforeMount() {
      //new Vue 发生装载， 替换 <div id="app">之前
      console.log(&#39;beforeMount: &#39;, this.$refs.btn);
    },
    mounted() {
      //装在数据之后
      console.log(&#39;mounted: &#39;, this.$refs.btn);
    }, 
  };

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

控制台輸出：

說明：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: &#39;#app&#39;,
    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: &#39;#app&#39;,
    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操作。
其實上面的程式碼等同於下面的程式碼：<pre class="brush:php;toolbar:false">mounted() {       this.isShow = true;   },</pre>那麼要怎麼解決呢？

這裡我們用

$nextTick

解決~

vm.$nextTick

---

什麼時候用：

在Vue渲染DOM到頁面後面立即做某件事，用$nextTick

<pre class="brush:php;toolbar:false">this.$nextTick(function() {    ·····dosomething })</pre>

修改版：

---

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: &#39;#app&#39;,
  components: {
    app: App
  },
  template: `<app />`,
});

推薦學習：《

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

》

#

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