---
tags: Vue3 實戰班
---
# Vue 引入

在一開始，我們先試著引入 Vue 至我們網頁上，在這份起手式中會認識的 Vue 的基本運作概念以及它的特點，請試著**開立一個新的 Codepen 或網頁**動手做看看吧！

1. 請使用 [CDN](https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn) 或 Code 的 setting 加入 Vue 的外部資源

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 回到 body 中，建立新的元素並且給他一個 id，在此我們使用 `id="app"` 這個名稱

<div id="app">
</div>

3. 接下來在頁面的後方加入 `<script>`（請確保在自訂元素後方或者使用 codepen 的 JS Panel），並加入以下原始碼（到這個步驟已經成功建立 Vue 的應用）

// 實體化 Vue 物件，並傳入特定屬性及方法
const app = {
// Vue 有雙向綁定的特性，在此需要先定義基本的資料才能進行綁定
  data() {
    return {
      text: 0
    }
  }
}

Vue.createApp(app).mount('#app')// 將 Vue 綁定我們所自訂的元素上

4. 加入 Vue 的指令於自訂元素之中，並體驗 Vue 的神奇之處吧

<!-- input 標籤並透過 v-model 綁定我們所自訂的 text 資料名稱 -->
<input class="form-control" v-model="text">

<!-- 將 text 這個資料動態的呈現在畫面上 -->
<div v-text="text"></div>

範例重點：

- 自己動手試試看，建立一個 Vue 的應用程式
- 在 input 內輸入一些內容，是否有即時的呈現於 v-text 之上

<iframe height="300" style="width: 100%;" scrolling="no" title="Vue3 初始化" src="https://codepen.io/Wcc723/embed/VwJpQoe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/VwJpQoe">
Vue3 初始化</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>