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。

文中部分代碼摘錄自微信公眾平台作者 “ 一只前端小菜鳥 ”，喜歡請支持原作者，感謝！