這篇文章主要介紹了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: '#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,!沙漠」：
ref屬性更簡潔，而且這也是Vue中的方法。它也將更安全，因為你不會依賴class和id。因此，幾乎不會因為更改了HTML的標籤或CSS樣式而受到影響。
h1元素添加一個ref屬性。
{{ message }}
<button ref="myButton" @click="clickedButton">点击偶</button>
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);
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('new-item')">添加列表</button>
<button @click="toggleModal('confirm')">删除列表</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('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;
}
}
});效果如下：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是$refs存取Vue中的DOM（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
