vue学习(七)refs的使用
ref的使用只有在特殊的情况下使用
1.如果给标签添加ref,获取的就是真实的DOM节点
2. 如果给子组件添加ref,获取的就是当前的子组件对象 例子:
<div id="app">
<App></App>
</div> <script>
const Test={
data(){
return{ }
},
components:{ },
template: `
<div> </div> `
};
const App={
data(){
return{ }
},
components:{ },
mounted(){
// 1.如果给标签添加ref,获取的就是真实的DOM节点
// 2. 如果给子组件添加ref,获取的就是当前的子组件对象
// ---------
// 有可能有很多ref所有写成refs
console.log(this.$refs.btn);
// input 框自动获取焦点
this.$refs.input.focus();
},
template: `
<div>
<Test></Test>
<button ref="btn">改变生死</button>
<input type="text" ref="input">
</div> `
};
let app = new Vue({
el:'#app',
data:{ },
components:{
App
}
})
</script>
vue学习(七)refs的使用的更多相关文章
- day 85 Vue学习七之vue-cookie
Vue学习七之vue-cookie 通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies ...
- vue学习七之Axios
JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式. 什么是Axios Axios是基于Promise的Http客户端,可以在浏览器和nod ...
- day 87-1 Vue学习七之vue-cookie
通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies npm install vue-coo ...
- vue 学习七 组件上使用插槽
我们有时候可能会在组件上添加元素,就像下面那样 <template> <div id="a"> <com1> <p>我是渲染的值&l ...
- vue学习(七) v-model 双向数据绑定
//html <div id="app"> <input type="text"v-model="msg" style=& ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
随机推荐
- 【剑指Offer面试编程题】题目1388:跳台阶--九度OJ
题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1<=n< ...
- ubuntu18.04 复制或剪切某文件夹下的前x个文件到另一个文件夹下
该代码可以将file_path_src文件夹中的前cnt个文件,剪切或复制到file_path_tar文件夹下,前提是file_path_src中的文件名可以排序.如VOC数据集提取某个类的图片和xm ...
- Prometheus 学习目录
Prometheus 介绍 Prometheus 安装 https://www.bookstack.cn/read/prometheus-book/quickstart-why-monitor.md ...
- dir815_FW_102.bin路由器固件解压碰到的坑
在跟随大神kczwa1进行路由器漏洞分析时,对dir815_FW_102.bin 固件文件用binwalk -e dir815_FW_102.bin命令进行解压时,在根目录squashfs-root下 ...
- 学习笔记:中国剩余定理(CRT)
引入 常想起在空间里见过的一些智力题,这个题你见过吗: 一堆苹果,\(3\)个\(3\)个地取剩\(1\)个,\(5\)个\(5\)个地取剩\(1\)个,\(7\)个\(7\)个地取剩\(2\)个,苹 ...
- 使用redis集群中遇到的错误
一. 上述错误的原因: 1.在redis服务器上关闭防火墙 2.可能是host写错了 上述错误的原因: 配置文件中jedisClient代表的是单机版的redis,但是在类中转化的时候转化的是集群版
- tomcat在windows下的监测
一些老旧的系统部署在了windwos服务器上,而且总是容易挂,新机器申请不到,只能.. %tomcat%bin下有service.bat的tomcat版本 service.bat install se ...
- struts2--验证器
1.输入验证: --struts2提供了一些基于Xwork Validation Framework的内建验证程序,使用这些验证程序不需要变编程,只要在一个XML文件里进行声明,声明的内容如下: &g ...
- 4专题总结-图论和DFS、BFS
1图论: 1.1 133. Clone Graph https://leetcode.com/problems/clone-graph/#/description 思路:这题可以对照拷贝随机链表那道 ...
- IOS UIKIT_EXTERN, __attribute__((visibility ("default"))) 是啥玩意?
问题提出 在学习IOS时候,碰到一个函数NSStringFromCGPoint (UIGeometry.h) 其原型是 UIKIT_EXTERN NSString *NSStringFromCGPoi ...