jQuery的杰出的DOM操作能力相信已经深入每一个前端Coder,在使用Vue之前我并不能习惯数据驱动的概念,仍然幻想着把jQuery引入到Vue中,直到深入使用Vue以后才发现,原来许多jQ操作DOM的方法都不需要,数据驱动比手工操作DOM方便快捷许多。尽管如此,Vue仍然给了我们原生DOM控制的能力。
环境是由Vue-Cli搭建的webpack模板,省略CSS部分

HTML部分

变黑色变蓝色
我们在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中的坑