標籤：utf-8 charset 模板 教程 css pre 菜鳥 str 組件
全域群組件
所有執行個體都能用全域群組件。
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <runoob></runoob></div><script>// 註冊Vue.component(‘runoob‘, { template: ‘<h1>自訂群組件!</h1>‘})// 建立根執行個體new Vue({ el: ‘#app‘})</script></body></html>
效果展示自訂群組件的HTML內容。
局部組件
我們也可以在執行個體選項中註冊局部組件，這樣組件只能在這個執行個體中使用：
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試執行個體 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <runoob></runoob></div><script>var Child = { template: ‘<h1>自訂群組件!</h1>‘}// 建立根執行個體new Vue({ el: ‘#app‘, components: { // <runoob> 將只在父模板可用 ‘runoob‘: Child }})</script></body></html>
效果同上也是輸出HTML內容。
VueJS組件之全域群組件與局部組件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
