Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

VueBagaimana untuk mengendalikan dom? Artikel berikut akan memperkenalkan kepada anda empat cara untuk mengendalikan dom dalam Vue3. Saya harap ia akan membantu anda!

Baru-baru ini, pengurus produk telah mengemukakan banyak keperluan untuk pengoptimuman pengalaman pengguna, yang melibatkan banyak operasi DOM.

Xiao Zhang: "Old Tie, dahulunya agak mudah untuk mengendalikan DOM semasa membangunkan projek Vue2. Sekarang saya sedang membangunkan projek Vue3, dan saya tiba-tiba berasa keliru!" >

Saya: "Tidak mengapa, prinsipnya hampir sama, anda sepatutnya baik-baik saja jika anda menyemak maklumat tersebut!”

Ini ialah ringkasan cara biasa untuk mengendalikan DOM dalam Vue3! (Belajar perkongsian video:

tutorial video vue)

Dapatkan rujukan dom terus melalui ref

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

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

Tambahkan rujukan pada Atribut elemen div , untuk mendapatkan elemen ini, kami mengisytiharkan sectionRef pembolehubah dengan nama yang sama dengan atribut ref, dan kemudian kami boleh mendapatkan elemen div dalam bentuk sectionRef.value.

Senario yang berkenaan

Satu elemen DOM atau sebilangan kecil senario

Kod sampel

<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>

Dapatkan rujukan dom melalui traversal ref bagi bekas induk

<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()

Tambahkan atribut ref pada elemen induk dan isytiharkan a Pembolehubah listRef dengan nama yang sama dengan atribut ref Pada masa ini, objek dom yang mengandungi elemen anak akan diperolehi melalui listRef.value

Pada masa ini, anda. boleh menggunakan listRef.value.children[index] Bentuk mendapatkan dom sub-elemen

Senario yang boleh digunakan

Adegan dengan bilangan elemen tetap yang dijana melalui v- untuk gelung

Kod sampel

<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>

Letakkan rujukan dom ke dalam tatasusunan melalui: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>

Panggil melalui:kaedah setRefAction gelung ref, kaedah ini akan menerima parameter el secara lalai Parameter ini ialah elemen div yang perlu kita perolehi

<. . berbilang elemen dijana melalui gelung v-untuk

Kod contoh

Melalui ref melalui pemancar subkomponen

Dengan menambahkan atribut ref pada subkomponen, Dan mengisytiharkan pembolehubah cellRef dengan nama yang sama dengan atribut ref Pada masa ini, anda boleh menghantar cellRef.value sebagai rujukan dom melalui emit

<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>

Senario yang berkenaan

<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>

Berbilang halaman mungkin mempunyai senario komponen pengendalian DOM

Kod contoh

【Tutorial video berkaitan yang disyorkan:

Tutorial pengenalan Vuejs

, Bermula dengan bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!