vue-vue实例属性
一、vue实例属性
vue实例的属性整理如下:
序号 | vue实例名称 | 类型 | 详细 | 是否只读 | 备注 |
1 | vm.$data | Object | Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 | ||
2 | vm.$props | Object | 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。 | v2.0新增 | |
3 | vm.$el | Elment | Vue 实例使用的根 DOM 元素。 | 只读 | |
4 | vm.$options | Object | 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处 | 只读 | |
5 | vm.$parent | Vue instance | 父实例,如果当前实例有的话 | 只读 | |
6 | vm.$root | Vue instance | 当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。 | 只读 | |
7 | vm.$children | Array<Vue instance> | 当前实例的直接子组件。 | 只读 | |
8 | vm.$slots | { [name: string]: ?Array<VNode> } | 用来访问被插槽分发的内容。 | 只读 | |
9 | vm.$scopeSlots | { [name: string]: props => Array<VNode> | undefined } | 用来访问作用域插槽。 | 只读 | v2.0新增 |
10 | vm.$refs | Object | 一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例。 |
只读 | |
11 | vm.$isServer | Boolean | 当前 Vue 实例是否运行于服务器。 | 只读 | |
12 | vm.$attrs | { [key: string]: string } | 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。 |
只读 | |
13 | vm.$listeners | { [key: string]: Function | Array<Function> } | 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。 |
只读 | v2.0新增 |
其中最常用的vue实例属性有:vm.$el、vm.$data、vm.$options、vm.$refs。
在js中如何访问vue实例的属性?vm.属性名 (eg:vm.msg)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue实例属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 </head> 9 <body> 10 <div id="hello"> 11 <h1>{{msg}}</h1> 12 </div> 13 <script> 14 let vm = new Vue({ 15 el:'#hello', 16 data:{ 17 msg:'欢迎来到王者荣耀', 18 flag:true, 19 }, 20 }); 21 22 //vm.属性名 获取data中的属性 23 console.log('获取msg',vm.msg); 24 </script> 25 </body> 26 </html>
二、常用的vue实例
1、vm.$el属性
vm.$el是DOM对象。获取vue实例关联的元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue实例属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 </head> 9 <body> 10 <div id="hello"> 11 <h1>{{msg}}</h1> 12 </div> 13 <script> 14 let vm = new Vue({ 15 el:'#hello', 16 data:{ 17 msg:'欢迎来到王者荣耀', 18 flag:true, 19 }, 20 }); 21 22 //vm.$el 获取vue实例关联的元素 23 vm.$el.style.color='red'; //设置vue关联的元素颜色为red 24 vm.$el.style.backgroundColor='gray'; //设置vue关联的元素背景颜色为gray 25 27 </script> 28 </body> 29 </html>
2、vm.$data属性
vm.$data 获取数据对象data。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue实例属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 </head> 9 <body> 10 <div id="hello"> 11 <h1>{{msg}}</h1> 12 </div> 13 <script> 14 let vm = new Vue({ 15 el:'#hello', 16 data:{ 17 msg:'欢迎来到王者荣耀', 18 flag:true, 19 }, 20 }); 21 22 //vm.$data 获取数据对象data 23 console.log(vm.$data) 24 25 </script> 26 </body> 27 </html>
3、vm.$data属性
获取vm中数据对象data。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue实例属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 </head> 9 <body> 10 <div id="hello"> 11 <h1>{{msg}}</h1> 12 <h2 ref='bobo'>你好呀bobo</h2> 13 <h3 ref='haha'>我的世界有你更精彩</h3> 14 </div> 15 <script> 16 let vm = new Vue({ 17 el:'#hello', 18 data:{ 19 msg:'欢迎来到王者荣耀', 20 flag:true, 21 },28 }); 29 30 //vm.$data 获取vm中数据对象data 31 console.log('vm中的data为:',vm.$data) //输出数据对象data 32 console.log('vm中的data中的msg为:',vm.$data.msg) //输出data中的msg 33 34 </script> 35 </body> 36 </html>
4、vm.$options属性
获取vm中获取自定义的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例属性</title> <!--引入vue--> <script src="../js/vue.js"></script> </head> <body> <div id="hello"> <h1>{{msg}}</h1> <h2 ref='bobo'>你好呀bobo</h2> <h3 ref='haha'>我的世界有你更精彩</h3> </div> <script> let vm = new Vue({ el:'#hello', data:{ msg:'欢迎来到王者荣耀', flag:true, }, //自定义属性 name:'monica', age:20, sayHello:function(){ console.log('I can say Hello'); } }); //vm.$options 获取自定义的属性 console.log('vm中自定义属性',vm.$options); //获取vm中自定义的属性 console.log('vm中自定义属性name为:',vm.$options.name); //获取vm中自定义的name属性 console.log('vm中自定义属性age为:',vm.$options.age); //获取vm中自定义的age属性 vm.$options.sayHello(); //调用sayHello()方法 </script> </body> </html>
5、vm.$refs属性
获取页面中所有添加了ref属性的DOM元素。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue实例属性</title> 6 <!--引入vue--> 7 <script src="../js/vue.js"></script> 8 </head> 9 <body> 10 <div id="hello"> 11 <h1>{{msg}}</h1> 12 <h2 ref='bobo'>你好呀bobo</h2> 13 <h3 ref='haha'>我的世界有你更精彩</h3> 14 </div> 15 <script> 16 let vm = new Vue({ 17 el:'#hello', 18 data:{ 19 msg:'欢迎来到王者荣耀', 20 flag:true, 21 }, 22 23 //vm.$refs 获取页面中所有添加ref属性的DOM元素 24 console.log('vm有ref属性的元素',vm.$refs) //获取页面上所有添加了ref属性的DOM元素 25 console.log('vm有ref属性为bobo的元素', vm.$refs.bobo) //获取ref=bobo的DOM元素 26 //对DOM元素进行操作 27 vm.$refs.bobo.style.backgroundColor='green'; //将ref=bobo的DOM元素背景设为green 28 vm.$refs.haha.style.backgroundColor='yellow'; //将ref=haha的DOM元素背景设为yellow 29 30 </script> 31 </body> 32 </html>