欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)

 更新時(shí)間：2023年06月14日 10:00:39   作者：天問(wèn)  
這篇文章主要為大家介紹了Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在使用 Vue 、React 等MVVM框架開(kāi)發(fā)項(xiàng)目時(shí)，基本上很少需要直接手動(dòng)去操作 DOM 了，但是也不可避免，例如獲取元素的寬高、元素在屏幕的XY位置、DIV拖拽等等。隨著 Vue 版本的升級(jí)，在 Vue3 中獲取真實(shí)DOM的方法也有了變化。

Vue3 && DOM

一、前言

ref()：用于注冊(cè)元素或子組件的引用。接受一個(gè)內(nèi)部值，返回一個(gè)響應(yīng)式的、可更改的 ref 對(duì)象，此對(duì)象只有一個(gè)指向其內(nèi)部值的屬性 .value。

二、ref獲取真實(shí)DOM

  • 在選項(xiàng)式 API 中
<template>
  <!-- 普通元素 -->
  <div ref='eleBox' class='box'></div>
  <!-- 子組件 -->
  <ChildComponent ref='childCom' />
</template>
<script>
  export default {
    components: {
      ChildComponent,
    },
    mounted() {
      let eleBox = this.$refs.eleBox
      // eleBox 就是獲取的真實(shí)DOM對(duì)象，可以進(jìn)行DOM相關(guān)的操作
      eleBox.style.backgroundColor = '#f0f'
      // 獲取子組件實(shí)例
      console.log(this.$refs.childCom)
    }
  }
</script>
  • 在組合式 API 中
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子組件 -->
<ChildComponent :ref="(el) => childCom = el" />
<script setup>
  import { ref } from 'vue'
  let eleBox = ref()
  // eleBox.value 就是獲取的真實(shí)DOM對(duì)象
  eleBox.value.style.width = '200px'
  let childCom = ref()
  // childCom.value 就是獲取的子組件實(shí)例對(duì)象
</script>

以上就是Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Ref獲取真實(shí)DOM的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 深入理解Vue響應(yīng)式原理及其實(shí)現(xiàn)方式

    深入理解Vue響應(yīng)式原理及其實(shí)現(xiàn)方式

    Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠?yàn)殚_(kāi)發(fā)者提供高效便捷的開(kāi)發(fā)體驗(yàn)的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實(shí)現(xiàn)方式，需要詳細(xì)了解可以參考下文
    2023-05-05
  • vue如何解決多個(gè)異步請(qǐng)求問(wèn)題

    vue如何解決多個(gè)異步請(qǐng)求問(wèn)題

    這篇文章主要介紹了vue如何解決多個(gè)異步請(qǐng)求問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-04-04
  • vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能

    vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能

    這篇文章主要介紹了vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車(chē)的復(fù)選框全選和反選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-11-11
  • 使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法

    使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法

    這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽(tīng)事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽(tīng)事件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-04-04
  • Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹

    Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹

    這篇文章主要介紹了Vue-ANTD表單輸入中自定義校驗(yàn)一些正則表達(dá)式規(guī)則介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能

    Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能

    ElementUI也是一套很不錯(cuò)的組件庫(kù)，對(duì)于我們經(jīng)常用到的表格、表單、時(shí)間日期選擇器等常用組件都有著很好的封裝和接口。這篇文章主要介紹了Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè),需要的朋友可以參考下
    2021-10-10
  • vue中如何去掉input前后的空格

    vue中如何去掉input前后的空格

    這篇文章主要介紹了vue中如何去掉input前后的空格問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示

    vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示

    這篇文章主要介紹了vue如何實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue3項(xiàng)目中引入html頁(yè)面的方法舉例

    Vue3項(xiàng)目中引入html頁(yè)面的方法舉例

    這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中引入html頁(yè)面的相關(guān)資料,Vue3是一個(gè)JavaScript框架,通常我們使用它來(lái)構(gòu)建單頁(yè)應(yīng)用程序(SPA),如果你想在HTML頁(yè)面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下
    2023-09-09
  • element-ui表格如何自適應(yīng)高度效果示例

    element-ui表格如何自適應(yīng)高度效果示例

    這篇文章主要給大家介紹了關(guān)于element-ui表格如何自適應(yīng)高度的相關(guān)資料,Element UI的Table組件默認(rèn)情況下是沒(méi)有自適應(yīng)高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下
    2023-08-08

最新評(píng)論