外观
模板引用
为了更方便地操作DOM元素，Vue为元素提供了一个特殊的属性：ref。它的属性值是一个对象，此对象要在组件的script中声明。
<template>
<input type="text" ref="input" @blur="print"/>
</template>
<script setup>
import {ref} from 'vue';
const input = ref(null);
function print() {
console.log("输入框的内容为：" + input.value.value)
}
</script><template>
<input type="text" ref="input" @blur="print"/>
</template>
<script>
export default {
methods: {
print: function () {
console.log("输入框的内容为：" + this.$refs.input.value)
}
}
}
</script>注意，你只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 $refs.input，在初次渲染时会是 undefined。这是因为在初次渲染前这个元素还不存在呢！
在v-for使用ref时，对象将会是一个数组。
除了和一个对象绑定，它还可以绑定一个函数，这个函数可以有一个参数，代表这个元素本身。这个函数将在组件更新后被调用。
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">若ref属性被应用在一个组件上，则对应的引用对象将是这个组件本身。
3.5 版本以后，获取一个DOM元素本身，可以不使用ref函数，使用辅助函数useTemplateRef：
<script setup>
import { useTemplateRef, onMounted } from 'vue'
// 第一个参数必须与模板中的 ref 值匹配
const input = useTemplateRef('my-input')
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="my-input" />
</template>