Vue.js 新手入門之路 - 模板語法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 4

Vue.js

Vue.js 新手入門之路系列第 4 篇

Vue.js 新手入門之路 - 模板語法

17th鐵人賽

normie_a

2025-08-24 19:49:36

160 瀏覽

分享至

補充上一篇

App.vue 是可以有多個 instance 的
首先到 index.html 放兩個 app

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="app2"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

接著到 main.js 建立兩個 app

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import AppTwo from './AppTwo.vue'

createApp(App).mount('#app')
createApp(AppTwo).mount('#app2')

再新開一個 AppTwo.vue 與 App.vue 在同一層資料夾，內容可以一樣，也可以 import 自訂的元件
這邊我選擇使用原本的範例

npm run dev

之後會看到兩個 instance 同時出現在畫面中，其中 count 的值是不一樣的，由此可知它們有各自的生命週期、作用域，互不影響

正式進入今天的學習進度

文字插值
其實自訂元件已經偷偷使用過了，使用雙大括號的語法，拿上次的程式為例

<template>
  <div class="hello-vite">
    <h1>{{ title }}</h1> <!-- 會將 title 的值填入，若下方改變這邊也會跟著改動 -->
    <p>This is my first Vue component</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  name: 'HelloVite',
  data() {
    return { // return 的物件為響應式狀態
      title: 'Hello Vite!',  //title 變數值 = 字串 'Hello Vite!' 
      count: 0
    }
  },
  methods:{
    greet(){
      alert(`Vite Greet: Welcome User !!!`)
    }
  }
}
</script>

若雙大括號裡面裝的是 html 標籤，其值會被當成純文字解析，若要使其生效則使用 v-html 關鍵字
eg.

<template>
  <div class="red_test">
    <p>Using text interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  </div>
</template>


<script>
export default {
  name: 'red_test',
  data() {
    return {
      rawHtml: '<span style="color:red">This should be red.</span>'
    }
  }
}
</script>