Vue 入門 | vue start
打開App.vue檔案——你將會看到它由三個部分組成:、
打開 App.vue 檔案——你將會看到它由三個部分組成: <template> 、 <script> 以及 <style> ,分別包含了元件的模板、指令碼和樣式資訊。所有的單一檔案元件都是使用這種基本架構。
<template> 包含所有的標記結構以及元件的呈現邏輯。你的模板可以包含任何有效的 HTML,以及一些我們接下來要介紹的 Vue 特定的語法。
備註: 在 <template> 標籤上設定 lang 屬性。例如設置 <template lang="pug">,你就可以使用 Pug 樣板語法來取代標準的 HTML 。在本教學中我們會使用標準 HTML ,但還是值得知道有這個方法。
<script> 包含元件中所有非顯示的邏輯。最重要的是,你的 <script> 標籤必須輸出一個 JS 物件。這個物件是你在本地端註冊的元件,包含定義屬性、處理本地狀態、定義方法等等。在建置步驟這個物件會被處理及轉換(包含 template 模板),變成一個有 render() 函數的 Vue 元件。
以 App.vue 為例,我們設定元件的名稱為 App ,並且在 components 屬性中加入 HelloWorld 來註冊這個元件。以這種方式來註冊元件是本地註冊。本地註冊的元件只能在註冊它們的元件裡面使用,所以你需要在每個使用它們的元件檔案裡匯入並且註冊它們。這對於 bundle splitting/tree shaking 很有用,因為在應用程式裡不是每一頁都需要所有的元件。
import HelloWorld from "./components/HelloWorld.vue"; export default { name: "App", components: { HelloWorld, }, };備註: 如果你想要使用 TypeScript[1] 語法,你必須把 <script> 標籤的 lang 屬性設定成 <script lang="ts"> 來告訴編譯器你要使用 TypeScript 。
<sty...