<!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>
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/180442.html
標籤：JavaScript