Vue中获取DOM元素，进行操作

• 在指定元素上，添加ref=“名称A”

• 在获取的地方加入 this.$refs.名称A

  • 如果ref放在了原生DOM元素上，获取的数据就是原生DOM对象

    • 可以直接操作

  • 如果ref放在了组件对象上，获取的就是组件对象

    • 获取到DOM对象，通过this.$refs.sub.$el，进行操作

  • 对应的事件

    • created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
    • mounted 将数据已经装载到了DOM之上，可以操作DOM

<template>
	<div>
		<sub-vue ref="sub"></sub-vue>
		<div ref="myDiv"></div>
		{{text}}
	</div>
</template>
<script>
	import subVue from './sub.vue';
	export default {
		data(){
			return {
				text:''
			}
		},
		components:{
			subVue:subVue
		},
		created() {
			console.log('created:',this.$refs.myDiv);
		},
		mounted() {
			console.log('mounted:',this.$refs.sub.$el);
			this.$refs.sub.$el.innerHTML='么么哒';
			console.log('mounted:',this.$refs.myDiv);
			this.text='哈哈哈'
		}
}
</script>
<style>
</style>