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