定義元件

• 當我們建立 Vue 應用實例後，使用mount方法可以將其綁定到指定的HTML元素上。應用實例可以使用component方法來定義元件，定義好元件後，可以直接在HTML檔案中使用。
• 例如建立一個名為component.html的測試檔案，在其中撰寫以下範例程式：

<script>
const App = Vue.createApp({})                    // 建立 App 實例
const alertComponent = {                          // 定義警告框元件
    data() {
        return {
            msg:"警告框提示",                      // 警告框內容
            count:0                                // 計數變數
        }
    },
    methods:{
        click(){
            alert(this.msg + this.count++)        // 彈出警告框，顯示內容和計數變數
        }
    },
    template:'<div><button @click="click">按鈕</button></div>' // 元件的範本
}
App.component("my-alert",alertComponent)          // 在 App 上掛載元件
App.mount("#Application")                         // 掛載 App
</script>

• 如以上程式所示，在Vue應用中定義元件時使用component方法，這個方法的第1個參數用來設定元件名稱，第2個參數進行元件的設定。
• 元件的設定選項與應用的設定選項基本一致。上面的程式中，data選項設定了元件必要的資料，methods選項為元件提供了所需的方法。
• 需要注意的是定義元件時，最重要的是template選項，這個選項用於設定元件的HTML範本，前面我們建立了一個簡單的按鈕，當使用者點擊此按鈕時會有警告框彈出。

今天就到這邊啦～雖然斷賽了，但我還是會繼續完成30篇文章的！