v-el
作用：
通过v-el我们可以获取到DOM对象。
v-ref
作用：
通过v-ref获取到整个组件（component）的对象。
示例
源码
<!DOCTYPE html>
<html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="demo">
<h2>组件对象</h2>
</template>
<div id="app">
<h2 v-el:myh2>DOM对象</h2>
<button @click="getDom">获取DOM对象</button>
<hr>
<demo v-ref:mycom></demo>
<button @click="getCom">获取组件对象</button>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//创建Vue对象
new Vue({
el:'#app'
,methods:{
getDom(){
console.log(this.$els.myh2);
}
,getCom(){
console.log(this.$refs.mycom);
}
}
,components:{
'demo':{
template:'#demo'
}
}
});
</script>
</body>
</html>
第一个方法中，其DOM对象是通过v-el将当前的h2的DOM对象绑定到this. e l s 中 ， 其 中 m y h 2 即 为 当 前 D O M 对 象 的 名 称 ， 这 里 注 意 的 是 ， 这 里 是 区 分 大 小 写 的 ， 假 如 说 我 们 在 控 件 中 用 v − e l : m y H 2 定 义 ， 则 在 调 用 的 时 候 ， 仍 然 使 用 t h i s . els中，其中myh2即为当前DOM对象的名称，这里注意的是，这里是区分大小写的，假如说我们在控件中用v-el:myH2定义，则在调用的时候，仍然使用this. els中，其中myh2即为当前DOM对象的名称，这里注意的是，这里是区分大小写的，假如说我们在控件中用v−el:myH2定义，则在调用的时候，仍然使用this.els.myh2，否则会出现undefined信息。
第二个方法中，其组件对象通过v-ref将当前组件绑定到this. r e f s 中 ， 在 这 里 一 样 得 注 意 大 小 写 问 题 ， 如 果 我 们 将 组 件 的 名 称 定 义 为 v − r e f : m y C o m ， 则 组 件 的 调 用 仍 然 是 t h i s . refs中，在这里一样得注意大小写问题，如果我们将组件的名称定义为v-ref:myCom，则组件的调用仍然是this. refs中，在这里一样得注意大小写问题，如果我们将组件的名称定义为v−ref:myCom，则组件的调用仍然是this.refs.mycom
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
