技术标签： 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>
文章浏览阅读1.3k次。Table of Contents1 在ubuntu 10.04上面编译bochs 2.2.6遇到了一些编译问题1.1 修改源文件 symbols.cc1.2 安装如下package:1.3 config1.4 make1 在ubuntu 10.04上面编译bochs 2.2.6遇到了一些编译问题symbols.cc: At global scope_gdb怎么调试bochs
文章浏览阅读82次。一、题解方法此题不能采用暴力枚举的办法，利用哈希表先将输入数据分类，然后针对key值相同的雪花，再进一步进行细致地判断。key值采取雪花6个arm值加和，进行粗略比较，因为只有在key值相同的前提下，才有可能两个雪花完全一致。如果两个雪花key值相同，再分别比较每一个arm的长度，顺时针、逆时针比较判断二者异同。只要发现存在相同的雪花，就返回结果。二、题解代码 1...
文章浏览阅读1.3k次。前面的话这篇文章记录阿里云服务器的配置。小柒所使用的系统是CentOS.连接服务器进入自己的云服务器 --》 进入实例：点击更多，重置自己的密码：重置之后，重启实例。点击远程连接：成功登录之后：安装nginxyum -y install nginx// 检查是否安装成功nginx -v 成功安装：安装好的文件位置：/usr/sbin/nginx：主程序/et..._nginx 配置修改 jenkins 自动部署
文章浏览阅读3.1k次。效果图： 第一部分：学习要点：1.核心方法2.option 参数3.工具方法传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js 表单的 Ajax 提交插件将解决这个问题。一．核心方法官方网站：http://ma_注册表单里面性别代码怎么写
文章浏览阅读8k次。OmniGraffle 7 Mac 注册码账号：Appked密码：MFWG-GHEB-HYTW-CGHT-CSXU-QCNC-SXU_omnigraffle7许可证密钥
文章浏览阅读1k次。宝塔搭建ECS下载站时Apache httpd访问出现路径与文件名乱码问题的解决方法_宝塔 下载文件名乱码
文章浏览阅读3.8k次。最近需要做一个能抽奖发红包的H5活动，用在微信上，本身微信支付自带了发红包功能，但是奈何开通此功能需要微信支付入驻满90天并且有1个月以上的交易流水，所以就放弃了，然后采用第三方接口实现红包，第三方接口正常的逻辑是：钱充值到第三方平台，其实钱是冲到了第三方的微信支付账号，然后调用第三方接口，第三就给用户发送红包链接，用户点击就可以领取红包啦。这里采用的第三方接口是：摇摇啦SCRM（技术Wechat：18674509508） 正常流程是：1、注册账号；2、可以找技术申请接口测试权限；3、正式使用的_代发微信红包
文章浏览阅读937次。题意：给出英文，翻译成数字形式。分析：运用sscanf函数将每个数字提取出来，用num[i]存这些数字，数字中有100,1000,1000000是位权，因为如果像普通的比如twenty two的话，只要简单的相加。那么碰到关键词我是这么想的，我建立四个int型变量hsum，tsum，msum和sum。看名字可以看出hsum就是用来存碰到关键词hundred时的和，其他依此类推，sum就存没有关_poj2121
文章浏览阅读2.9w次，点赞35次，收藏290次。yolov5选择合适自己的超参数-超参数进化Hyperparameter Evolution前言1. 初始化超参数2. 定义fitness3. 进化4. 可视化报错问题前言yolov5提供了一种超参数优化的方法–Hyperparameter Evolution，即超参数进化。超参数进化是一种利用 遗传算法(GA) 进行超参数优化的方法，我们可以通过该方法选择更加合适自己的超参数。提供的默认参数也是通过在COCO数据集上使用超参数进化得来的。由于超参数进化会耗费大量的资源和时间，如果默认参数训练出来的结_yolov5超参数进化
文章浏览阅读271次。足球联赛管理系统主要目的是对足球联赛中心所有的足球联赛信息进行管理，并且合理管理好管理员发布球队、球员和比赛信息，会员浏览查看球队和比赛信息的流程。提高足球联赛管理的工作效率，降低管理的成本。本系统选用Windows作为服务器端的操作系统，开发语言选用Java，数据库选用Mysql，SSM(Spring+SpringMVC+MyBatis)框架,使用mybatis数据库连接技术，使用eclipse作为系统应用程序的开发工具，Web服务器选用Tomcat版本。下面分别简单阐述一下这几个功能模块需求。1.登
文章浏览阅读146次。JavaScript DataBase ConnectorJSDBC:提供Javascript有效的连接数据库，目前支持MySQL、SQLite、ACCESS，后期会支持更多的数据库；在从事AJAX开发的工程师肯定会希望有一个通过AJAX直接连接数据库的组件，这样，可以省掉后台很多的操作步骤，比如免去了部署JAVA的运行环境，免去了写很多复杂的JDBC调用，不管出于调试的需要还是应用的需要，JSD..._jsdbc
文章浏览阅读1.2k次。这是在我研究相对布局和绝对布局的时候顺带发现的。我们都知道，普通的Android界面如图所示，从上到下依次是statusbar，actionbar，内容，虚拟按键。要获取状态栏高度，一种比较常规的做法是： private int getStatusBarHeight(Context context) { int result = 0; _getresources().getidentifier("status_bar_height