ref 引用(vue获取DOM元素)
ref 引用
jquery 牛逼 简化了程序员操作DOM的过程
vue 优势: MVVM 在 vue 中,程序员不需要操作DOM。只需要把数据维护好!(数据驱动视图)
结论:在 vue 项目,强烈不建议大家安装和使用jQuery!!!
1. 什么是 ref 引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用。
每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用。
默认情况下, 组件的 $refs 指向一个
空对象
。
下面的代码仅仅是为了拿到组件的实例对象,用于说明 $refs 默认指向空对象
凡是以$开头的都是vue的内置成员
2. 使用 ref 引用 DOM 元素
如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作:
3. 使用 ref 引用组件实例
如果想要使用 ref 引用页面上的组件实例,则可以按照如下的方式进行操作:
这样就可以通过拿到组件my-counter
实例,调用组件里的 add() 方法
给 ref 起名字时,建议在后面加上 Ref,便于 ref 识别度
4. 后面为 ref 栗子:控制文本框和按钮的按需切换
通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换。示例代码如下:
5. 让文本框自动获得焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用,并调用原生 DOM 对象的 .focus() 方法即可。示例代码如下:
会报如下错误:
该错误在前端经常出现,意思并不是’focus’为undefined,而是调用该属性或者方法的前面那个为undefined
此时不生效,因为在执行完this.inputVisible = true
时,会立刻执行this.$refs.ipt.focus()
页面还没有来的及渲染,所以 this.$refs.ipt 是 undefined
6. this.$nextTick(cb) 方法
组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的 DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
不用生命周期函数updated的的原因是,当input切换到button的时候,还是会触发updated,此时没有已经input,所以没有‘ipt’会报错。
参考资料
ref 引用(vue获取DOM元素)相关推荐
- Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加 ...
- Vue 获取DOM元素 ,给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况 给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
- 八.vue获取dom元素
vue获取dom元素 方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二:使用ref,给相应的元 ...
- Vue笔记四:Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
- vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想 通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
- vue获取dom元素的内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- 使用Vue获取DOM元素
$refs获取DOM元素 Vue中,使用$refs属性可以获取DOM元素. 注意:需要在DOM元素中挂载ref属性后才能使用 //html<p id="app" ref = ...
- vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
最新文章
- mysql 集群操作系统_高性能MySQL集群详解(二)
- PyTorch 重磅更新,不只是支持 Windows
- java合并两个doc文件,java实现合并2个文件中的内容到新文件中
- 2020-11-27(下标寻址和指针寻址)
- 错误日志的实时抓取保证代码质量
- 通过 SAP Spartacus 的 Component 映射机制,更改默认购物车 Cart 页面
- python实例 91,92,93,94
- 《java并发编程实践》笔记
- docker搭建mysql主从
- 云服务器 ECS > 块存储 > 块存储介绍 > 块存储概述 请输入关键词
- myeclipse6_snv
- 全球第二大成人网站,黄了!
- java actionsupport_ActionSupport与action区别
- Unity调用打印机
- 网吧操作系统制作与优化
- [裴礼文数学分析中的典型问题与方法习题参考解答]5.1.13
- 极客空间-MySQL实战45天-第四天
- 互联网医疗泡沫破灭,一场从线上回归线下的技术圈地运动?
- Android中开启子线程的方法和应用场景
- 外贸公司邮箱怎么申请?往国外邮箱发邮件哪个好用?