VUE 實例

時間 2019-11-11

標籤 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。