【vue3入门】-【17】模版引用

模版引用

虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的ref attribute

挂载结束后引用都会被暴露在this.$refs只上，从this.$refs中按照js原生方法获取元素属性或变更元素属性

<template>
    <h3>模版引用</h3>
    <div ref="container" class="container" id="content">{{ content }}</div>
    <input type="text" ref="username">
    <button @click="getElementHandle" >获取DOM属性</button>
</template>
<script>
/**
 * 内容改变：{{ 模版语法 }}
 * 属性改变：v-bind:指令  
 * 事件：v-on:click
 * 获取DOM元素：在标签中加上ref="属性名"，事件中可根据this.$refs.属性名获取元素
 * */
export default {
    data() {
        return {
            content: "内容"
        }
    },
    methods: {
        getElementHandle() {
            console.log(this.$refs.container);
            //innerHTML是原生JS的属性，获取元素内的文本以及修改元素内的文本
            console.log(this.$refs.container.innerHTML);
            console.log(this.$refs.container.innerHTML = "哈哈哈哈");
            // element.valueh 获取元素的值
            console.log(this.$refs.username.value)
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9