VUE 实例 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue 实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" class="goo">
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button v-on:click="foo = 'baz'">Change it</button>
    </div>
    
</body>
</html>
<script>


    // 我们的数据对象
    var data = { 
        a: 1,
        b: 2,
        foo : 'Bingo',
    }
    //Object.freeze(data) // [Vue warn]: Error in v-on handler: "TypeError: Cannot assign to read only property 'foo' of object '#<Object>'"
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#app', 
        //el: '#app1,#app',//不允许一次配置多个
        fun : () => {
            console.log(' i am function fun ')
            return '';
        },
        //监听变量变化
        watch: {
            'a' : (newValue, oldValue) => {
                console.log('new: '+newValue+" -- old: "+oldValue);
                /* 
                    vm.a = 3
                    vue-1.html:39 new: 3 -- old: 1
                 */
            }
        },
        /*  */
        data: data 
        /* data内的所有变量都会被vm对象自动组装成自身属性，并且会配好get set方法 */
        ,
        created: function () {//在vm对象创建后的第一时间，应该相当于vm的构造方法吧。
            console.log('created:::: a is: ' + this.a)
        },
        updated: function () { //静默的改变data里面的值不会触发此时间，需要模板被重新渲染才会执行 比如点击change it
            console.log('updated:::: a is: ' + this.a)
        },
        mounted: function () { //当vm中配置的el被创建成$el对象后调用
            console.log('mounted:::: a is: ' + this.a)
        },
        destroyed: function () {// 暂时没有模拟出来
            console.log('destroyed:::: a is: ')
        }
    })
    /*console.log( vm.$options.fun()); // i am function fun
    console.log( typeof vm.$options.fun); //function
    console.log(vm.$data );
    console.log(vm.$el); */
    //监听变量变化
    vm.$watch('foo', function (newValue, oldValue) {
        // 这个回调将在 `vm.foo` 改变后调用 new: baz -- old: Bingo
        console.log('new: '+newValue+" -- old: "+oldValue);
    })
    /* $开头的对象为vm本身的对象 */
    
    
</script>

 

posted @ 2019-02-22 16:05  鱼尾纹  阅读(234)  评论(0)  编辑  收藏  举报