Vue获取DOM的几种方法
虽然Vue实现了MVVM模型,将数据和表现进行了分离,我们只需要更新数据就能使DOM同步更新,但是某些情况下,还是需要获取DOM元素进行操作(比如引入的某个库要求传入一个根dom元素作为根节点,或者写一些自定义指令),本文主要介绍几种在Vue中获取DOM元素的方法。
使用DOM API直接找元素
<script>
...
mounted () {
let elm = this.$el.querySelector('#id')
}
</script>
这种方法足够简单直观,Vue组件在patch阶段结束时会把this.$el
赋值为挂载的根dom元素,我们可以直接使用$el
的querySelector, querySelectorAll
等方法获取匹配的元素。
refs
<template>
<div ref="bar">{{ foo }}</div>
<MyAvatar ref="avatar" />
...
</template>
<script>
...
mounted () {
let foo = this.$refs['bar'] // 一个dom元素
let avatar = this.$refs['avatar'] // 一个组件实例对象
}
</script>
使用组件实例的$refs
即可拿到组件上ref
属性对应的元素。
如果ref属性加在一个组件上,那么拿到的是这个组件的实例,否则拿到的就是dom元素了。
值得注意的是包含v-for
循环模板指令的情况,其循环元素和子元素上ref
属性对应的都是一个数组(就算动态生成ref,也是数组):
<template>
<div v-for="item in qlist" :key="item.id" ref="qitem">
<h3>{{ item.title }}</h3>
<p ref="pinitem">{{ item.desc }}</p>
<p :ref="'contact'+item.id">{{ item.contact }}</p>
</div>
...
</template>
<script>
...
data () {
return {
qlist: [
{ id: 10032, title: 'abc', desc: 'aadfdcc', contact: 123 },
{ id: 11031, title: 'def', desc: '--*--', contact: 856 },
{ id: 20332, title: 'ghi', desc: '?/>,<{]', contact: 900 }
]
}
},
mounted () {
let foo = this.$refs['qitem'] // 一个包含dom元素的数组
let ps = this.$refs['pinitem'] // p元素是v-for的子元素,同样是一个数组
let contact1 = this.$refs['contact' + this.qlist[0].id] // 还是个数组
}
</script>
关于这个的原因,可以从Vue关于ref处理的部分代码得到:
function registerRef (vnode, isRemoval) {
var key = vnode.data.ref;
if (!isDef(key)) { return }
var vm = vnode.context;
// vnode如果有componentInstance表明是一个组件vnode,它的componentInstance属性是其真实的根元素vm
// vnode如果没有componentInstance则不是组件vnode,是实际元素vnode,直接取其根元素
var ref = vnode.componentInstance || vnode.elm;
var refs = vm.$refs;
if (isRemoval) {
...
} else {
// refInFor是模板编译阶段生成的,它是一个布尔值,为true表明此vnode在v-for中
if (vnode.data.refInFor) {
if (!Array.isArray(refs[key])) {
refs[key] = [ref]; // 就算元素唯一,也会被处理成数组
} else if (refs[key].indexOf(ref) < 0) {
// $flow-disable-line
refs[key].push(ref);
}
} else {
refs[key] = ref;
}
}
}
使用自定义指令
Vue提供了自定义指令,官方文档给出了如下的使用方法,其中el
就是dom元素的引用
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 在模板中
<template>
<input v-model="name" v-focus />
</template>
关于自定义指令,在一些组件库和事件上报等场景下非常有用,以后再专门写一篇文章讨论一下吧。
Vue获取DOM的几种方法的更多相关文章
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- javascript获取DOM对象三种方法
1. getElementByID() getElementByID()方法可返回对拥有指定ID的第一个对象的引用 2. getElementByTagName() getElementByTagNa ...
- Vue获取dom和数据监听
Vue获取dom对象 在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = ...
- PHP中获取星期的几种方法
PHP中获取星期的几种方法 PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...
- VC++获取IDC_EDIT的7种方法
VC++获取IDC_EDIT的7种方法 http://blog.csdn.net/baizengfei/article/details/7997618 //第一种方法 int number1, num ...
- C#获取当前路径的7种方法
总结C#获取当前路径的7种方法 C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName ...
- Java获取随机数的几种方法
Java获取随机数的几种方法 .使用org.apache.commons.lang.RandomStringUtils.randomAlphanumeric()取数字字母随机10位; //取得一个3位 ...
- spring 获取 WebApplicationContext的几种方法
spring 获取 WebApplicationContext的几种方法 使用ContextLoader WebApplicationContext webApplicationContext = C ...
- Struts2 后台获取路径的几种方法
Struts2 后台获取路径的几种方法 package actions.app; import java.io.File; import org.apache.struts2.ServletActio ...
- VC获取cookies的几种方法
方法一: CInternetSession::GetCookie This member function implements the behavior of the Win32 function ...
随机推荐
- 字符串内特殊字符的替换处理,如对\n的替换
一.对于字符串特殊字符的替换 对于字符串内,\n的处理,如何去掉 s='123,456\n' s1=s.strip('\n') s2=s.replace('\n','') print(s) print ...
- windows用curl报错
https://www.shuzhiduo.com/A/kmzLRmgl5G/ IE浏览器 -> 设置 -> Internet选项 -> 安全 -> 本地Internet -& ...
- 调度器42—进程exit退出流程
基于Linux-5.10 一.do_exit()简要流程 1. 执行路径 各驱动和内核机制中直接调用 SYSCALL_DEFINE1(exit, int, error_code) //exit.c 将 ...
- A、创建模式(5种)
设计模式的分类总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式. ...
- Mule获取Http参数
- python os.path模块函数功能
1.os.path.abspath(path) 获取绝对路径,实际上等于os.getcwd()+path 2.os.path.basename(path)取path最后的文件或文件名.如果path以/ ...
- SpringBoot导读
SpringBoot 一.导读 1.开发工具及技术栈 JDK:jdk1.8.0_191 开发工具:IntelliJIDEA 2020.3.2 SpringBoot: 简化Spring的开发 需要一定的 ...
- Ubuntu PostgreSQL数据库忘记密码
1. find / -name pg_hba.conf2. sudo vi /etc/postgresql/13/main/pg_hba.conf 3. 拉到最下面,把postgres所在行的md5改 ...
- C# 使用多线程的几种方式
1.Thread 详细介绍:https://www.cnblogs.com/cheng8/p/16147918.html 使用Thread类通过ThreadStart(无参数)或Parameteriz ...
- 关于前端:解决elementUI的对话框Dialog组件点击自动跳转到页面顶部问题
查看文档寻找解决办法 增加这两个参数即可完满解决 <el-dialog :lock-scroll="false" :append-to-body="true&quo ...