$refs存取Vue中的DOM（詳細教學）

這篇文章主要介紹了Vue 2.0學習筆記之使用$refs訪問Vue中的DOM，現在分享給大家，也給大家做個參考。

透過前面對Vue的學習，到現在我們很有必要進一步了解Vue實例中的一些特殊的屬性和方法。首先要了解的是$refs屬性。但是在深入JavaScript部分之前，我們先來看看模板。

<p id="app">
  <h1>{{ message }}</h1>
  <button @click="clickedButton">点击偶</button>
</p>

let app = new Vue({
  el: &#39;#app&#39;,
  data () {
    return {
      message: &#39;Hi，大漠！&#39;
    }
  },
  methods: {
    clickedButton: function () {
      console.log(&#39;Hi,大漠！&#39;)
    }
  }
})

在Vue的模板中，我們可以在模板中的任何元素中加入ref屬性，這樣就可以在Vue實例中引用這些元素。更具體地說，可以存取DOM元素。在上面的範例中的<button>中加入ref屬性試試看。這個按鈕上已有綁定了一個click事件，這個事件讓我們在瀏覽器的控制面板中列印出Hi, 大漠！ 資訊.

<button ref="myButton" @click="clickedButton">点击偶</button>

注意，ref屬性不是一個標準的HTML屬性，只是Vue中的一個屬性。實際上，它甚至不會是DOM的一部分，所以在瀏覽器中你查看渲染的HTML，你是看不到有關於ref的任何東西。因為在它前面沒有加上:，而且它也不是一個指令。

在Vue實例上使用$refs屬性可以透過myButton來引用這個按鈕。來看看在瀏覽器的控制台中列印出來，它將是什麼樣子。

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs);
    }
  }
})

如果你開啟瀏覽器的控制台，我們可以看到這個屬性是一個JavaScript的對象，它包含了ref屬性的所有元素的參考。

注意，這個物件中的鍵名（key）與我們在ref屬性中指定的名稱（name）相匹配，而其值（value）是DOM元素。在這種情況下，我們可以看到鍵名是myButton，而其值是button元素。而且這也和Vue沒有任何關係。

所以在Vue中，可以透過在$refs物件上存取ref的名稱來存取DOM元素。來看下面這個範例。我們點擊按鈕後，這個按鈕的文字將會改變message資料中的值。

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs)
      this.$refs.myButton.innerText = this.message
    }
  }
})

點擊按鈕之後，按鈕的文字會改變「Hi,!沙漠」：

##當然，我們也可以透過使用查詢選擇器來存取DOM元素來實現這樣的效果，但是使用

ref屬性更簡潔，而且這也是Vue中的方法。它也將更安全，因為你不會依賴class和id。因此，幾乎不會因為更改了HTML的標籤或CSS樣式而受到影響。

像Vue這樣的JavaScript框架的主要目的之一就是讓開發人員不必去處理DOM。所以你應該避免去做這樣的事情，除非你真的需要去做。也應該要注意一個潛在的問題。

首先來看一個簡單的範例，並為

h1元素添加一個ref屬性。

  
{{ message }}
  <button ref="myButton" @click="clickedButton">点击偶</button>

當我們點擊按鈕之後，瀏覽器控制台輸出的值將會改變：

#由於我們把Vue的實例賦值值了變數

app，所以我們可以繼續使用它。現在要做的是改變元素的文字。最初

元素的內容是message的值，在下面這個範例中，透過一個setTimeout來看看元素發生的變化：

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs);
      this.$refs.myButton.innerText = this.message
    }
  }
})

setTimeout(function() {
  app.$refs.message.innerText = '延迟2000ms修改h1元素的文本';
}, 2000);

正如你所看到的，我們在更新資料屬性時覆寫了我們對DOM所做的更改。這樣做的原因是，當訪問DOM元素並直接操作它們時，實際上跳過了前面文章中討論到的虛擬DOM。因此，Vue仍然控制著

h1元素，甚至當Vue對資料中的做出更新時，它會更新虛擬DOM，然後更新DOM本身。因此，你應該小心使用對DOM的直接更改，即使是你不小心做了相應的修改，你所做的任何更改都將可能會被覆蓋。雖然使用refs時應該小心更改DOM，但做唯讀操作相對來說比較安全，例如從DOM讀取值。

另外來看看

v-for指令中使用refs屬性的效果。例如下面這個範例，給一個無序列表ul，透過v-for指令輸出1至10的數字。

<ul>
  <li v-for="n in 10" ref="numbers">{{ n }}</li>
</ul>

當你點擊按鈕時，

$refs屬性將在瀏覽器控制台中輸出：

正如上图所看到的一样，把numbers属性添加到了对象中，但需要注意该值的类型。与之前看到的DOM元素不同，它实际上是一个数组，一个DOM元素的数组。当使用ref属性和v-for指令时，Vue会迭代所有DOM元素，并将它们放置在数组中。在这种情况下，这就输出了10个li的DOM元素的数组，因为我们迭代了10次。每个元素都可以像我们之前看到的那样使用。

上面通过简单的示例了解了Vue中的$refs在Vue中是怎么访问到DOM元素的。接下来看一个简单的示例。

在Web中Modal组件是经常可见的一个组件。来看看$refs怎么来来控制Modal的打开和关闭。

<!-- HTML -->
<p id="app">
  <p class="actions">
    <button @click="toggleModal(&#39;new-item&#39;)">添加列表</button>
    <button @click="toggleModal(&#39;confirm&#39;)">删除列表</button>
  </p>

  <modal ref="new-item">
    <p>添加新的列表</p>
    <p slot="actions">
    <button>保存</button>
    <button>取消</button>
    </p>
  </modal>
  <modal ref="confirm">
    <p>删除列表？</p>
    <p slot="actions">
    <button>删除</button>
    <button>取消</button>
    </p>
  </modal>

  <script type="x-template" id="modal-template">
    <transition name="modal-toggle">
    <p class="modal" v-show="toggle">
      <button class="modal__close" @click="close">X</button>
      <p class="modal__body">
      <h1>Modal</h1>
      <slot>这是一个Modal，是否需要添加新的内容?</slot>
      </p>
      <p class="modal__actions">
      <slot name="actions">
        <button @click="close">关闭</button>
      </slot>
      </p>
    </p>
    </transition>
  </script>
</p>

// JavaScript
let Modal = Vue.component(&#39;modal&#39;, {
  template: "#modal-template",
  data () {
    return {
    toggle: false
    }
  },
  methods: {
    close: function() {
    this.toggle = false;
    }
  }
});
let app = new Vue({
  el: "#app",
  methods: {
    toggleModal(modal) {
    this.$refs[modal].toggle = !this.$refs[modal].toggle;
    }
  }
});

效果如下：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

有关ES6中Proxy的使用说明

在Vue中详细介绍$attrs属性

详细介绍ES6中的代理模式（Proxy）

以上是$refs存取Vue中的DOM（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！