Vuejs學習筆記(二)-1.元件的基本使用-全域性元件
阿新 • • 發佈：2021-07-02
元件化開發是程式程式碼的分類複用，使用抽象的思想。
vue元件建立的基本方法如下：
1.建立元件構造器
2.註冊元件
3.使用元件
這個是最原始的元件建立和使用的程式碼，後面會慢慢演化
1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue元件的基本使用.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/2 14:43 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12<html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>01-vue元件的基本使用</title> 16 </head> 17 <body> 18 <div id="app"> 19 <h2>{{ message }}</h2> 20 <!-- 3.使用元件--> 21 <my-cpn></my-cpn> 22 </div> 23 24 <script src="../js/vue.js"></script> 25<script> 26 27 // 1.建立元件構造器物件 28 const cpn = Vue.extend({ 29 template: ` 30 <div> 31 <h2>我是標題</h2> 32 <p>我是內容</p> 33 </div> 34 ` 35 }) 36 37 // 2.註冊元件 38 Vue.component('my-cpn', cpn) 39 const app = new Vue({ 40 el: '#app',41 data: { 42 message: 'hello' 43 }, 44 }) 45 </script> 46 </body> 47 </html>
由於第二步驟，使用 Vue.component('my-cpn',cpn) 進行元件註冊，在此處註冊是全域性元件。