专栏首页不止是前端Vue:Vue中操作DOM方法

Vue:Vue中操作DOM方法

jQuery的杰出的DOM操作能力相信已经深入每一个前端Coder,在使用Vue之前我并不能习惯数据驱动的概念,仍然幻想着把jQuery引入到Vue中,直到深入使用Vue以后才发现,原来许多jQ操作DOM的方法都不需要,数据驱动比手工操作DOM方便快捷许多。尽管如此,Vue仍然给了我们原生DOM控制的能力。

环境是由Vue-Cli搭建的webpack模板,省略CSS部分

HTML部分

<div id="app">
    <div class="box-wrapper" >
      <div class="box" ref="box1"></div>
      <div class="box" ref="box2"></div>
      <div class="box" ref="box3"></div>
      <div class="box" ref="box4"></div>
      <div class="control">
        <button @click="changeBlack">变黑色</button>
        <button @click="changeBlue">变蓝色</button>
      </div>
    </div>

  </div>

我们在html中建立了四个盒子,并且用ref属性标注,这个就是我们查找DOM元素的钩子。 Vue1.x中使用v-el标记DOM元素,v-ref标记组件元素,2.0以后统一使用ref标记

JavaScript部分

export default {
  name: 'app',
  components: {
    Hello
  },
  methods:{
    changeBlack(){
      console.log(this.$refs.box1);
      this.$refs.box1.style.background="black";
    },
    changeBlue(){
      this.$refs.box1.style.background="skyblue";
    }
  }
}

我们用两个button绑定了两个事件,分别是从DOM的角度去操作盒子变黑色,变蓝色。使用this.$refs.box1去取得我们的DOM元素,并且在控制台打印出了元素

打印出的元素

可见,这个就是我们常见的DOM对象,注意在1.X中分别使用$els$refs获取DOM对象和组件的集合,2.0以后统一使用$refs

2.x中的坑

我们知道HTML中是不区分大小写的,因此在JS中使用的驼峰命名法,在HTML中应该改为短横线命名法。比如 boxAlpha=>box-alpha 但是,使用ref标注的钩子不能使用短横线命名法,boxAlpha不等于box-alpha,在JS中用box-alpha也会报非法。所以, ref属性统一使用驼峰命名法 ref属性统一使用驼峰命名法 ref属性统一使用驼峰命名法

小结

在我们获取到对象以后,便能便捷的使用getElmentByXXX方法,也能通过原生方法去修改,获得DOM对象属性,这样jQ是不是就显得不再必要了呢? 但是Vue并不推荐使用手动操作DOM对象,获取DOM对象也最好用于获取对象的属性,如clientHeight等,当你真正领会数据驱动的时候,你就会发现你看到了一片新的天地。 就是这样:)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 密码学术语以及nodejs实现

    MrTreasure
  • 实用主义:前端cookie介绍及操作封装

    MrTreasure
  • API网关的常用功能及架构图

    MrTreasure
  • 内容高度小于窗口高度时版权 div 固定在底部

    网站建设中经常遇到文档内容高度小于窗口高度时底部版权 div 固定在底部的问题,纯 css div 底部不太好解决这个问题,这里使用 js 代码来对检测文档高度...

    Savalone
  • MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能...

    葡萄城控件
  • vue-学习笔记(更新中...)

    xing.org1^
  • 第122天:移动端开发常见事件和流式布局

    可以看到,在京东各个模块的主容器中,都设置了最大最小宽度和宽度100%,而在导航区块中,由于一行有5个小区块,所以设置了宽度为20%,使得小区块也能达到自适应的...

    半指温柔乐
  • Bootstrap响应式前端框架笔记十二——巨幕与缩略图

        巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下:

    珲少
  • 前三章 man手册 查看文件

    1 – 3章 1.1 man手册: 分1 - 9个区域,可以认为是一个一个小节 把man手册理解为一本书 第一节:可执行程序或shell命令 第二节:系统调用 ...

    xcywt
  • 【前端】CSS : float

    注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

    Gavin-ZYX

扫码关注云+社区

领取腾讯云代金券