vue实例的属性和方法

一、 vue实例的属性和方法

　　1、属性

　　　　1、常用属性

　　　　　　 vm.$el #获取的是个dom对象可以点下面的属性

　　　　　　 vm.$data #获取的是个。。。。

　　　　　　 vm.$options

　　　　　　vm.$refs

　　　　2、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例的属性和方法</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        {{msg}}
    
        <h2 ref="hello">你好</h2>
        <p ref="world">世界</p>
        <hr>

        <h1 ref="title">标题：{{name}}</h1>
    </div>

    <script>
        /*var vm=new Vue({
            // el:'#itany',
            data:{
                msg:'welcome to itany'
            },
            name:'tom',
            age:24,
            show:function(){
                console.log('show');
            }
        });*/

        /**
         * 属性
         */
        //vm.属性名 获取data中的属性，简单写法
        // console.log(vm.msg);

        //vm.$el 获取vue实例关联的元素
        // console.log(vm.$el); //DOM对象
        // vm.$el.style.color='red';

        //vm.$data //获取数据对象data
        // console.log(vm.$data);
        // console.log(vm.$data.msg);//获取数据对象data下的属性

        //vm.$options //获取自定义属性
        // console.log(vm.$options.name);
        // console.log(vm.$options.age);
        // vm.$options.show();

        //vm.$refs 获取所有添加ref属性的元素
        // console.log(vm.$refs);
        // console.log(vm.$refs.hello); //DOM对象
        // vm.$refs.hello.style.color='blue';


    </script>
    
</body>
</html>

View Code