溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue.js獲取dom的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
vue.js獲取dom的方法：1、給html中原始標簽對或子組件中定義ref屬性，在【mounted(){}】方法后使用【this.$refs】獲取DOM元素；2、mounted對組件的內容進行了修改后繼續用【this.$refs】。
vue.js獲取dom的方法：
給html中原始標簽對或子組件中定義ref屬性,在mounted(){}方法或者此方法后使用this.$refs.具體的ref值來獲取DOM元素。因為使用mounted以前的鉤子函數時,還未將組件掛載到DOM上，自然也無法通過$refs獲取DOM上的元素;
需要區分的是,打印this.$refs.具體的ref值, 若是原始標簽對則輸出的結果是原始標簽對，若ref屬性在子組件標簽中，則輸出的是組件對象,而不是組件對應template中的內容;
this.$refs 輸出的是當前組件中包含的定義了ref屬性的標簽或子組件的集合;
在組件渲染過程中，如mounted期間對組件的內容進行了修改后繼續用this.$refs.被修改組件對應的ref,這個時候獲取的是修改之前的DOM元素,為了獲取修改之后的DOM元素,必須使用this.$nextTick()方法,并在該方法的回調函數中使用this.$refs,此時便是獲取到修改之后的DOM元素。當然要獲取修改之后的DOM元素可以在updated函數下,但是在某些具體的場景下需要在mounted中獲取修改后的DOM元素;
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Vue組件中獲取DOM元素的方式之$refs的使用</title>
</head>
<body>
<div id='app'></div>
<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
<script type='text/javascript'>
Vue.component('Btn',{
template:`
<button>我是按鈕</button>
`
})
let App = {
data:function() {
return {
isShow:false
}
},
template:`
<div>
<input type='text' ref='input1'/>
<input type='text' ref='input2' v-show='isShow'/>
<Btn ref='btn1'/>
</div>
`,
//對應輸出結果為下面第一張圖
// mounted:function() {
// console.log(this.$refs)
// console.log(this.$refs.input1)
// console.log(this.$refs.input2)
// console.log(this.$refs.btn1)
// }
mounted:function() {
// 修改ref=input2的v-show值，讓其顯示, 接著獲取該DOM并讓其獲得焦點,但是沒法獲得焦點，這是因為mounted內無法獲得更新DOM后的DOM元素，這個時候需要調用this.$nextTick方法，在其回掉函數中重新執行代碼this.$refs.input2.focus()
this.isShow = true
// this.$refs.input2.focus()
this.$nextTick(function() {
this.$refs.input2.focus()
})
},
}
let vm = new Vue({
el:'#app',
data:function() {
return {
}
},
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>對應已注釋mounted中的內容
mounted中對this.$nextTick的使用使得mounted中可以獲得已更新的DOM元素。在本代碼中讓已更新的DOM元素獲得焦點
感謝你能夠認真閱讀完這篇文章，希望小編分享vue.js獲取dom的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
