vue組件中的data與methods

時間 2019-11-08

標籤 vue 組件 data methods 简体版

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <mycom></mycom>
        <counter></counter>
    </div>
    <template id="temp">
        <div>
            <input type="button" value="+1" @click="increment">
            {{count}}
        </div>
    </template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    //組件中的data和實例中的不同，實例中的data是一個對象，而組件中的data則是一個方法而且返回一個對象
    Vue.component("mycom", {
        template: "<h3>{{msg}}，這是一個組件</h3>", //引用時與實例一致
        data: function () {
            return { //返回對象是爲了區分各個組件中的數據，由於不一樣組件返回的對象的地址都不一致因此不會產生影響
                msg: "hello" //組件中定義的數據
            }
        }
    })
    //添加一個增值函數
    Vue.component("counter", {
                template:"#temp",
                data: function () {
                    return {
                        count: 0
                    }
                },
                methods: {
                    increment() {
                        this.count++
                    }
                }
            }); 
                let vm = new Vue({
                el: "#app",
                data: {

                }
            });
</script>

</html>

　　效果圖html

相關標籤/搜索