Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan-View.js-php.cn

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

青灯夜游

Lepaskan： 2022-10-28 19:29:51

ke hadapan

3610 orang telah melayarinya

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

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

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>

Salin selepas log masuk

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

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

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

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan <. . berbilang elemen dijana melalui gelung v-untuk

Kod contoh

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan 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>

Salin selepas log masuk

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>

Salin selepas log masuk

Berbilang halaman mungkin mempunyai senario komponen pengendalian DOM

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan

Kod contoh

Bagaimanakah Vue3 mengendalikan dom? Empat cara untuk memperkenalkan 【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!