EP2 - 創建 Vue App

更新於 發佈於 閱讀時間約 1 分鐘
繼續看Document,練習到直到可以活用~
雖然我是實用派的~但還是要研究框架文件 @@

App實例 - application instance

每個 Vue 應用程式都會從使用 createApp 函數創建一個新的應用程式實例開始:

import { createApp } from 'vue'

const app = createApp({
/* 根組件選項 */
})

根組件 - Root Component

傳遞給 createApp 的對象實際上是一個組件。每個應用程式都需要一個「根組件」,這個根組件可以包含其他組件作為它的子組件。

如果你使用的是單檔組件 (Single-File Components),我們通常會從另一個文件中導入根組件:

import { createApp } from 'vue'
// 從單檔組件中導入根組件 App
import App from './App.vue'

const app = createApp(App)

雖然文件中的許多範例只需要一個組件,但大多數實際應用程式會被組織成一個由嵌套、可重用的組件構成樹狀結構。例如,一個 Todo 應用程式的組件樹可能如下所示:

App (根組件)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatistics

文件後續將討論如何定義和組合多個組件。在此之前,將專注於單個組件內部運作。

掛載App - Mounting the App

應用程式實例在調用其 .mount() 方法之前,不會渲染任何內容。.mount() 方法需要一個「容器」參數,這個參數可以是一個實際的 DOM 元素或是一個選擇器字符串:

<div id="app"></div>
app.mount('#app')

應用程式的根組件的內容將會渲染在這個容器元素內部,但容器元素本身並不被視為應用程式的一部分。

應該在完成所有應用程式配置和資源註冊後再調用 .mount() 方法。此外,請注意其返回值與資源註冊方法不同,是根組件實例而不是應用程式實例。

在 DOM 中的根組件模板

通常,根組件的模板是組件自身的一部分,但也可以單獨提供模板,直接將其寫在掛載容器內:

<div id="app"> 
<button @click="count++">{{ count }}</button>
</div>
import { createApp } from 'vue'

const app = createApp({
data() {
return {
count: 0
}
}
})

app.mount('#app')

如果根組件沒有模板選項,Vue 會自動使用容器的 innerHTML 作為模板。

在 DOM 中的模板通常用於無需構建步驟的 Vue 應用程式中。它們也可以與伺服器端框架結合使用,其中根模板可能由伺服器動態生成。

App配置 - App Configurations

應用程式實例(Application Instance)提供了一個 .config 物件,讓我們可以配置一些應用層級的選項。例如,定義一個應用層級的錯誤處理程序,捕獲所有後代組件中的錯誤:

app.config.errorHandler = (err) => {
/* handle error */
}

應用程式實例還提供了一些方法來註冊應用範圍資產(assets)。例如,註冊一個組件:

app.component('TodoDeleteButton', TodoDeleteButton)

這樣就使得 TodoDeleteButton 組件可以在應用的任何地方使用。文件後續章節中討論組件和其他類型資產的註冊。你也可以在 API 參考中瀏覽完整的應用程式實例 API 列表。確保在掛載應用程式之前應用所有的配置!

多個App實例 - Multiple application instances

在同一個頁面上,你不僅限於使用單個應用程式實例。createApp API 允許多個 Vue 應用程式共存於同一頁面上,每個應用程式都有自己的配置範圍和全局資產:

const app1 = createApp({
/* ... */
})
app1.mount('#container-1')

const app2 = createApp({
/* ... */
})
app2.mount('#container-2')

如果你使用 Vue 來增強伺服器渲染的 HTML,只需要 Vue 來控制大頁面中的特定部分,應避免在整個頁面上掛載單個 Vue 應用程式實例。相反,應創建多個小型應用程式實例,並將它們掛載到各自負責的元素上。

看完這章節好像有點懂又不太懂~@@~



留言
avatar-img
留言分享你的想法!
avatar-img
卡關的人生
2會員
73內容數
分享生活趣事~
卡關的人生的其他內容
2024/11/10
Vue 提供了多種動畫技術來提升應用程式的互動性,包括基於 CSS 類別的動畫、基於狀態的動畫,以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發,像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定,根據互動動態調整元素的外觀,例如根據滑鼠位置改變背景顏色。
Thumbnail
2024/11/10
Vue 提供了多種動畫技術來提升應用程式的互動性,包括基於 CSS 類別的動畫、基於狀態的動畫,以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發,像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定,根據互動動態調整元素的外觀,例如根據滑鼠位置改變背景顏色。
Thumbnail
2024/11/09
Web Components 是一組網頁原生 API,允許開發者創建可重複使用的自訂元素。Vue 與 Web Components 是互補的技術,Vue 支援整合和創建自訂元素。
Thumbnail
2024/11/09
Web Components 是一組網頁原生 API,允許開發者創建可重複使用的自訂元素。Vue 與 Web Components 是互補的技術,Vue 支援整合和創建自訂元素。
Thumbnail
2024/11/08
Vue 建議使用模板構建應用程式,但在需要 JavaScript 的全程式化功能時,渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode,h 是 hyperscript 的簡寫,能生成 HTML 的 JavaScript。
Thumbnail
2024/11/08
Vue 建議使用模板構建應用程式,但在需要 JavaScript 的全程式化功能時,渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode,h 是 hyperscript 的簡寫,能生成 HTML 的 JavaScript。
Thumbnail
看更多
你可能也想看
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News