Vue2.x:Vue中操作DOM方法

Web前端 来源:Mr_Treasure 423℃ 0评论

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等,当你真正领会数据驱动的时候,你就会发现你看到了一片新的天地。
就是这样:)