組件-全局組件和局部組件
阿新 • • 發佈：2018-01-30
emp har class title lib blog alert doc post
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="seg1"> <alert></alert> <ttt></ttt> </div> <div id="seg2"> <alert></alert> <ttt></ttt> </div> <div id="seg3"> <texts></texts> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
Vue.component("ttt", { template: "<button @click=\"on_click\">全局彈彈彈</button>", methods: { on_click: function () { alert("Yo.") } } }); var obj = { template: "<button @click=\"on_click\">全局彈彈彈</button>", methods: { on_click: function () { alert("Yo.") } } } new Vue({ el: "#seg1", components: { "alert": { template: "<button @click=\"on_click\">彈彈彈</button>", methods: { on_click: function () { alert("Yo.") } } } } }); new Vue({ el: "#seg2", components: { "alert": { template: "<button @click=\"on_click\">彈彈彈</button>", methods: { on_click: function () { alert("點你大爺") } } } } }); new Vue({ el:"#seg3", components:{ "texts":obj } })
組件-全局組件和局部組件