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的使用的更多相关文章

  1. day 85 Vue学习七之vue-cookie

      Vue学习七之vue-cookie   通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies ...

  2. vue学习七之Axios

    JQuery时代,我们使用ajax向后台提交数据请求,Vue时代,Axios提供了前端对后台数据请求的各种方式. 什么是Axios Axios是基于Promise的Http客户端,可以在浏览器和nod ...

  3. day 87-1 Vue学习七之vue-cookie

      通过vue如何操作cookie呢 参考链接:https://www.jianshu.com/p/535b53989b39 第一步:安装vue-cookies npm install vue-coo ...

  4. vue 学习七 组件上使用插槽

    我们有时候可能会在组件上添加元素,就像下面那样 <template> <div id="a"> <com1> <p>我是渲染的值&l ...

  5. vue学习(七) v-model 双向数据绑定

    //html <div id="app"> <input type="text"v-model="msg" style=& ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  8. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  9. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  10. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

随机推荐

  1. 【剑指Offer面试编程题】题目1388:跳台阶--九度OJ

    题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1<=n< ...

  2. ubuntu18.04 复制或剪切某文件夹下的前x个文件到另一个文件夹下

    该代码可以将file_path_src文件夹中的前cnt个文件,剪切或复制到file_path_tar文件夹下,前提是file_path_src中的文件名可以排序.如VOC数据集提取某个类的图片和xm ...

  3. Prometheus 学习目录

    Prometheus 介绍 Prometheus 安装 https://www.bookstack.cn/read/prometheus-book/quickstart-why-monitor.md ...

  4. dir815_FW_102.bin路由器固件解压碰到的坑

    在跟随大神kczwa1进行路由器漏洞分析时,对dir815_FW_102.bin 固件文件用binwalk -e dir815_FW_102.bin命令进行解压时,在根目录squashfs-root下 ...

  5. 学习笔记:中国剩余定理(CRT)

    引入 常想起在空间里见过的一些智力题,这个题你见过吗: 一堆苹果,\(3\)个\(3\)个地取剩\(1\)个,\(5\)个\(5\)个地取剩\(1\)个,\(7\)个\(7\)个地取剩\(2\)个,苹 ...

  6. 使用redis集群中遇到的错误

    一. 上述错误的原因: 1.在redis服务器上关闭防火墙 2.可能是host写错了 上述错误的原因: 配置文件中jedisClient代表的是单机版的redis,但是在类中转化的时候转化的是集群版

  7. tomcat在windows下的监测

    一些老旧的系统部署在了windwos服务器上,而且总是容易挂,新机器申请不到,只能.. %tomcat%bin下有service.bat的tomcat版本 service.bat install se ...

  8. struts2--验证器

    1.输入验证: --struts2提供了一些基于Xwork Validation Framework的内建验证程序,使用这些验证程序不需要变编程,只要在一个XML文件里进行声明,声明的内容如下: &g ...

  9. 4专题总结-图论和DFS、BFS

    1图论: 1.1  133. Clone Graph https://leetcode.com/problems/clone-graph/#/description 思路:这题可以对照拷贝随机链表那道 ...

  10. IOS UIKIT_EXTERN, __attribute__((visibility ("default"))) 是啥玩意?

    问题提出 在学习IOS时候,碰到一个函数NSStringFromCGPoint (UIGeometry.h) 其原型是 UIKIT_EXTERN NSString *NSStringFromCGPoi ...