vue實例

時間 2020-09-22

標籤 vue 實例简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <div id="root">
        // v-on:能夠寫成@
        <br>
        //能夠理解一個vue項目實際就是由不少個組件組成，也能夠理解爲是不少vue實例組成
        <div @click="handleClick">{{message}}</div>
        <item></item>
    </div>
    <script type="text/javascript">
        //實際上vue的底層也會把組件編譯成vue實例
        Vue.component('item', {
            template: '<div>hello item</div>'
        })
        //vue實例是根實例，除了它，vue中每一個組件也是vue實例
        var vm = new Vue({
            el: '#root',
            data: {
                message: 'hello world'
            },
            methods: {
                handleClick: function() {
                    alert("hello")
                }
            }
        })
    </script>
</body>
</html>

凡是以$開頭的指的都是vue的實例方法或實例屬性
（vm.$destroy()將vm實例刪除了，因此改變message的值並不會讓頁面有什麼變化）javascript

相關標籤/搜索

每日一句

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