Vue:Vue中操作DOM方法

2019年5月22日 197次阅读 来源: Mr_Treasure

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元素，并且在控制台打印出了元素

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

    原文作者：Mr_Treasure
    原文地址: https://www.jianshu.com/p/728f03674444
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