2.0版本v-el v-ref废除,使用ref代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<!--<script src="vue-resource.js"></script>-->
</head>
<body>
<div id="app">
<button @click="getdom">获取dom对象</button>
<div ref="mydiv" id="div1">div1内容</div>
<button @click="getcom">获取组件对象</button>
<login ref="mydom" >组件内容</login>
</div>
</body>
<script>
new Vue({
el:'#app',
methods:{
getdom:function(){
//获取id=div1的对象(的内容)有两种方式可以完成
//传统的方法
console.log(document.getElementById("div1").innerHTML);
//vuejs的写法
console.log(this.$refs.mydiv.innerHTML);
},
getcom:function(){
//获取组件对象
console.log(this.$refs.mydom);
//获得组件数据内容
console.log(this.$refs.mydom.subname);
}
},
components:{
'login':{
data:function(){
return{
subname:'子组件名字'
}
},
template:'<h2>这是子组件</h2>'
}
}
});
</script>
</html>