Vue基础进阶之常用的实例属性

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>

4个常用的实例属性

更多实例属性：https://cn.vuejs.org/v2/guide/instance.html

Vue基础进阶 之 常用的实例属性

猜你喜欢

Vue基础进阶之常用的实例属性