這篇文章主要為大家詳細介紹了利用$refs怎么訪問Vue項目中的DOM，文中示例代碼介紹的非常詳細，具有一定的參考價值，發(fā)現(xiàn)的小伙伴們可以參考一下：

創(chuàng)新互聯(lián)一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！為您提供網(wǎng)站制作、網(wǎng)站設(shè)計、成都網(wǎng)頁設(shè)計、重慶小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都APP應(yīng)用開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司，等你一起來見證！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

<div id="app">
  <h2>{{ message }}</h2>
  <button @click="clickedButton">點擊偶</button>
</div>

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

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

<button ref="myButton" @click="clickedButton">點擊偶</button>

注意，ref屬性不是一個標(biāo)準(zhǔn)的HTML屬性，只是Vue中的一個屬性。實際上，它甚至不會是DOM的一部分，所以在瀏覽器中你查看渲染的HTML，你是看不到有關(guān)于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沒有任何關(guān)系。

所以在Vue中，可以通過在$refs對象上訪問ref的名稱來訪問DOM元素。來看下面這個示例。我們點擊按鈕后，這個按鈕的文本將會更改message數(shù)據(jù)中的值。

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

點擊按鈕之后，按鈕的文本將更改變“Hi,!大漠”：

當(dāng)然，我們也可以通過使用查詢選擇器來訪問DOM元素來實現(xiàn)這樣的效果，但是使用ref屬性更簡潔，而且這也是Vue中的方法。它也將更安全，因為你不會依賴于class和id。因此，幾乎不會因為更改了HTML的標(biāo)簽或者CSS樣式受到影響。

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

首先來看一個簡單的示例，給h2元素添加一個ref屬性。

<div id="app">
  <h2 ref="message">{{ message }}</h2>
  <button ref="myButton" @click="clickedButton">點擊偶</button>
</div>

當(dāng)我們點擊按鈕之后，瀏覽器控制臺輸出的值將會得到改變：

由于我們把Vue的實例賦值值了變量app，所以我們可以繼續(xù)使用它?，F(xiàn)在要做的是改變元素的文本。最初<h2>元素的內(nèi)容是message的值，在下面這個示例中，通過一個setTimeout來看看元素<h2>發(fā)生的變化：

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修改h2元素的文本';
}, 2000);

正如你所看到的，我們在更新數(shù)據(jù)屬性時覆蓋了我們對DOM所做的更改。這樣做的原因是，當(dāng)訪問DOM元素并直接操作它們時，實際上跳過了前面文章中討論到的虛擬DOM。因此，Vue仍然控制著h2元素，甚至當(dāng)Vue對數(shù)據(jù)中的做出更新時，它會更新虛擬DOM，然后更新DOM本身。因此，你應(yīng)該小心使用對DOM的直接更改，就算是你不小心做了相應(yīng)的修改，你所做的任何更改都將可能會被覆蓋。雖然在使用refs時應(yīng)該小心更改DOM，但是做只讀操作相對來說比較安全，比如從DOM中讀取值。

另外來看看v-for指令中使用refs屬性的效果。比如下面這個示例，給一個無序列表ul，通過v-for指令輸出1至10的數(shù)字。

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

當(dāng)你點擊按鈕時，$refs屬性將在瀏覽器控制臺中輸出：

正如上圖所看到的一樣，把numbers屬性添加到了對象中，但需要注意該值的類型。與之前看到的DOM元素不同，它實際上是一個數(shù)組，一個DOM元素的數(shù)組。當(dāng)使用ref屬性和v-for指令時，Vue會迭代所有DOM元素，并將它們放置在數(shù)組中。在這種情況下，這就輸出了10個li的DOM元素的數(shù)組，因為我們迭代了10次。每個元素都可以像我們之前看到的那樣使用。

上面通過簡單的示例了解了Vue中的$refs在Vue中是怎么訪問到DOM元素的。接下來看一個簡單的示例。

在Web中Modal組件是經(jīng)?？梢姷囊粋€組件。來看看$refs怎么來來控制Modal的打開和關(guān)閉。

<!-- HTML -->
<div id="app">
  <div class="actions">
    <button @click="toggleModal('new-item')">添加列表</button>
    <button @click="toggleModal('confirm')">刪除列表</button>
  </div>

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

  <script type="x-template" id="modal-template">
    <transition name="modal-toggle">
    <div class="modal" v-show="toggle">
      <button class="modal__close" @click="close">X</button>
      <div class="modal__body">
      <h2>Modal</h2>
      <slot>這是一個Modal，是否需要添加新的內(nèi)容?</slot>
      </div>
      <div class="modal__actions">
      <slot name="actions">
        <button @click="close">關(guān)閉</button>
      </slot>
      </div>
    </div>
    </transition>
  </script>
</div>

// JavaScript
let Modal = Vue.component('modal', {
  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;
    }
  }
});

以上就是創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司小編為大家收集整理的利用$refs怎么訪問Vue項目中的DOM，如何覺得創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司網(wǎng)站的內(nèi)容還不錯，歡迎將創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司網(wǎng)站推薦給身邊好友。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：利用$refs怎么訪問Vue項目中的DOM-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://jinyejixie.com/article20/djceco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、手機網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、虛擬主機、網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)