vue操作dom元素

使用DOM API直接找元素

<div class="box"></div>
	
<script>
	mounted () {
		let elm = this.$el.querySelector('.box)
	}
</script>

这种方法足够简单直观，Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。

使用自定义指令

<p  v-change='w'>1111</p>

Vue.directive('change',function(el,binding){
    console.log(el)
    console.log(binding);
})

refs

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法

<div  ref="box"></div>

mounted () {
    console.log(this.$refs.a)
}