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