vue教程2-04 vue实例简单方法

vue教程2-04 vue实例简单方法

vue实例简单方法:


vm.$el -> 就是元素

vm.$data -> 就是data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        a==>{{a}}
        <br>
        b=={{b}}
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:{
                    //业务逻辑代码,b的值完全取决于return回来的值
                    get:function(){
                        return this.a+2;//默认调用get
                    },
                    set:function(val){
                        this.a=val;
                    }
                }
            }
        });

        vm.$el.style.background='red';//vm.$el    ->  就是元素
        console.log(vm.$data);//vm.$data  ->  就是data,但是不会显示b
        console.log(vm.$data.a);
        console.log(vm.b);//这样才会显示b
        
    </script>
</body>
</html>

 

vm.$mount -> 手动挂在vue程序

<div id="box">
        <span v-text="a"></span>
    </div>
    <script>
        /*var vm=new Vue({
            data:{
                a:1
            }
        })；
        vm.$mount('#box'); /*/

        //手动挂载*!
        var vm=new Vue({
            data:{
                a:1
            }
        }).$mount('#box');
    </script>

 

vm.$options -> 获取自定义属性

var vm=new Vue({
            aa:11, //自定义属性,
            show:function(){
                alert(1);
            },
            data:{
                a:1
            }
        }).$mount('#box');

        vm.$options.show();
        console.log(vm.$options.aa);

 

vm.$destroy -> 销毁对象

 

vm.$log(); -> 查看现在数据的状态

<div id="box">
        <span v-text="a"></span>
    </div>
    <script>

        var vm=new Vue({
            data:{
                a:1,
                b:2
            }
        }).$mount('#box');

        console.log(vm.$log());
    </script>

 

posted on 2017-04-27 11:24  白杨-M  阅读(266)  评论(0)  编辑  收藏  举报

导航