『VUE』17. Dom与模板引用(详细图文注释)

目录

    • 回顾之前的操作
    • ref 属性
    • 借助dom使用原生js
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

回顾之前的操作

之前的这些操作都是我们使用vue为我们渲染的对象,再来操作dom

  • 内容改变{{ 模板语法 }}
  • 属性改变 v-bind:
  • 添加事件 v-on

本节讲直接操作dom的方法.


ref 属性

通过this.$refs.对象ref属性值来拿到dom注意这里是refs!!!

<template>
  <h3>Dom的模板引用</h3>
  <div ref="qwer">{{ message }}</div>
  <button @click="getElementHandle">获取dom</button>
</template>

<script>
export default {
  data() {
    return {
      message: "mzh",
    };
  },
  methods: {
    getElementHandle() {
      console.log(this.$refs.qwer);
    },
  },
  watch: {},
};
</script>

在这里插入图片描述


借助dom使用原生js

费力气就是为了能用原生js,大部分情况我们其实用不到dom,用前面学过的v命令就够了

<template>
  <h3>Dom的模板引用</h3>
  <div ref="qwer">{{ message }}</div>
  <button @click="getElementHandle">获取dom</button>
</template>

<script>
export default {
  data() {
    return {
      message: "mzh",
    };
  },
  methods: {
    getElementHandle() {
      console.log("原来的dom", this.$refs.qwer);
      this.$refs.qwer.innerHTML = this.$refs.qwer.innerHTML + "wg191";
      console.log(this.$refs.qwer.innerHTML);
      console.log("改变的dom", this.$refs.qwer);
    },
  },
  watch: {},
};
</script>

在这里插入图片描述


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/543687.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 中文官方教程 2022 版(二十九)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html BCP 47 扩展 原文&#xff1a;docs.oracle.com/javase/tutorial/i18n/locale/extensions.html Java SE 7 版本符合 IETF BCP 47 标准&#xff0c;支持向Locale添加扩展。任何单个字符都可以用于表示扩展&…

2. Spring的创建和Bean的存取

经过前面的学习我们已经大体明白了 IOC 思想以及它的实现方式 DI &#xff0c;本节要讲的是如何Spring框架实现实现DI。 本节目标&#xff1a; Spring(Core) 项目创建将对象存储到 Spring 中将对象(bean)从 Spring 中取出 1. 创建 Spring 项目 与开篇演示的 Spring Boot 项目不…

2024MathorCup数学建模B题成品论文26页+1-4小问代码全解析+答疑

B题 甲骨文智能识别中原始拓片单字自动分割与识别研究 &#xff08;完整版见文末&#xff09; 甲骨文是我国目前已知的最早成熟的文字系统&#xff0c;它是一种刻在龟甲或兽骨上的古老文字。甲骨文具有 极其重要的研究价值&#xff0c;不仅对中国文明的起源具有重要意义&#x…

解放双手,批量绕过403

将dirsearch扫描出来的结果复制到url.txt&#xff0c;如下所示 url.txt [21:18:16] 502 - 0B - /var/log/exception.log [21:18:21] 502 - 0B - /WEB-INF/jetty-env.xml [21:18:22] 502 - 0B - /WEB-INF/weblogic.xml [21:18:27] 502 - 0B - /wp-json/wp/v2/u…

云笔记小程序的实现

1.前言 云笔记, 是基于HotApp小程序统计云后台提供的api接口开发的一个微信小程序。 2.功能 离线保存笔记 云端数据同步, 更换了设备也可以找到以前的笔记 接入了好推二维码提供的数据统计工具, 可以到平台上查看用户分析、留存分析、事件分析。 3.界面效果 ***HotApp云笔…

Java 入门教程||Java 关键字

Java 关键字 Java教程 - Java关键字 Java中的关键字完整列表 关键词是其含义由编程语言定义的词。 Java关键字和保留字&#xff1a; abstract class extends implements null strictfp true assert const false import package super try …

OpenHarmony实战开发-Actor并发模型对比内存共享并发模型

内存共享并发模型指多线程同时执行复数任务&#xff0c;这些线程依赖同一内存并且都有权限访问&#xff0c;线程访问内存前需要抢占并锁定内存的使用权&#xff0c;没有抢占到内存的线程需要等待其他线程释放使用权再执行。 Actor并发模型每一个线程都是一个独立Actor&#xf…

