Vue脚手架的入门基础（三）—— 关于ref的使用

最新推荐文章于 2022-06-21 17:21:36 发布
最新推荐文章于 2022-06-21 17:21:36 发布
阅读量272 收藏
点赞数
分类专栏： Vue 文章标签： Vue ref DOM操作 组件对象 Vue脚手架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Biu_Destiny/article/details/120179015
版权

Vue脚手架的入门基础（三）—— 关于ref的使用

ref是Vue提供的一个用来替代id的东西
我们实现一个显示指定标签DOM的功能，先用平时的id标签属性来实现
在这里插入图片描述
在这里插入图片描述
然后我们用ref标签属性来解决这个问题
在这里插入图片描述
在这里插入图片描述
仔细看发现两个拿到的东西不一样了，id方法拿到的是渲染后的真实DOM内容，但是ref方法拿到的是HelloWorld这个VueComponent组件对象。

Biu_Destiny
关注
专栏目录
Vue脚手架的简单使用实例
10-18
首先，Vue脚手架使用Webpack作为项目构建工具。Webpack的核心功能是模块打包，它可以将CSS、JavaScript以及其他资源文件打包成一个或多个优化过的静态资源文件。Webpack还提供了开发服务器，用于在开发过程中提供...
每日一学Vue脚手架中基础的ref属性与原生id区别
小淼淼的博客
09-21 2668
每日一学：Vue脚手架中基础的ref属性与原生id区别
ref属性
qq_52200979的博客
04-20 1123
在Vue中可以通过设置ID来获取元素的DOM，但Vue中有专门的属性ref来替代ID。 如果是在当前组件的标签上设置ref，则它与使用id来获取DOM没什么区别。 但是如果你是在父组件对子组件设置了ref，则就与区别，用id来获取子组件是一个DOM结构，比如<h1>hello world</h1>就获取这个，而使用ref则是获取子组件的实例对象VC。可以获取vc后使用VC上的属性 使用格式，在父组件中用this.$ref.xxx ，xxx为你设置的ref名称 ...
vue ref属性(标签属性)
MCCLS的博客
07-20 8513
要点： 之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作 vue中用ref 并且可以在component上找到 这边this指向的就是app组件, 显示,其实ref就是id的代替者,只不过不需要再写dom元素操作了 其实就是你在哪个标签上加ref,就vue component 帮你收集哪个元素 比如这边在h1和btn上加了ref则在vue component的$ref中,收集了,title和btn元素 注意： 如果在一个组...
ref与idref的区别
明油的博客
09-17 3670
首先谈谈idref，下面是官方文档给出的两个例子： 第一个： &lt;bean id="theTargetBean" class="..."/&gt; &lt;bean id="theClientBean" class="..."&gt; &lt;property name="targetName"&gt; &lt;idre
Vue3--ref使用（解决ref无法获取dom元素的问题）
web15285868498的博客
03-06 4261
众所周知在vue2中，ref主要的作用还是便于快速的获取dom元素或组件，因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用，这篇文章写的十分全面： https://www.cnblogs.com/xumqfaith/p/7743387.html 本文还是针对Vue3中ref使用进行说明，重点是模板ref的使用。 1. ref用法1：基本类型封装，使数据响应式 vue3中为了节约资源，并不是全部数据都会进行响应式监听。.
vue脚手架及vue-router基本使用
08-27
Vue CLI（命令行接口）是官方提供的一个脚手架工具，用于快速搭建 Vue 项目。本文将详细介绍如何使用 Vue CLI 和 Vue Router 进行基本操作。 首先，确保已安装 Vue CLI。在安装好 Vue CLI 并执行 `cnpm install`...
VUE脚手架具体使用方法
10-16
Vue.js脚手架，即Vue CLI（Command Line Interface），是一个官方提供的强大构建工具，它简化了基于Webpack的项目设置，让开发者可以快速地初始化并构建Vue.js应用。Vue CLI通过预设的配置，免去了手动配置Webpack的...
vue脚手架——axios
03-30
Vue脚手架——axios Vue.js 是一套构建用户界面的渐进式框架，它的官方网址是 https://cn.vuejs.org/index.html。Vue.js 将必要的页面元素的相关属性（例如页面元素的样式、控件的值、页面元素的事件等）与数据进行...
vue-demo——脚手架.zip
12-02
通过学习和修改这个脚手架项目，可以迅速掌握Vue的开发流程，并以此为基础构建自己的项目。 总之，Vue.js提供了强大的框架和工具，使得前端开发变得简单而高效。Vue Demo脚手架是一个很好的起点，帮助开发者快速...
vue的虚拟dom,$refs
weixin_50515020的博客
08-31 694
虚拟dom就是使用js的object模拟真实的dom,当状态发生变化，更新之前做diff，达到最少操作dom效果 vue为什么引入虚拟DOM? vue1.0响应式粒度太细，Object.defineProperty()每个数据的修改都会通知watcher，进而通知dom去改变，对大型项目来说是一个噩梦！内存开销非常大。 vue2.0引入虚拟dom，通过diff之后再通知dom去改变，相对于1.0响应式的级别修改了，watcher只到组件，组件内部使用虚拟dom vue中虚拟DOM干了啥? 虚拟dom没
vue ref相当于 html 中的 id
u013400314的博客
06-21 782
ref有三种用法： 1、ref 加在普通元素上，用this.$refs.name 获取到的是dom元素2、ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法。3、如何利用 v-for 和 ref 获取一组数组或者dom 节点注意：1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 异步 中调用。2、如果ref 是通过v-for
vue中的ref属性（相当于正常dom结构中id）
富在术数不在劳身,利在势局不在力耕。
12-15 1203
<template> <div class="hello"> <h1 v-text="showmsg" ref='s1'></h1> <button ref='btn1' @click="cshow">click me</button> <Ceshi ref='ceshi1'/> <h1>{{ msg }}</h1> ...
vue里ref和$refs的区别
漏网之鱼的博客
09-15 2000
ref作用于组件 <div id="app"> <navbar></navbar> <pagefooter></pagefooter> </div> Vue.component('navbar',{ template:'#navbar', data:function () { return { navs:[] } } }); Vue.c
Vue2中ref属性的用法
热门推荐
大灰狼的小绵羊哥哥的博客
06-30 1万+
最近写东西遇到了莫名其妙的问题，用ref属性原以为它会获得一个数组http://www.jianshu.com/p/05c863ec2a23 // html ul> 　　li ref="refCon">1li> 　　li ref="refCon">2li> ul> // js created: function() { 　　this.$nextTick(() => { 　　　　console.
Vue学习之ref属性
qq_40837310的博客
02-14 5739
简介 主要讲解vue中的ref属性。 直接先说结论： 专门被用来给html元素和子组件注册引用信息的（id属性的替代者）。 该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。 使用方式： 打标志：<h1 ref=“xxx”>ref</h1> 或者 <School ref=“xxx”></School> 获取：this.$refs.xxx 代码： main.js： //引入vue依赖 impor
vue中ref与$refs详解
weixin_43905830的博客
05-01 5220
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs上，如果在普通的DOMM元素上使用，那么就是指向普通的DOM元素。 ref的三种用法： 1、ref加在普通元素上，用this.refs.name或者this.refs.name或者this.refs.name或者this.refs[‘name’]获取的1是DOM元素 <!DOCTYPE html> <h...
浅析Vue中ref属性与getElementById的区别
Dax1_的博客
02-26 3335
在常规html标签中应用 <div id="test" ref="test">test</div> console.log(document.getElementById('test')) console.log(this.$refs.test) ref与getElement获取到的内容是相同的 在组件中应用 <Test ref="testCom"/> console.log(this.$refs.testCom) ref获取到的是组件对象，可以调用该对象下的
vue.js ref and vm.$refs取代$("#id")操作dom
weixin_30578677的博客
11-08 434
在new Vue({ methods:{ 　　　　method:function(){ 　　 var $this = $(event.currentTarget);var $third_level = $('#third_level');var $second_level = $("#second_level");//$("#select_all").attr('id',$this.att...
使用Webpack搭建Vue2.0脚手架实战教程
知识点三：搭建Vue2.0脚手架项目 搭建Vue2.0脚手架项目通常需要借助Vue CLI（命令行界面工具）。Vue CLI是Vue.js的官方脚手架工具，可以快速启动一个项目，它使用了webpack作为底层构建工具，集成了大量预设的配置项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值