應用流程 · FA+Ecloud互聯網應用開發平臺綜合技術入門指南(READ)

## 一、概述組件有四種用法： 1. 先定義，后注冊 2. 同時定義并注冊組件 3. 使用HTML模版template 4. 使用HTML模版script ## 二、先定義，后注冊 ``` ar demo1 = Vue.extend({ template:'<h1>示例1</h1>' }); Vue.component('demo1',demo1); ``` ## 三、同時定義并注冊組件 ``` Vue.component('demo2',{ template:'<h1>示例2</h1>' }); ``` ## 四、使用HTML模版template 這種方式與上面很大的不同點是使用了HTML模板，而這種模板在IDE中是有智能提示與糾錯的，因而更方便于使用，所以一般我們推薦使用這種方式定義與注冊組件。 ``` <template id="demo3"> <h1>示例3</h1> </template> Vue.component('demo3',{ template:'#demo3' }); ``` ## 五、使用HTML模版script 這第四種方式其實和第三種用法是完全一樣的，不同之處在于其模版標簽不同； ``` <script type="x-template" id="demo4"> <h1>示例4</h1> </script> Vue.component('demo3',{ template:'#demo3' }); ``` ## 六、例子 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>組件</title> </head> <body> <template id="demo3"> <h1>示例3</h1> </template> <script type="x-template" id="demo4"> <h1>示例4</h1> </script> <div id="app"> <demo1></demo1> <demo2></demo2> <demo3></demo3> <demo4></demo4> </div> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> //1、定義組件 var demo1 = Vue.extend({ template:'<h1>示例1</h1>' }); //2、注冊組件 Vue.component('demo1',demo1); //第二種方法 Vue.component('demo2',{ template:'<h1>示例2</h1>' }); //第三種方法 Vue.component('demo3',{ template:'#demo3' }); //第四種方法 Vue.component('demo4',{ template:'#demo4' }); new Vue({ el:'#app' }); </script> </body> </html> ```