标签：Vue DOM box1 refs 使用 操作 ref

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

 

链接：https://www.jianshu.com/p/728f03674444

标签：Vue,DOM,box1,refs,使用,操作,ref
来源： https://www.cnblogs.com/ls1519/p/13428308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。