前言：
目前你们对“获取dom对象的几种方法”可能比较注意，看官们都需要知道一些“获取dom对象的几种方法”的相关知识。那么小编同时在网络上汇集了一些关于“获取dom对象的几种方法””的相关知识，希望各位老铁们能喜欢，兄弟们一起来学习一下吧！获取DOM元素对象
都说Vue无需操作DOM对象，那么当我们在需要拿到页面的一个DOM对象的时候，我们该如何操作呢，这个时候Vue本身已经给我们想到了解决方案，那么就是通过Vue的ref对象来获取指定的ref【reference】值的DOM元素，示例如下：
<body>
<div class="app" ref="cce">
<button @click="showEle">打印app标签</button>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el: ".app",
methods: {
showEle() {
console.log(this.$refs.cce.innerHTML)
}
}
});
</script>
获取template元素对象
<body>
<div class="app">
<button @click="showEle">打印app标签</button>
<cce ref="cce"></cce>
</div>
</body>
<template id="temp">
<p>1</p>
</template>
<script type="text/javascript">
var vm1 = new Vue({
el: ".app",
components: {
'cce': {
template: "#temp",
}
},
methods: {
showEle() {
console.log(this.$refs.cce.$el)
}
}
});
</script>
获取template元素对象的数据和方法属性
<body>
<div class="app">
<button @click="showEle">打印app标签</button>
<cce ref="cce"></cce>
</div>
</body>
<template id="temp">
<p>1</p>
</template>
<script type="text/javascript">
var vm1 = new Vue({
el: ".app",
components: {
'cce': {
template: "#temp",
data: () => {
return {
msg: 'cce'
}
},
methods:{
show(){
console.log('子组件的show方法')
}
}
}
},
methods: {
showEle() {
console.log(this.$refs.cce.msg)
this.$refs.cce.show()
}
}
});
</script>
标签： #获取dom对象的几种方法
