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 条评论
登录 后参与评论

相关文章

来自专栏天天

动画

632
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb04-jQuery(Java真正的全栈开发)

? jQuery 一.jQuery入门 1.javascript类库 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客...

3689
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

3216
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

3697
来自专栏Angular&服务

数据绑定

1143
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2729
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

1202
来自专栏互联网开发者交流社区

JS总结

1614
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

24010
来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

971

扫码关注云+社区

领取腾讯云代金券