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