Vue.js 是一款流行的 JavaScript 框架,它使用虛擬 DOM 實現高效的數據綁定和組件化開發。虛擬 DOM 是一種抽象的表示方式,它將頁面的 HTML 結構抽象為一個 JavaScript 對象樹,允許開發者在代碼中操作 DOM 元素而無需直接操作真正的 DOM。在 Vue.js 中,我們可以使用 $el 屬性和 $refs 引用真實的 DOM 元素,也可以通過 computed 和 watch 等特性監聽 DOM 元素的變化。
// 獲取元素位置信息 function getElementPosition(elm) { var box = elm.getBoundingClientRect(); return { top: box.top + window.pageYOffset - document.documentElement.clientTop, left: box.left + window.pageXOffset - document.documentElement.clientLeft }; } new Vue({ el: '#app', mounted: function () { var elem = this.$refs.title; var pos = getElementPosition(elem); console.log(pos); } });
如上代碼為獲取 DOM 元素位置信息的示例。其中通過調用 getBoundingClientRect() 方法獲取元素的邊界信息,再加上頁面滾動(window.pageYOffset 和 window.pageXOffset)和頁面邊框(document.documentElement.clientTop 和 document.documentElement.clientLeft)的偏移量,就可以計算出元素相對于頁面視口的坐標。在 Vue.js 中,我們可以在 mounted 鉤子函數中操作 DOM 元素,使用 $refs 引用元素并進行相應的計算。這樣,我們就可以在不觸碰真正的 DOM 的情況下,動態地獲取和設置元素的位置和尺寸信息,實現更加靈活和高效的頁面布局和交互效果。
上一篇vue dom拖動
下一篇ef6實體轉化json