Vue.js核心技术解析与uni-app跨平台实战开发学习笔记第5章 Vue.js组件 5.5 Vue获取DOM元素的方法(ref)

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第5章 Vue.js组件

文章目录

Vue的核心思想是数据驱动视图和组件化，组件是Vue很重要的功能模块，作用是拆分代码，代码复用等。

5.5 Vue获取DOM元素的方法(ref)

在Vue中，官方不建议使用原生JS操作DOM元素，但是偶尔实际需要，Vue给出的解决方案是使用ref操作DOM。

5.5.1 ref获取普通DOM元素

打印vm实例对象

在这里插入图片描述

这个属性当前只是一个空对象，$refs属性就是操作DOM元素的属性。

举个栗子：在视图层创建h1标签，单击按钮打印h1标签的文本值。

在这里插入图片描述

想用哪个DOM元素，就在相应元素标签上添加ref属性
使用this.$refs.属性名 → 获取元素对象

5.5.2 ref获取组件元素

ref不仅可以操作DOM元素，还可以直接操作组件中的数据和方法。

举个栗子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Documenttitle>

head>
<body>

<div id="main" v-cloak>
    <h1 ref="h1text">Hello Vueh1>
    
    <login ref="mylogin">login>
    <input type="button" value="单击打印h1" @click="btn">
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>

    var login = {
        template : '登录
',
        data(){
            return{
                msg : '子组件内容'
            }
        },
        methods: {
            //子组件中声明方法
            show(){
                console.log('我是子组件的方法')
            }
        }
    }

    var vm = new Vue({
        el: '#main',
        data: {
            msg: "Hello world",
        },
        methods: {
            btn() {
                //使用this.$refs.h1text即可获取到h1标签
                console.log(this.$refs.h1text.innerText)

                console.log(this.$refs.mylogin.msg)
                this.$refs.mylogin.show()
            }
        },
        components:{
            login
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

创建组件，声明数据和方法
给组件添加ref属性
使用this.$refs.属性名获取组件

运行效果

在这里插入图片描述

相关阅读:
剑指 Offer II 013. 二维子矩阵的和(Java)
JZ19 正则表达式匹配
如何使用.NET 6的IHostedService和BackgroundService？
【附源码】计算机毕业设计JAVA抑抑心理交流平台
观察者模式
压缩包密码可以删除吗？
java计算机毕业设计ssm+jsp仓库管理系统
牛客网刷题——JAVA
易灵思T35 FPGA驱动LVDS显示屏
COLE HERSEE 48408 工业4.0、制造业X和元宇宙

原文地址：https://blog.csdn.net/weixin_44226181/article/details/126566420

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第5章 Vue.js组件 5.5 Vue获取DOM元素的方法(ref)

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第5章 Vue.js组件

文章目录

5.5 Vue获取DOM元素的方法(ref)

5.5.1 ref获取普通DOM元素

5.5.2 ref获取组件元素

登录

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记第5章 Vue.js组件 5.5 Vue获取DOM元素的方法(ref)