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. 小陈WEB漏洞扫描器 V2.0

    小陈WEB漏洞扫描器 V2.0 小陈WEB漏洞扫描器 V2.0 https://pan.baidu.com/s/1NSmFCyxowEa3YlOuhvtwwQ

  2. Python字符串(一)

    一.get char 1.获取单个字符 字符串中的每一个字符都会对应一个唯一的下标(索引)用来表示字符串中的位置.下标从0开始依次增加:0对应的是第一个字符:也可以从从-1开始依次减小,-1代表最后一 ...

  3. oracle练习-day02

    .查询员工表和部门表.查询出雇员的编号,姓名,部门的编号和名称,地址.查询出每个员工的上级领导.在上一个例子的基础上查询该员工的部门名称.在上一个例子的基础上查询员工工资等级和他的上级领导工资等级.查 ...

  4. Q12问题

    1.我知道公司对我的工作要求吗? 2.我有做好我的工作所需要的材料和设备吗? 3.在工作中,我每天都有机会做我最擅长做的事吗? 4.在过去的七天里,我因工作出色而受到表扬吗? 5.我觉得我的主管或同事 ...

  5. save the transient instance before flushing错误解决办法

    错误原因: new了一个新对象,在未保存之前将它保存进了一个新new的对象(也即不是持久态). 解决办法: 在保存或更新之前把这个对象查出来(这样就是一个持久态) <set name=" ...

  6. python3列表操作

    1.Python列表脚本操作符 2.Python列表截取 切片的公式:[start : end : step] 1)切片的取值: list1 = [1, 4, 9, 16, 25] print(lis ...

  7. Github版本控制系统

    Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 特别推荐简单易懂的廖雪锋大神制作的学习教程: https://www.liaoxuefeng.com/wiki/896043 ...

  8. NO18 linux开机自启动设置--开机流程--中文乱码--查看行数

    第八题:装完系统后,希望让网络文件共享服务NES,仅在3级别上开机自启动,该如何做? 解答:什么是开机自启动,在Linux下软件服务随系统启动而启动的配置. 方法一:文件配置法,可以把要启动的服务的命 ...

  9. 2-10 就业课(2.0)-oozie:7、job任务的串联

    4.4.oozie的任务串联 在实际工作当中,肯定会存在多个任务需要执行,并且存在上一个任务的输出结果作为下一个任务的输入数据这样的情况,所以我们需要在workflow.xml配置文件当中配置多个ac ...

  10. 变相降价的iPhone,能挽救苹果在中国的命运吗?

    人无千日好,花无百样红.当年iPhone的横空出世不仅开辟了智能手机时代,还间接导致了诺基亚.黑莓等手机品牌的没落.十余年来,苹果凭借iPhone活得风光无限,并成为全球首个市值超万亿美元的公司.但进 ...