[Day4]Hello Vue

2023 iThome 鐵人賽

DAY 4

自我挑戰組

從零開始Vue(View)系列第 4 篇

15th鐵人賽

yuuu

2023-09-08 16:36:16

252 瀏覽

分享至

製作第一個Vue程式
從製作一個Hello World程式來正式進入Vue的世界，並且從中了解到Vue的一些基礎撰寫方式。

建立一個HTML檔
點選「選取語言」，並選擇HTML檔

先建立一個空白的HTML頁面，頁面名稱叫Hello World

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
</html>

引入Vue.js，建立一個div命名id為app，並載入CDN。
CDN是Content Delivery NetWork（內容傳遞網路）的縮寫，指一組分佈在不同地理位置的伺服器，協同工作以提供網際網路內容的快速交付。
CDN允許快速傳輸載入網際網路內容所需的資源，包括HTML頁面、javascript檔、樣式表、圖像和視訊。
想了解更多內容可以點選此網址：https://www.cloudflare.com/zh-tw/learning/cdn/what-is-a-cdn/

<body>
    <div id="app">
            
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.js"></script>
</body>

建立Vue執行的function，在資料模型（data）裡寫入'Hello World'。

<body>
    <div id="app">
        {{message}} 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.js"></script>

   <script>
       var app = Vue.createApp({
           data:function() {
               return {
                  message:'Hello World'
               }
           },
       });
      app.mount('#app');
   </script>
</body>

執行測試

這樣就完成第一支Vue了!

程式碼說明
第五點function的部分。
以Vue.createApp()建立Vue的實體，裡面包含data

data：定義頁面中資料來源的資料模型（Model）。
在上面的程式碼中我們在data中建立message屬性並賦予它Hello World的值。
（這裡的{{message}}在之後的文章會再詳細說明）

而app.mount('#app')意義為

app:是前端應用程式的主要應用程式物件或實例，這裡Vue實例的名稱就是app。
mount():是一個方法，用於將應用程式掛載到HTML文檔中的特定元素上。它的目的是將應用程式的內容和功能注入到指定的HTML元素中，使應用程式可以在該元素內運行。
#app: 是一個CSS選擇器，它指定了要將應用程式掛載到哪個HTML元素上。在這個例子中，'#app' 表示要將應用程式掛載到具有id屬性為"app"的HTML元素上。這個HTML元素通常是一個<div>元素或其他容器元素，它將包含我們的應用程式的內容。