Vue学习笔记之模板引用

1、添加模板引用

对DOM元素添加引用,语法格式<input ref="input">,则在DOM元素挂载成功后,可以通过this.$refs.input的语法形式访问引用的input元素。

2、v-for中的模板引用

对列表元素添加引用,语法格式<li v-for="item in list" ref="items"> {{ item }} </li>,则在DOM元素挂载成功后,可以通过this.$refs.items的语法形式访问所有的li元素。

3、函数模板引用

可以对DOM元素添加函数模板引用,则在组件每次更新时自动触发函数执行,语法格式<input :ref="testRef" />,模板函数在methods区域定义。

html 复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <input ref="input" />
    <ul>
        <li v-for="item in list" ref="items">
            {{item}}
        </li>
    </ul>
    <input :ref="testRef" /><br/>
    <input :ref="(el)=>el" /><br />
    <button @click="list.push('hello')">Add</button>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                list:['西瓜','八宝粥','瓜子','123罩']
            }
        },
        methods: {
            testRef(el) {
                alert(el);
            }
        },
        mounted() {
            this.$refs.input.focus();
            this.$refs.input.value = 'hello';
            console.log(this.$refs.items);
        }
    }).mount('#app');
</script>
相关推荐
Jackyzhe5 小时前
Flink学习笔记:整体架构
笔记·flink
徒 花6 小时前
初级网安作业笔记1
笔记
kfepiza6 小时前
Debian-10编译安装Mysql-5.7.44 笔记250706
linux·数据库·笔记·mysql·debian·bash
西西西仓鼠6 小时前
python学习打卡:DAY 40 训练和测试的规范写法
学习
Magnetic_h6 小时前
【iOS】方法与消息底层分析
笔记·学习·macos·ios·objective-c·cocoa
今天背单词了吗9806 小时前
算法学习笔记:19.牛顿迭代法——从原理到实战,涵盖 LeetCode 与考研 408 例题
笔记·学习·算法·牛顿迭代法
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
DKPT7 小时前
Java设计模式之行为型模式(观察者模式)介绍与说明
java·笔记·学习·观察者模式·设计模式
future14129 小时前
C#进阶学习日记
数据结构·学习
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序