VUE中操作dom元素的几种方法(最新推荐)
VUE中操作dom元素
方法一：
访问子组件实例或子元素
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个 ref 属性的组件里，你可以使用：
this.$refs.usernameInput
来访问这个 实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该 组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如：
<input ref="input">
甚至可以通过其父级组件定义方法：
methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.input.focus()
}
}这样就允许父级组件通过下面的代码聚焦 里的输入框：
this.$refs.usernameInput.focus()
当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
方法二：
使用自定义指令
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus property，如下：
<input v-focus>
扩展：
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要弹出个弹框，然后我点击对应的关闭按钮，关闭弹框，但是新增按钮和关闭按钮操作的是另一个元素，所以需要获取dom元素进行操控，那么在vue中怎么操作dom呢？
以下是常用的三种方法：
1、jQuery操作dom（推荐指数：★☆☆☆☆）：
只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。
2、原生js操作dom（推荐指数：★★★★☆）：
原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素......
3、vue官方方法：ref（推荐指数：★★★★★）：
vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法
下面让我来看个案例：
设置了一个button按钮，通过点击事件，然后弹出 新增的弹框 , 然后点击 “ × ”的button按钮，关闭弹框，此时需要操作弹框的dom元素，通过ref定义一个名字， 然后在方法中通过 this.$refs.名字 获取对应的dom
<template>
<div class="index-box">
<!--新增按钮-->
<input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
<!--新增数据源弹框-->
<div class="addDbSource-alert" ref="addAlert">
<div class="addAlert-top">
添加数据源
<input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
</div>
<div class="addAlert-content">
<div style="height: 1000px;"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Index",
data(){
return {
}
},
methods:{
// 点击新增按钮，弹出新增数据源的弹框
showAddAlert(){
this.$refs.addAlert.style.display = "block";
},
// 点击 × 关闭新增数据源的弹框
closeAddAlert(){
this.$refs.addAlert.style.display = "none";
},
},
created(){
}
}
</script>
<style scoped>
/* 容器 */
.index-box{
width: 100%;
height: 100%;
background: #212224;
display: flex;
}
/* 添加数据源按钮 */
#DbManagement-addBtn {
width: 100px;
height: 45px;
border: none;
border-radius: 10px;
background: rgba(29, 211, 211, 1);
box-shadow: 2px 2px 1px #014378;
margin-left: 20px;
margin-top: 17px;
cursor: pointer;
font-size: 20px;
}
/*新增数据源弹框*/
.addDbSource-alert{
width: 500px;
height: 600px;
background: #2b2c2f;
position: fixed;
left: calc(50% - 250px);
top: calc(50% - 300px);
display: none;
}
/*新增弹框头部*/
.addAlert-top{
width: 100%;
height: 50px;
background: #1dd3d3;
line-height: 50px;
font-size: 20px;
box-sizing: border-box;
padding-left: 20px;
}
/*新增弹框关闭*/
.addAlert-close{
background: #1dd3d3;
border: none;
font-size: 30px;
cursor: pointer;
float: right;
margin-right: 20px;
margin-top: 5px;
}
/*新增弹框内容部分*/
.addAlert-content{
width: 100%;
height: 550px;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 0px 30px 20px;
}
/* 滚动条效果 */
/* 设置滚动条的样式 */
.addAlert-content::-webkit-scrollbar {
width: 5px;
}
/* 滚动槽 */
.addAlert-content::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1);
border-radius: 10px; */
}
/* 滚动条滑块 */
.addAlert-content::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(29, 211, 211, 1);
/* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
}
.addAlert-content::-webkit-scrollbar-thumb:window-inactive {
background: rgba(29, 211, 211, 1);
}
</style>效果图：
以上就是vue中操作dom的方法
到此这篇关于VUE中操作dom元素的几种方法(最新推荐)的文章就介绍到这了,更多相关vue操作dom元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue this.$router.push(参数)实现页面跳转操作
这篇文章主要介绍了Vue this.$router.push(参数)实现页面跳转操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了在vue中封装的弹窗组件使用队列模式实现方法,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
这篇文章主要介绍了解决vue单页面 回退页面 keeplive 缓存问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue 项目页面卡死原因排查分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue 中的动态传参和query传参操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue引用CSS样式实现手机充电效果,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vue通过input筛选数据的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了Vue2 Watch监听,通过watch监听器,我们可以实时监控数据的变化,并且在数据发生改变时进行相应的操作,需要的朋友可以参考下2023-12-12
mapActions 就是将组件中的函数映射为对应的action，通过本文我们了解了mapActions 大概是用来干什么的，接下来介绍一下 mapActions 的具体用法，感兴趣的朋友一起看看吧2023-09-09
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
这篇文章主要介绍了vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
最新评论