<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-el 和 v-ref</title>
<link rel="stylesheet" href="./dist/css/bootstrap.css">
</head>
<body>
<div id="app">
<button @click="getdom">获取dom对象</button>
<div id="div1" ref="mydiv" > hello v-el</div>
<button v-on:click="getcom">获取组件对象</button>
<login ref="mycom"></login>
</div>
<script src="vue.js"></script>
<script src="vue-resource1.5.1.js"></script>
<script type="text/javascript">
new Vue({
el:‘#app‘,
data:{
},
methods:{
getdom(){
//获取到id= div1 的div对象
// console.log(document.getElementById(‘div1‘)) 1.0 version
//2.0 version
console.log(this.$refs.mydiv.innerHTML);
},
getcom(){//2.x version 写法
console.log(this.$refs.mycom.subname);
}
},
components:{
‘component_name‘:{
},
‘login‘:{
data(){
return{
subname:‘子组件名称‘
};
},
template:‘<h1>你好</h1>‘
}
}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/yanxiatingyu/p/9517885.html