建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“vuejs里如何獲取dom”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“vuejs里如何獲取dom”吧!
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了襄城免費建站歡迎大家使用！
vuejs獲取dom的方法：1、在組件的DOM部分，任意標(biāo)簽中寫上“ref="xxx"”；2、通過組件對象“this.$refs.xxx”獲取到元素即可。
本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。
Vue.js實例學(xué)習(xí)：獲取DOM元素
一、獲取DOM元素
在Vue中獲取DOM元素，我們可以用ref。
用法(和React一樣)：
（1）在組件的DOM部分，任意標(biāo)簽中 寫上：ref="xxx"
（2）通過組件對象 this.$refs.xxx 獲取到元素
1、獲取HTML標(biāo)簽的DOM
控制臺輸出：
說明：mounted()時才能獲取this.$refs.btn
2、獲取組件的DOM
控制臺輸出：
我們看到控制臺輸出的是 temp組件。
這里我們要關(guān)注的是 組件的 各個屬性（eg: $ el、$ parent 等）···
假如我們把console.log(this.$refs.tmp)改為：
console.log(this.$refs.tmp.$el);
控制臺會輸出下圖，由此可知 $el 代表著什么~
總結(jié)：
$parent： 獲取當(dāng)前組件的父組件
$children：················ 的子組件
$root：獲取new Vue的實例 （即上面的：vm）
$el: 獲取當(dāng)前組件的DOM元素
二、給DOM元素添加事件的特殊情況
要求：在顯示input元素的瞬間，獲取input的焦點
運行后報錯：
報錯顯示focus不存在，原因是 this.$refs.myInput 也是undefined，為什么ref沒獲取到DOM元素呢？
我們先思考，如果我們把mounted函數(shù)內(nèi)改成：
mounted() {
this.isShow = true;
this.isShow = false;
this.isShow = true;
},運行過程中，input元素會 先顯示，再消失，然后再顯示嗎？
答案是否定的。因為Vue會先讓代碼執(zhí)行完，然后才會根據(jù)最終的值，進(jìn)行DOM操作。 其實上面的代碼等同于下面的代碼：
mounted() {
this.isShow = true;
},那么怎么解決呢？
這里我們用 $nextTick解決~
vm.$nextTick
什么時候用：在Vue渲染DOM到頁面后 立即做某件事，用$nextTick
this.$nextTick(function() {
·····dosomething
})let App = {
template: `
`,
data() {
return {
isShow: false,
};
},
mounted() {
//顯示input元素的瞬間，獲取焦點
this.isShow = true;
this.$nextTick(function() {
this.$refs.myInput.focus();
});
},
};
let vm = new Vue({
el: '#app',
components: {
app: App
},
template: ``,
}); 到此，相信大家對“vuejs里如何獲取dom”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
名稱欄目：vuejs里如何獲取dom
路徑分享：http://ef60e0e.cn/article/jdojcd.html
