$el 获取vue绑定的元素的
$data 获取vue实例中的数据
$options 获取vue实例中的自定义属性
$refs 获取所有带ref属性的元素
实例：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="l+bx">
{{msg}}
<h1 ref='hello'>计算机网络技术</h1>
</div>
js代码：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#lbx',
data:{
msg:'学好硬本领,赢在软实力'
},
uname:'盛邦升华',
age:18
})
//$el
console.log(vm.$el);
vm.$el.style.color='red';
//$data
console.log(vm.$data);
//$options
console.log(vm.$options);
console.log(vm.$options.uname);
console.log(vm.$options.age);
//refs
console.log(vm.$refs);
console.log(vm.$refs.hello);
</script>
</body>
</html>
计算属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="lgy">
<h1>{{msg}}</h1>
<a href="">{{revMsg}}</a>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#lgy',
data:{
msg:'hello vue'
},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
</body>
</html>
网友评论