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。

文中部分代码摘录自微信公众平台作者 “ 一只前端小菜鸟 ”,喜欢请支持原作者,感谢! 
在这里插入图片描述

posted @ 2020-09-30 16:11  小琪琪来啦  阅读(6586)  评论(0编辑  收藏  举报
欢迎大家来到我的博客:武汉雅思 | 武汉托福 | 新航道 | 雅思培训 | dnfsf | 天龙sf | 热血江湖sf | 天龙sf | dnfsf