vue.js怎麼取得dom-Vue.js-PHP中文網

首頁

web前端

Vue.js

vue.js怎麼取得dom

coldplay.xixi

Nov 10, 2020 am 11:02 AM

vue.js

vue.js取得dom的方法：1、給html中原始標籤對或子元件中定義ref屬性，在【mounted(){}】方法後使用【this.$refs】取得DOM元素；2、mounted對組件的內容進行了修改後繼續用【this.$refs】。

vue.js怎麼取得dom

【相關文章推薦：vue.js】

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=&#39;utf-8&#39;>
<title>Vue组件中获取DOM元素的方式之$refs的使用</title>
</head>
<body>
<div id=&#39;app&#39;></div>
<script type=&#39;text/javascript&#39; src=&#39;node_modules/vue/dist/vue.js&#39;></script>
<script type=&#39;text/javascript&#39;>
Vue.component(&#39;Btn&#39;,{
template:`
<button>我是按钮</button>
`
})
let App = {
data:function() {
return {
isShow:false
}
},
template:`
<div>
<input type=&#39;text&#39; ref=&#39;input1&#39;/>
<input type=&#39;text&#39; ref=&#39;input2&#39; v-show=&#39;isShow&#39;/>
<Btn ref=&#39;btn1&#39;/>
</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:&#39;#app&#39;,
data:function() {
return {
}
},
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>

對應已註解mounted中的內容

vue.js怎麼取得dom

mounted中對this.$nextTick的使用使得mounted中可以獲得已更新的DOM元素。在本程式碼中讓已更新的DOM元素獲得焦點

vue.js怎麼取得dom

相關免費學習推薦：javascript（影片）

以上是vue.js怎麼取得dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

前端中的vue.js：現實世界的應用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一種漸進式JavaScript框架，適用於構建複雜的用戶界面。 1)其核心概念包括響應式數據、組件化和虛擬DOM。 2)實際應用中，可以通過構建Todo應用和集成VueRouter來展示其功能。 3)調試時，建議使用VueDevtools和console.log。 4)性能優化可通過v-if/v-show、列表渲染優化和異步加載組件等實現。

vue.js和React：了解關鍵差異Apr 10, 2025 am 09:26 AM

Vue.js適合小型到中型項目，而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM，易於管理數據變化。 2.React採用單向數據流，數據從父組件流向子組件，提供明確的數據流向和易於調試的結構。

vue.js vs.反應：特定於項目的考慮因素Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

vue怎麼a標籤跳轉Apr 08, 2025 am 09:24 AM

實現 Vue 中 a 標籤跳轉的方法包括：HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數，並在 router 選項中配置路由以進行動態跳轉。

vue怎麼實現組件跳轉Apr 08, 2025 am 09:21 AM

Vue 中實現組件跳轉有以下方法：使用 router-link 和 <router-view> 組件進行超鏈接跳轉，指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航，前者保存歷史記錄，後者替換當前路由不留記錄。

vue的div怎麼跳轉Apr 08, 2025 am 09:18 AM

Vue 中 div 元素跳轉的方法有兩種：使用 Vue Router，添加 router-link 組件。添加 @click 事件監聽器，調用 this.$router.push() 方法跳轉。

vue跳轉怎麼傳值Apr 08, 2025 am 09:15 AM

Vue 中數據傳遞有兩種主要方式：props：單向數據綁定，從父組件傳遞數據給子組件。事件：使用事件和自定義事件在組件之間傳遞數據。

vue引入方式怎麼跳轉Apr 08, 2025 am 09:12 AM

Vue.js提供了三種跳轉方式：原生 JavaScript API：使用 window.location.href 進行跳轉。 Vue Router：使用 <router-link> 標籤或 this.$router.push() 方法進行跳轉。 VueX：通過 dispatch action 或 commit mutation 來觸發路由跳轉。

See all articles