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>

 

posted @ 2021-08-26 17:04  AnnLing  阅读(540)  评论(0)    收藏  举报