通過前面對Vue的學習，到現在我們很有必要進一步了解Vue實例中的一些特殊的屬性和方法。首先要了解的是$refs屬性。但是在深入到JavaScript部分之前，我們先看看模板。
<div id="app"> <h1>{{ message }}</h1> <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屬性不是一個標準的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屬性。
<div id="app"> <h1 ref="message">{{ message }}</h1> <button ref="myButton" @click="clickedButton">點擊偶</button></div>當我們點擊按鈕之后，瀏覽器控制臺輸出的值將會得到改變：
由于我們把Vue的實例賦值值了變量app，所以我們可以繼續使用它?，F在要做的是改變元素的文本。最初<h1>元素的內容是message的值，在下面這個示例中，通過一個setTimeout來看看元素<h1>發生的變化：
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 --><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"> <h1>Modal</h1> <slot>這是一個Modal，是否需要添加新的內容?</slot> </div> <div class="modal__actions"> <slot name="actions"> <button @click="close">關閉</button> </slot> </div> </div> </transition> </script></div>// JavaScriptlet 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; } }});效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
