Vue中直接操作DOM元素操作

• 传统document 操作

<div id="oid" class="cla"></div>
<input type='input' name='age'>
<script>
 var odiv=document.getElementsByTagName('div') //获取div标签的伪数组
 var oinput=document.getElementsByName('age') // 获取 name属性伪数组(系统自带也可以人为添加)
 var odiv1=document.getElementsByClassName('cla') //获取cla类的伪数组
 var odiv2=document.document.getElementById('oid') //获取id为oid的实例

 var odiv3=document.querySelector('div#oid') //获取div标签的第一个
 var odiv4=document.querySelector('.cla')//获取类.cla标签的第一个
 var odiv5=document.querySelector('#oid')//获取#oid标签
 
 var odiv6=document.querySelectorAll('div')//获取div标签的伪数组
 var odiv7=document.querySelectorAll('.cla')//获取.cla标签的伪数组
 var odiv8=document.querySelectorAll('#oid')//获取#oid标签的伪数组
 
 document.documentElement 获取html
 document.body 获取body...
</script>

• 在vue的document的操作(使用框架,echarts,jquery )
  注意:在vue中存在虚拟dome操作 因此操作dome需要在vue实例挂载后进行
  1. mounted() {} vue实例挂载后 进行操作
  2. this.$nextTick(()=>{}) 在nextTick回调中进行

<div ref='odiv'> </div>

export default {
created(){
this.$nextTick(()=>{
console.log(this.$refs.odiv)
})
},
mounted() {
console.log(this.$refs.odiv)
}
}

ref其他使用

1.获取自定义组件实例,调用自定义组件方法