Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM
通過前面對Vue的學(xué)習(xí),到現(xiàn)在我們很有必要進(jìn)一步了解Vue實(shí)例中的一些特殊的屬性和方法。首先要了解的是$refs
屬性。但是在深入到JavaScript部分之前,我們先看看模板。
<div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">點(diǎn)擊偶</button> </div> let app = new Vue({ el: '#app', data () { return { message: 'Hi,大漠!' } }, methods: { clickedButton: function () { console.log('Hi,大漠!') } } })
在Vue的模板中,我們可以在模板中的任何元素中添加ref
屬性,這樣就可以在Vue實(shí)例中引用這些元素。更具體地說,可以訪問DOM元素。在上面的示例中的<button>
中添加ref
屬性試試。這個(gè)按鈕上已有綁定了一個(gè)click
事件,這個(gè)事件讓我們在瀏覽器的控制面板中打印出Hi, 大漠!
信息。
<button ref="myButton" @click="clickedButton">點(diǎn)擊偶</button>
注意,ref
屬性不是一個(gè)標(biāo)準(zhǔn)的HTML屬性,只是Vue中的一個(gè)屬性。實(shí)際上,它甚至不會是DOM的一部分,所以在瀏覽器中你查看渲染的HTML,你是看不到有關(guān)于ref
的任何東西。因?yàn)樵谒懊鏇]有添加:
,而且它也不是一個(gè)指令。
在Vue實(shí)例上使用$refs
屬性可以通過myButton
來引用這個(gè)按鈕。來看看在瀏覽器的控制臺中打印出來,它將是什么樣子。
let app = new Vue({ el: '#app', data () { return { message: 'Hi!大漠' } }, methods: { clickedButton: function () { console.log(this.$refs); } } })
如果你打開瀏覽器的控制臺,我們可以看到這個(gè)屬性是一個(gè)JavaScript的對象,它包含了ref
屬性的所有元素的引用。
注意,這個(gè)對象中的鍵名(key
)與我們在ref
屬性中指定的名稱(name
)相匹配,而其值(value
)是DOM元素。在這種情況下,我們可以看到鍵名是myButton
,而其值是button
元素。而且這也和Vue沒有任何關(guān)系。
所以在Vue中,可以通過在$refs
對象上訪問ref
的名稱來訪問DOM元素。來看下面這個(gè)示例。我們點(diǎn)擊按鈕后,這個(gè)按鈕的文本將會更改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 } } })
點(diǎn)擊按鈕之后,按鈕的文本將更改變“Hi,!大漠
”:
當(dāng)然,我們也可以通過使用查詢選擇器來訪問DOM元素來實(shí)現(xiàn)這樣的效果,但是使用ref
屬性更簡潔,而且這也是Vue中的方法。它也將更安全,因?yàn)槟悴粫蕾囉?code>class和id
。因此,幾乎不會因?yàn)楦牧薍TML的標(biāo)簽或者CSS樣式受到影響。
像Vue這樣的JavaScript框架的主要目的之一就是讓開發(fā)人員不必去處理DOM。所以你應(yīng)該避免去做這樣的事情,除非你真的需要去做。還應(yīng)該要注意一個(gè)潛在的問題。
首先來看一個(gè)簡單的示例,給h1
元素添加一個(gè)ref
屬性。
<div id="app"> <h1 ref="message">{{ message }}</h1> <button ref="myButton" @click="clickedButton">點(diǎn)擊偶</button> </div>
當(dāng)我們點(diǎn)擊按鈕之后,瀏覽器控制臺輸出的值將會得到改變:
由于我們把Vue的實(shí)例賦值值了變量app
,所以我們可以繼續(xù)使用它?,F(xiàn)在要做的是改變元素的文本。最初<h1>
元素的內(nèi)容是message
的值,在下面這個(gè)示例中,通過一個(gè)setTimeout
來看看元素<h1>
發(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修改h1元素的文本'; }, 2000);
正如你所看到的,我們在更新數(shù)據(jù)屬性時(shí)覆蓋了我們對DOM所做的更改。這樣做的原因是,當(dāng)訪問DOM元素并直接操作它們時(shí),實(shí)際上跳過了前面文章中討論到的虛擬DOM。因此,Vue仍然控制著h1
元素,甚至當(dāng)Vue對數(shù)據(jù)中的做出更新時(shí),它會更新虛擬DOM,然后更新DOM本身。因此,你應(yīng)該小心使用對DOM的直接更改,就算是你不小心做了相應(yīng)的修改,你所做的任何更改都將可能會被覆蓋。雖然在使用refs
時(shí)應(yīng)該小心更改DOM,但是做只讀操作相對來說比較安全,比如從DOM中讀取值。
另外來看看v-for
指令中使用refs
屬性的效果。比如下面這個(gè)示例,給一個(gè)無序列表ul
,通過v-for
指令輸出1
至10
的數(shù)字。
<ul> <li v-for="n in 10" ref="numbers">{{ n }}</li> </ul>
當(dāng)你點(diǎn)擊按鈕時(shí),$refs
屬性將在瀏覽器控制臺中輸出:
正如上圖所看到的一樣,把numbers
屬性添加到了對象中,但需要注意該值的類型。與之前看到的DOM元素不同,它實(shí)際上是一個(gè)數(shù)組,一個(gè)DOM元素的數(shù)組。當(dāng)使用ref
屬性和v-for
指令時(shí),Vue會迭代所有DOM元素,并將它們放置在數(shù)組中。在這種情況下,這就輸出了10
個(gè)li
的DOM元素的數(shù)組,因?yàn)槲覀兊?code>10次。每個(gè)元素都可以像我們之前看到的那樣使用。
上面通過簡單的示例了解了Vue中的$refs
在Vue中是怎么訪問到DOM元素的。接下來看一個(gè)簡單的示例。
在Web中Modal組件是經(jīng)??梢姷囊粋€(gè)組件。來看看$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"> <h1>Modal</h1> <slot>這是一個(gè)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; } } });
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁面設(shè)置背景色的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08詳解如何在Vue項(xiàng)目中導(dǎo)出Excel
這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對于保持頂層屬性不變而內(nèi)部屬性可變的場景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12