技术标签： Web前端
<div id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
一般用于dom操作
其实在没有学习前端框架之前使用dom操作非常的普遍，但是前端框架的一个好处就是避免使用dom底层操作，安全并且高效，但是有时候我们又不可避免的使用它，所以vue给dom操作留了一个后门，让我们在不得以的情况下使用它完成我们的功能！
在指定元素上，添加ref=“名称A”；
在获取的地方加入this.$refs.名称A:
1. 如果ref放在了原生dom元素上，获取的诗句就是原生的dom对象
2. 如果ref放在组件对象，获取的就是组件对象。
实例：
app.vue template:
<template>
<div>
请输入内容
<input type="text" name="" v-model="text">
显示：{ {text | myFilter }}
<!--子组件-->
<hello-world ref="sub"></hello-world>
<!--原生dom对象-->
<div ref="myDiv">heiehi</div>
</div></template>
app.vue script:
<script>
import HelloWorld from './components/HelloWorld.vue'; //引入子组件helloworld
export default {
components:{
helloWorld:HelloWorld
},
//该函数创建了组件，数据已经完成初始化，但是dom还未生成
create(){
console.log('created:', this.$refs.myDiv);
},
//数据装载到了dom上面，各种数据已经就位，将数据渲染到dom上，dom生成：mounted英文意思：装载，表示数据已经装载到dom上
mounted(){
console.log('mounted:', this.$refs.myDiv); //获取原生对象的dom
console.log(this.$refs.sub.$el); //获取组件对象的dom
this.$refs.myDiv.innerHTML="nihao"; //改变原生对象的dom元素值
this.$refs.sub.$el.innerHTML="我改变了子类"; //如果组件对象中只有一个div元素，这个操作是可以。
this.$refs.sub.$el.children[0].innerHtml="我改变了子类";//存在了多个div元素，通过这种方式获取，即使组件对象元素中使用ref，父组件没有办法获取到从而指定一个子组件的元素值，只能通过dom操作方式。
}
}
</script>
文章浏览阅读774次。1 概述Lotus 软件试用下载立即下载最新版本的 IBM Lotus 试用软件，轻松体验产品的最新特性！下载试用版：Lotus Domino Designer V8.5.1 ..._domino8.5.1下载
文章浏览阅读561次。HP惠普光影精灵9 笔记本电脑 Victus by HP 16.1英寸游戏本16-r0000(76T04AV)原厂Windows11原装出厂OEM系统_光影精灵9 16.1
文章浏览阅读2.3w次，点赞3次，收藏19次。1、centos复制文件夹到指定目录命令：cp 需要复制的文件夹 -a 复制到指定目录的位置路径-a 参数： 表示复制所有的目录#把dockerfiles文件夹及里面所有的文件复制到xz目录下[root@localhost SingleInstance]# cp dockerfiles/ -a /xz/2、复制后的文件位置如下图..._centos复制文件夹到指定目录
文章浏览阅读5.3k次，点赞32次，收藏33次。ruoyi-vue-pro yudao 项目bpm模块启用及相关SQL脚本_工作流模块 yudao-module-bpm - 表结构未导入
文章浏览阅读432次。Java生成随机UUID_java自动生成uuid
文章浏览阅读518次，点赞7次，收藏9次。参数，我们告诉tar命令在解压时剥离一层目录。首先，让我们通过一个例子来理解这个概念。但是，如果你想在解压后去掉。目录被剥离了，只剩下。_tar --strip 1
文章浏览阅读3.4k次。我们都知道，android的UI操作并不是线程安全的，因此如果多个线程同时操作UI的话，会导致线程安全问题，因此android制订了一条规则，只允许UI线程（即主线程）进行UI操作，而且由于一些耗时操作例如下载，网络访问等，如果放在主线程执行，这样可能会抛出一个异常 ANR异常（Application Not Responding）将会阻塞UI线程，从而会导致程序无响应。因此我们会将一些耗时操_messagequeue handler looper使用
文章浏览阅读82次。Linux系统中文件具有的基本属性为读、写和执行，这些属性属于较高层次的属性，也是普通用户能够看到的属性，它与具体的文件类型系统无关。在文件系统层次上（属于较低层），文件同样具有很多属性，这些属性是依赖于某个特定的文件系统的。chattr指令用来设置基于“ ext2/ext3”文件系统的底层属性。chattr +[ASacDdIijsTtu] 要改变文件系统属性的文件chat..._安卓使用chattr指令后卡开机第一屏
文章浏览阅读66次。前言有封装的想法好久了，项目中有不少地方需要使用导入功能，导入虽说不能，但是每次都要为了特定类写一个特定方法，很麻烦，我很讨厌一直写这种东西了，正好趁着这次机会就写一个可以解决这种问题的小项目。maven <dependency> <groupId>org.apache.poi</groupId> <artifactI..._poi导入的通用方法封装
文章浏览阅读1.4k次。机械臂控制器IO电压测试1.准备1.1机械臂控制器型号确定实验室机械臂控制器是标准型，IO类型是NPN型。1.2 Mini IO 说明用于确定测试用的IO端口号。1.3 Mini IO电源设置控制器Mini IO默认为外部电源，在此不做改变。1.4 外部电源接线1.5 实验工具外部电源（24DC）、万用表、接线端子（2个）。2.实..._富士康机械手i/o板输出电压
文章浏览阅读1.9k次。这个是为了权限检查那篇的扩展。从数据方面来考虑，我们要把不同系统的数据拿过来，然后给用户看。这里就涉及到权限了，根据职权不同，能看到的数据不同。跟ERP不同，ERP那边是你能进行哪些操作，但是BW这边是你能看到什么数据，和进行哪些操作。咱就只知道BW的皮毛，就只能总结总结BW的。首先，咱的用户简单分为 管理员用户和报表用户。文章目录权限对象分析授权创建role和profile分析授权的实现权限对象啥是权限对象？就像是一块块门禁令牌，你有了不同的令牌，通过不同的入口，别人检查了后才给你进。如果_bw账号权限
文章浏览阅读705次，点赞9次，收藏20次。从古至今，如何用最有效的加密手段保护信息的安全性使之不被窃取、篡改或者破坏都是人们在信息传播中普遍关注的重大问题。最古老的文件加密手段莫过于对称加密，什么是对称加密，打个比方，有一个商人需要给合作伙伴送一批贵重的货物，他便将货物放在一个设置好密码的箱子中，这个密码只有商人知道，同时他又将设置好的密码提前告知合作伙伴，货物送达后，合作伙伴便可以用被告知的密码打开箱子取出货物。即用一种方法加密, 用同一种方法解密, 即为对称加密。_rsa加密算法的应用代码