<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <app-I-L-S></app-I-L-S> <app-Templete></app-Templete> <app-Template></app-Template> <app-Name></app-Name> </div> <template id="appNameT"> <!--注意template外層請定義div如果有多個vue元素--> <div> <h1>這是直接元素定義為組件 {{count}}</h1> <button @click='add'>增加</button> </div> </template> <script> const msg = "Hello Vue Hello ES6"; //1.使用extend創建組件 //按照Java的開發思想，創建時采用駝峰命名法，使用的時候每個單詞必須用-隔開 var appILS = Vue.extend({ template: '<h3>這是用extend創建的組件</h3>' }) Vue.component('appILS', appILS); //2.不使用extend創建組件 Vue.component('appTemplete', { template: "<h3>這是不使用extend創建的組件</h3>" }) //使用ES6新語法 ，完成元素拼接 //ES6中如果使用變量直接${msg}的方式 Vue.component("appTemplate", { template: `<div> <h1>這里采用多行的方式將元素進行組件化使用ES6的\`\`語法信息為：${msg}</h1> </div> ` }) Vue.component("appName", { template: '#appNameT', data() { return { count: 1, } }, methods: { add() { this.count++ } } }) var vm = new Vue({ el: '#app', data: { //data用來存放每個頁面的數據 msg: "Hello Vue Hello ES6" } }) </script> </body> </html>
所需依賴：
1.npm i vue