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