關於Vue應用與元件

• Vue 框架將標準的網頁開發抽象為以元件為單位的結構化方式。在Vue中，一個網頁甚至整個網站都可以被視為一個應用程式。應用程式內可以定義並使用多個元件，但必須指定一個根元件。當應用程式被掛載並渲染到頁面時，根元件會作為起始元素進行渲染。

Vue應用的資料設定選項

• 在前幾天我們已經使用過Vue應用，使用Vue中的createApp方法即可建立一個Vue應用實例，其實Vue應用中有許多方法和設定像可提供給開發者使用。
• 首先我們建立一個html測試檔案用來撰寫範例程式，然後建立一個Vue應用，建立的方式非常簡單，只需要呼叫createApp方法即可：

const App = Vue.createApp({})

• createApp方法會傳回一個Vue應用實例，在建立應用實例時，可以傳入一個JavaScript物件來提供應用建立時，資料相關的設定項，例如經常使用的data選項和methods選項。
• data選項本身需要設定為一個JavaScript函數，該函數需要提供應用所需的全域資料，例如：

const appData = {
    count:0   //計數
}
const App = Vue.createApp({
    data(){   //data選項用來設定頁面所需要使用的屬性資料
        return appData
    }

• methods選項用來設定元件中需要使用的方法，注意不要使用箭頭函數來定義methods中的方法，其會影響內部this關鍵字的指向，例如：

methods:{
    click() {
        this.count += 1
    }
}

• 今天就先到這邊～謝謝大家！