Vue实例属性：
vue实例直接调用的属性；
常用的实例属性：
vm.$data：获取属性；
vm.$el：获取实例挂载的元素；
vm.$options：获取自定义选项/属性；
vm.$refs：获取通过ref属性注册的DOM对象；
vm.$data：获取属性
vue代码；
<script> let vm= new Vue({ el:'div', data:{ msg:'欢迎来到perfect*博客园！！！' } }); /* $data*/ console.log(vm.$data.msg); console.log(vm.msg); </script>
HTML：
<h1>{{msg}}</h1>
在控制台可以看出都可以通过这两种方式打印出其内容
vm.$el：获取实例挂载的元素：
并且可以通过$el实例属性修改其样式：
vue代码：
/* $el*/ console.log(vm.$el); vm.$el.style.color='red';
vm.$options：获取自定义选项/属性
vue代码：
let vm= new Vue({ el:'div', data:{ msg:'欢迎来到perfect*博客园！！！' }, username:'perfect*', password:'123', login(){ console.log("Login"); } }); /* $options*/ console.log(vm.$options.username); console.log(vm.$options.password); vm.$options.login();//获取其方法
vm.$refs：获取通过ref属性注册的DOM对象；
也可以通过该实例属性修改其样式：
vue代码：
console.log(vm.$refs); vm.$refs.perfect.style.backgroundColor='red';
html:
<h3 ref='perfect'>perfect</h3> <h3 ref='perfect1'>perfect1</h3>
以上4个常用的实例属性总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05_常用的实例属性</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 8 </head> 9 <body> 10 <div> 11 <h1>{{msg}}</h1> 12 13 <h3 ref='perfect'>perfect</h3> 14 15 <h3 ref='perfect1'>perfect1</h3> 16 17 18 </div> 19 </body> 20 21 <script> 22 23 24 let vm= new Vue({ 25 el:'div', 26 data:{ 27 msg:'欢迎来到perfect*博客园！！！' 28 }, 29 username:'perfect*', 30 password:'123', 31 login(){ 32 console.log("Login"); 33 } 34 35 36 37 38 }); 39 40 // /* $data*/ 41 // console.log(vm.$data.msg); 42 // console.log(vm.msg); 43 // 44 45 // /* $el*/ 46 // console.log(vm.$el); 47 // vm.$el.style.color='red'; 48 49 /* $options*/ 50 // console.log(vm.$options.username); 51 // console.log(vm.$options.password); 52 // vm.$options.login();//获取其方法 53 54 /* $refs*/ 55 console.log(vm.$refs); 56 vm.$refs.perfect.style.backgroundColor='red'; 57 58 59 60 61 </script> 62 </html>