<!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_modulesvuedistvue.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>
效果图
