vue操作dom元素的三种方法

1.原生js操作dom

const dom = getElementById(‘box’)

2.vue官方方法：ref

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到

< div class=“set” ref=“up”> 
.set是我们要操作的dom对象，它的ref是 up

@click=“Alert” 
给父元素一个点击事件，

接下来我们来编写这个方法 
methods:{ 
this.$refs.addAlert.style.display = “block”; 
}

CSS还要吗？ 
那我把代码全粘过来你们自己看吧

                        < template  >    < div  id   =  " app  "  >    < 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  >    </ 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  >   #app  {  width  : 100%  ;  height  : 100%  ;  overflow-y  : auto  ;  }  /* 容器 */  .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  {  position  : fixed  ;  top  : 0  ;  left  : 0  ;  right  : 0  ;  bottom  : 0  ;  margin  : auto  ;  width  : 4rem  ;  height  : 4rem  ;  background  : #2b2c2f  ;  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%  ;  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  >  

CSS比正文和脚本加起来都多，如果你能看懂CSS，没理由学不会 ref

还有第三种方法，jQuery 操作dom，看完以后直呼不敢用

3.jQuery操作dom

只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，雅思考试是什么这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。

文中部分代码摘录自微信公众平台作者 “ 一只前端小菜鸟 ”，喜欢请支持原作者，感谢！