Day14認識vue.js

2023 iThome 鐵人賽

DAY 14

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 14 篇

15th鐵人賽

jenny

2023-09-29 10:56:19

417 瀏覽

分享至

前面幾篇認識了html跟css基本的語法，接下來要從0開始學習Vue.js。

先來介紹Vue.js 是一個用於建立交互式網頁介面的JavaScript框架。
簡單來說Vue.js 提供了一套工具和結構，讓開發者可以輕鬆的建立具有互動性的網頁介面。

Vue.js 的基本概念和特點：

簡潔易學：
Vue.js 的語法簡潔且容易理解，可以快速上手。
虛擬 DOM(文件物件模型)：
Vue 使用虛擬 DOM 技術，這使得在更新 DOM 元素時能夠更高效地渲染，提升了應用程序的性能。
生態系統：
Vue.js 有豐富的生態系統，許多常用的套件都可以與 Vue 一起使用，例如 Vuex (狀態管理)、Vue Router (路由) 等等。
易於整合：
Vue.js 可以逐步導入到現有的專案中，你可以只使用 Vue.js 的一部分功能，而不是完全重寫整個前端。
跨平台開發：
可以使用 Vue.js 來開發 Web 應用、移動端應用 (使用框架如 Quasar、NativeScript-Vue) 甚至是桌面應用 (使用框架如 Electron)。

要使用vue.js時，需要引入vue.js的框架的javascript檔到html，就需要引用CDN。

引用CDN:
CDN (Content Delivery Network)可以將網站的靜態資源（如圖片、JavaScript 檔案、CSS 檔案等）儲存在全球各地的伺服器上，以便更快速地提供給網站的訪客。
語法如下:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue.jst程式範例:
先創造一個html檔，命名vue1.html，
把CDN的語法寫在裡，裡利用button屬性，所以網頁會出現按鈕，最後利用script屬性引用名為app.js的JavaScript檔。

Vue1.html的程式:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="changeMessage">按一下</button>
</div>

<script src="app.js"></script>

</body>
</html>

再來我在visual studio code裡建立一個app.js檔，簡單介紹裡面用到的語法。
1.el用途是將指定的Vue 會連結到id 屬性等於app上。
2.data用來定義Vue 的數據，這邊定義一個名為message的屬性。
3.methods用於定義vue 的方法，這邊定義一個changeMessage的方法。

app.js的程式:

new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods: {
      changeMessage: function() {
        this.message = '下次再來';
      }
    }
  });

一開始畫面: