Wie funktioniert Vue3 dom? Vier Möglichkeiten zur Einführung

VueWie bedient man Dom? Der folgende Artikel stellt Ihnen vier Möglichkeiten vor, Dom in Vue3 zu bedienen. Ich hoffe, er wird Ihnen hilfreich sein!

In letzter Zeit haben Produktmanager viele Anforderungen zur Optimierung der Benutzererfahrung gestellt, die viele DOM-Vorgänge beinhalten.

Xiao Zhang: „Lao Tie, früher war es ganz einfach, das DOM bei der Entwicklung eines Vue2-Projekts zu bedienen. Jetzt entwickle ich ein Vue3-Projekt und fühle mich plötzlich verwirrt!“

Ich: „Es ist okay, Die Prinzipien sind die gleichen. Wenn ich die Informationen überprüfe, sollte es mir gut gehen! (Lernvideo-Sharing:

vue-Video-Tutorial

)

Erhalten Sie die Dom-Referenz direkt über ref

<template>
    <div>
        <div ref="sectionRef"></div>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const sectionRef = ref()
</script>

Durch Hinzufügen des ref-Attributs zum div-Element deklarieren wir zum Erhalten dieses Elements eine Dom-Referenz mit demselben name als ref-Attributvariable sectionRef, und dann können wir das div-Element in der Form sectionRef.value erhalten.

Anwendbare Szenarien

Ein einzelnes Dom-Element oder eine kleine Anzahl von Szenarien

Beispielcode

<template>
    <div>
        <p>通过ref直接拿到dom</p>
        <div ref="sectionRef"></div>
        <button @click="higherAction">变高</button>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;
const sectionRef = ref()
let height = 100;

const higherAction = () => {
    height += 50;
    sectionRef.value.style = `height: ${height}px`;
}
</script>

<style scoped>
.demo1-container {
    width: 100%;
    height: 100%;

    .ref-section {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: all .5s ease-in-out;
    }

    .btn {
        width: 200px;
        height: 50px;
        background-color: gray;
        color: #fff;
        margin-top: 100px;
    }
}
</style>

Erhalten Sie die Dom-Referenz durch Ref-Traversierung des übergeordneten Containers

<template>
    <div>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from &#39;vue&#39;
const listRef = ref()

Durch Hinzufügen zum Übergeordnetes Element Das Ref-Attribut wird hinzugefügt und eine Variable listRef mit demselben Namen wie das Ref-Attribut wird zu diesem Zeitpunkt über listRef.value abgerufen Die untergeordneten Elemente können über listRef.value.children[index] abgerufen werden. Holen Sie sich das untergeordnete Element dom

Anwendbare Szenarien

Szenarien mit einer festen Anzahl von Elementen, die durch eine V-for-Schleife generiert werden

Beispielcode

<template>
    <div>
        <p>通过父容器遍历拿到dom</p>
        <div ref="listRef">
            <div @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from &#39;vue&#39;
const listRef = ref()
const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7, 8]
})

const higherAction = (index: number) => {
    let height = listRef.value.children[index].style.height ? listRef.value.children[index].style.height : &#39;20px&#39;;
    height = Number(height.replace(&#39;px&#39;, &#39;&#39;));
    listRef.value.children[index].style = `height: ${height + 20}px`;
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

Fügen Sie die Dom-Referenz in das Array ein über: ref

<template>
    <div>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from &#39;vue&#39;

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

Rufen Sie die setRefAction-Methode über die :ref-Schleife auf. Dieser Parameter ist das div-Element, das wir erhalten müssen.

Zu diesem Zeitpunkt kann das Unterelement dom in Form von state.refList[index] erhalten werden

Anwendbare Szenarien

Szenarien mit einer nicht festgelegten Anzahl oder mehreren Elementen, die durch eine V-for-Schleife generiert werden

Beispielcode

<template>
    <div>
        <p>通过:ref将dom引用放到数组中</p>
        <div>
            <div :ref="setRefAction" @click="higherAction(index)" v-for="(item, index) in state.list" :key="index">
                <span>{{item}}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from &#39;vue&#39;

const state = reactive({
    list: [1, 2, 3, 4, 5, 6, 7],
    refList: [] as Array<any>
})

const higherAction = (index: number) => {
    let height = state.refList[index].style.height ? state.refList[index].style.height : &#39;20px&#39;;
    height = Number(height.replace(&#39;px&#39;, &#39;&#39;));
    state.refList[index].style = `height: ${height + 20}px`;
    console.log(state.refList[index]);
}

const setRefAction = (el: any) => {
    state.refList.push(el);
}
</script>

<style scoped>
.demo2-container {
    width: 100%;
    height: 100%;

    .list-section {
        width: 200px;
        .list-item {
            width: 200px;
            height: 20px;
            background-color: pink;
            color: #333;
            transition: all .5s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>

Ref durch die Unterkomponente emit übergeben

<template>
    <div ref="cellRef" @click="cellAction">
        <span>{{item}}</span>
    </div>
</template>

<script setup>
import {ref} from &#39;vue&#39;;

const props = defineProps({
    item: Number
})
const emit = defineEmits([&#39;cellTap&#39;]);
const cellRef = ref();
const cellAction = () => {
    emit(&#39;cellTap&#39;, cellRef.value);
}
</script>

Zur Unterkomponente hinzufügen Das Ref-Attribut wird deklariert und eine Variable cellRef mit demselben Namen wie das Ref-Attribut wird zu diesem Zeitpunkt deklariert: cellRef .value kann über emit als Dom-Referenz übergeben werden.

Anwendbare Szenarien:

vuejs Einführungs-Tutorial

,

Erste Schritte mit dem Web-Frontend]

Das obige ist der detaillierte Inhalt vonWie funktioniert Vue3 dom? Vier Möglichkeiten zur Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!