官網(wǎng)上的說明

為扶綏等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及扶綏網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、扶綏網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、前言#

　　在之前的前端開發(fā)中，為了實現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進行操作。但是，當(dāng)我們開始在前端項目中使用 Vue 這類的 MVVM 框架之后，對于 DOM 的操作我們就應(yīng)當(dāng)完全的交給框架，而我們只需要關(guān)注于數(shù)據(jù)。難道，在 Vue 中就不能手動獲取到頁面上的 DOM 元素了嗎，答案當(dāng)然是可以手動獲取到 DOM 元素的，在 Vue 中我們可以通過使用 ref 實現(xiàn)獲取 DOM 元素的功能，當(dāng)然，這也只是 ref 其中一項的功能。本章，我們就來學(xué)習(xí) Vue 中 ref 的相關(guān)使用。

　　倉儲地址：https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/ref.html

 二、干貨合集#

　　ref 在 Vue 中是用來給元素或是子組件注冊引用信息到父組件或是 Vue 實例上，注冊后的引用信息都會呈現(xiàn)在父組件/Vue 實例的 $.refs 上，這時，我們就可以通過 $.refs 獲取到引用的 DOM 對象或是子組件信息。

　　例如，我們可以獲取到頁面上添加了 ref 的 input 輸入框的值，對于子組件來說，我們可以直接獲取到子組件 data 選項中的數(shù)據(jù)，或是直接調(diào)用子組件的方法。

　　1、虛擬 DOM#

　　在我們使用 JS/Jquery 直接對 DOM 元素進行操作時，不管是對元素樣式的修改（背景顏色從紅色變成藍色）還是對頁面中的某些布局進行動態(tài)調(diào)整（通過點擊按鈕在列表中添加一行新的數(shù)據(jù)），這都會造成頁面的重新渲染，從而影響我們網(wǎng)站的性能。而在 Vue 中，通過在內(nèi)存中生成與真實 DOM 與之對應(yīng)的數(shù)據(jù)結(jié)構(gòu)（虛擬 DOM），當(dāng)頁面發(fā)生變化時，通過新的虛擬 DOM 樹與舊的虛擬 DOM 樹進行比對，就能很快的找出差異點，從而得出應(yīng)施加到真實 DOM 上的改動。

　　2、使用 ref 獲取頁面 DOM 元素#

　　在使用 JS/Jquery 獲取頁面的 DOM 元素時，我們一般是根據(jù) id、class、標(biāo)簽、屬性等其它標(biāo)識來獲取到頁面上的 DOM 元素。嗯，可以說，我們很難拋棄 Jquery 的一個重大原因，就是當(dāng)我們需要獲取到頁面上的 DOM 元素時，使用 Jquery 的 API 相比于原生的 JS 代碼，簡單到極致，有木有。

document.getElementById('id').value => $('#id').val()

　　那么，難道我們在 Vue 中獲取 DOM 元素還是采用這樣的方式？

　　答案當(dāng)然是否定的，這種直接操縱 DOM 元素的方式，與我們使用 Vue 的初衷不符，雖然能達成效果，但是卻不提倡，這里我們就可以使用 ref 來獲取頁面上的 DOM 元素。

　　在下面的代碼中，我在 input 上添加了一個 ref 屬性，之后，我們就可以在 Vue 實例中獲取到這個 input 輸入框的值。這里，我在 beforeMount、mounted 這兩個 Vue 中的生命周期鉤子函數(shù)以及一個按鈕的點擊事件中嘗試獲取到這個 input 輸入框的值。

<div id="app">
 <input type="text" ref="msgText" v-model="msg" />
 <button @click="getElement">獲取元素值</button>
</div>

<script>
 var vm = new Vue({
  el: "#app",
  data: {
   msg: 'Hello ref'
  },
  beforeMount() {
   console.log('beforeMount: ' + this.$refs.msgText.value)
  },
  mounted() {
   console.log('mounted: ' + this.$refs.msgText.value)
  },
  methods: {
   getElement() {
    console.log(this.$refs.msgText.value)
   }
  }
 });
</script>

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

網(wǎng)站欄目：深入淺析Vue中ref的使用-創(chuàng)新互聯(lián)
本文來源：http://chinadenli.net/article40/cogdho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、電子商務(wù)、商城網(wǎng)站、App開發(fā)、搜索引擎優(yōu)化、小程序開發(fā)

廣告

聲明：本網(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)