Vue_(组件)实例属性

 

 

　　Vue实例属性与方法中文文档　　传送门

 

 

 　　Vue实例属性：vue实例直接调用的属性

 

　　Learn　　

　　　　一、vm.$data：获取属性

　　　　二、vm.$el：获取实例挂载的元素

　　　　三、vm.$options：获取自定义选项/属性

　　　　四、vm.$refs：获取通过ref属性注册的DOM对象

 

　　项目结构

　　

　　【每个demo下方都存有html源码】

 

 

一、使用vm.$data：获取属性

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            }
        });
        
        /*调用data*/
        console.log(vm.$data);
        console.log(vm.$data.msg);
     
</script>

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
        <h1>{{msg}}</h1>
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            }
        });
        
        
        /*调用$data*/
    console.log(vm.$data);
    console.log(vm.$data.msg);
     
</script>



</html>
Gary_InstanceProperties.html

 

 

二、vm.$el：获取实例挂载的元素

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            }
        });
        
        /*调用$el*/
        console.log(vm.$el);
        vm.$el.style.color ='red';
     
</script>

 

　　一个用于在控制台输出信息，一个用于修改el元素的样式

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
        <h1>{{msg}}</h1>
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            }
        });
        
        /*调用$el*/
        console.log(vm.$el);
        vm.$el.style.color ='red';
        
        /*调用$data*/
//    console.log(vm.$data);
//    console.log(vm.$data.msg);
     
</script>



</html>
Gary_InstanceProperties.html

 

 

三、vm.$options：获取自定义选项/属性

　　增加自定义选项并通过vm.$options去进行调用

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            },
                username : 'joey',
                password : '123',
                login(){
                    console.log("login")
                }
        });
        
        /*调用$options*/
        console.log(vm.$options.username);
        console.log(vm.$options.password);
        vm.$options.login();
        
     
</script>

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
        <h1>{{msg}}</h1>
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            },
                username : 'joey',
                password : '123',
                login(){
                    console.log("login")
                }
        });
        
        /*调用$options*/
        console.log(vm.$options.username);
        console.log(vm.$options.password);
        vm.$options.login();
        
        /*调用$el*/
//        console.log(vm.$el);
//        vm.$el.style.color ='red';
        
        /*调用$data*/
//    console.log(vm.$data);
//    console.log(vm.$data.msg);
     
</script>



</html>
Gary_InstanceProperties.html

 

 

四、vm.$refs：获取通过ref属性注册的DOM对象

 　　添加两个Dom去方便后续vm.$refs去进行操作

<div>
            <h1>{{msg}}</h1>
            <h2 ref='hello'>Hello</h2>
            <h2 ref='vue'>Vue</h2>
</div>

 

　　调用$refs去获得这两个DOM对象并对Hello的style样式进行改变

                /*调用$refs*/
            console.log(vm.$refs);
            vm.$refs.hello.style.backgroundColor = 'red';

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            <h1>{{msg}}</h1>
            <h2 ref='hello'>Hello</h2>
            <h2 ref='vue'>Vue</h2>
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                msg:'Hello Gary!!!'
            },
                username : 'joey',
                password : '123',
                login(){
                    console.log("login")
                }
        });
        
        /*调用$refs*/
            console.log(vm.$refs);
            vm.$refs.hello.style.backgroundColor = 'red';
        
        
        /*调用$options*/
//        console.log(vm.$options.username);
//        console.log(vm.$options.password);
//        vm.$options.login();
        
        /*调用$el*/
//        console.log(vm.$el);
//        vm.$el.style.color ='red';
        
        /*调用$data*/
//    console.log(vm.$data);
//    console.log(vm.$data.msg);
     
</script>



</html>
Gary_InstanceProperties.html

 

posted @ 2019-02-25 19:45  Cynical丶Gary  阅读(225)  评论(0)  编辑  收藏  举报