【vs2019】window10环境变量设置

【vs2019】window10环境变量设置 【先赞后看养成习惯】求关注点赞收藏&#x1f60a; 安装VS2019时建议默认安装地址&#xff0c;最好不要改动&#xff0c;不然容易出问题 以下是安装完VS2019后环境变量的设置情况&#xff0c;C:\Program Files (x86)\Microsoft Visual Studi…

20240414,类的嵌套,分文件实现

笑死&#xff0c;和宝哥同时生病了 一&#xff0c;封装-案例 1.0 立方体类 #include<iostream>//分别用全局函数和成员函数判定立方体是否相等 using namespace std;class Cube { public:int m_area;int m_vol;int geth(){return m_h;}int getl() { return m_l; }int…

【群智能算法改进】一种改进的火鹰优化算法 改进的IFHO算法【Matlab代码#77】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 原始火鹰优化算法1.1 种群初始化1.2 火鹰点火阶段1.3 猎物移动阶段 2. 改进的火鹰优化算法2.1 Tent映射种群初始化2.2 非线性复合自适应惯性权重随机抉择策略 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源…

大模型实战案例:8卡环境微调马斯克开源大模型 Grok-1

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总…

【LeetCode: 705. 设计哈希集合 + 数据结构设计】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

免费VPS云服务器汇总,最长永久免费使用

目前云服务器市场竞争很激烈&#xff0c;为了方便吸引上云&#xff0c;很多云计算服务商提供免费试用云服务器&#xff0c;下面给大家整理汇总一下免费VPS云服务器&#xff0c;最长永久免费使用&#xff01; 一、雨云&#xff08;优惠码:ABC&#xff09; 活动地址&#xff1a;…

通讯录的实现(顺序表版本)

我们知道通讯录是基于顺序表的前提下&#xff0c;要写好通讯录我们就要深入了解好顺序表。我们先来看看什么是顺序表。&#xff08;注意今天代码量有点多&#xff0c;坚持一下&#xff09;。冲啊&#xff01;兄弟们&#xff01; 顺序表的简单理解 对于顺序表&#xff0c;我们首…

软件测试 测试开发丨Pytest结合数据驱动-yaml,熬夜整理蚂蚁金服软件测试高级笔试题

编程语言 languages: PHPJavaPython book: Python入门: # 书籍名称 price: 55.5 author: Lily available: True repertory: 20 date: 2018-02-17 Java入门: price: 60 author: Lily available: False repertory: Null date: 2018-05-11 yaml 文件使用 查看 yaml 文件 pych…

2024.4.19 Python爬虫复习day07 可视化3

综合案例 需求: 已知2020年疫情数据,都是json数据,需要从文件中读出,进行处理和分析,最终实现数据可视化折线图 相关知识点: json json简介: 本质是一个特定格式的字符串 举例: [{},{},{}] 或者 {}python中json包: import jsonpython数据转为json数据: 变量接收json…

刷题之Leetcode206题(超级详细)

206.反转链表 力扣题目链接(opens new window)https://leetcode.cn/problems/reverse-linked-list/ 题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 思路 如果再定义一个新的链表&#xff0…

Linux文本编辑器vim使用和分析—2

目录 1.对vim的简单理解&#xff1a; 2.看待vim的视角&#xff1a; 3.命令模式&#xff1a; 3.1vim被打开后默认的模式&#xff1a; 3.2命令模式切换插入模式&#xff1a; 3.3其他模式回到命令模式&#xff1a; 3.4光标定位&#xff1a; 4.插入模式(编辑模式)&#xff1…

赋能未来:AI技术革新中的创业契机

目录 前言 一、行业解决方案 1、行业参考说明 2、操作步骤建议 二、智能产品和服务 1、行业参考说明 2、操作步骤建议 三、教育和培训 1、行业参考说明 2、操作步骤建议 总结 前言 随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;越来越多的创业…

【Java】新手一步一步安装 Java 语言开发环境

文章目录 一、Windows 10 系统 安装 JDK8二、 Mac 系统 安装 JDK8三、IDEA安装 一、Windows 10 系统 安装 JDK8 &#xff08;1&#xff09;打开 JDK下载网站&#xff0c;根据系统配置选择版本&#xff0c;这里选择windows 64位的版本&#xff0c;点击下载&#xff08;这里需要…