vue-vue实例属性

转载

mob60475705a319 2021-08-26 17:04:00

文章标签 Vue html 自定义 vue.js 数据 文章分类 代码人生

一、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>

vue-vue实例属性_自定义

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>

vue-vue实例属性_html_02

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>