技術文章 » 【技術積累】Vue.js中的基礎概念與語法【一】

【技術積累】Vue.js中的基礎概念與語法【一】

2023-06-22 12:00:21

寫在前面

學習Vue之前最好有前端三駕馬車的基礎【HTML+CSS+JavaScript】

筆者接了一個從頭開發的Vue專案，由於公司急著要，沒有時間慢慢像在學校裡學了，只能邊學邊做，現在專案雛形已經做的差不多了，因此正好以自己的方式來寫筆記

筆者接專案的時候Vue零基礎，前端基礎也是除了div幾個標籤和一些常用的style就啥也不會了，以前前端基本都是靠複製貼上的

所以學起來很痛苦，因此學習Vue之前最好有一定前端基礎，Vue程式設計在頁面佈局設計上和HTML+CSS+JavaScript沒有特別明顯的差別

有些同學可能看了半天還學不會，大可不用擔心，筆者學到第三個月剛剛入門，還得靠量變產生質變，之前學到自閉的時候還向公司請了三天假在家休息

看筆者其他部落格同學們肯定也會奇怪，為什麼筆者一直堅持碎片化學習，系統學習不是更好

理由很簡單，同學們平時怎麼漲經驗的：面向csdn程式設計

寫一個簡單的Vue入門程式

<!DOCTYPE html>
<html>
<head>
<title>Vue Hello World</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>Hello {{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'World'
}
});
</script>
</body>
</html>

在這個例子中，我們參照了Vue.js的CDN，然後定義了一個id為「app」的HTML元素。接著，在JavaScript中，我們定義了一個Vue範例，將它與HTML元素繫結起來，並定義了一個資料屬性message，這個屬性的初始值為「World」。然後，在HTML中使用雙括號繫結，將message顯示在<p>元素中。最後，網頁將顯示一行字："Hello World"。

Q1：這些程式碼看不懂，或者看懂了不會舉一反三怎麼辦

筆者剛接觸Vue的時候也看不懂，網上找了好些教學，基本上Vue入門都是這樣的案例，拿一個html，匯入一下js檔案，就可以教vue了，然後看了很多課但是vue專案往往並不是這樣，例如新建Vue專案，往往格式是這樣的

所以筆者根據自己的學習經驗直接從這裡開始介紹，逐漸往回推播

Q2：Vue專案的專案結構是什麼

Vue.js專案的典型結構如下：

├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── services
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
└── README.md

接下來，我們逐一瞭解每個資料夾及檔案的含義。

### node_modules

`node_modules`資料夾是存放專案的依賴和第三方庫的資料夾。在安裝完該專案的依賴庫後，該資料夾中會自動生成相應依賴庫的資料夾及檔案。

### public

`public`資料夾主要是存放打包後的靜態資源，例如`index.html`、`favicon.ico`等檔案。其中，`index.html`是整個專案的入口檔案。`Vue.js`會在該檔案中掛載根元件，並將整個應用渲染到該檔案中。

### src

`src`資料夾是存放專案原始碼的資料夾，其中包含了專案的主要邏輯。該資料夾下包含了如下幾個子資料夾及檔案：

- assets：存放專案需要的靜態資源，如圖片、樣式表等；
- components：存放專案中的元件，可自定義封裝不同的功能元件或公用元件；
- router：存放路由組態檔，用於控制不同路徑下的頁面跳轉；
- services：存放專案的介面請求邏輯；
- store：存放`vuex`相關程式碼，即管理應用中元件之間共用的狀態；
- views：存放檢視元件；
- App.vue：根元件；
- main.js：入口檔案。

### .gitignore

`.gitignore`檔案是`git`工具的忽略檔案組態檔，用於指定哪些檔案或資料夾不需要加入到版本控制系統中。該檔案往往會指定一些構建工具生成的檔案、依賴庫檔案等。

### babel.config.js

`babel.config.js`檔案是`babel`工具的組態檔，用於指定`babel`如何轉換專案的程式碼。該檔案中指定了哪些`babel`外掛和預設以及轉換後的程式碼的輸出目標等。

### package-lock.json

`package-lock.json`檔案是自動生成的`npm`依賴檔案，其中儲存了當前專案的依賴庫列表以及依賴包的版本資訊等。

### package.json

`package.json`檔案也是自動生成的`npm`檔案，其中包含了專案的相關資訊，如專案名稱、版本等。此外，還有諸如依賴庫、構建命令、測試命令等相關資訊。

### README.md

`README.md`檔案是專案的說明檔案，用於詳細介紹該專案的功能、安裝與使用方式、共同作業規範等。

Q3：HelloWorld專案在Vue專案中怎麼實現

TestComponent.vue
<template>
  <div>Hello World</div>
</template>

<script setup>

</script>

<style scoped>

</style>

App.vue

<template>
<TestComponent></TestComponent>
</template>

<script setup>
import TestComponent from "@/components/TestComponent.vue";
</script>


<style scoped>

</style>

什麼是Vue.js

Vue.js是一種漸進式JavaScript框架，用於構建互動式使用者介面。Vue.js的設計目標是通過儘可能簡單的API實現響應式資料繫結和組合檢視元件。

Vue.js是一種輕量級的框架，通過提供資料和模板分離的方式以及元件化的程式碼結構，簡化和優化了Web開發。所以構建模板元件的時候一般不寫資料

它使用漸進式的方式去擴充套件，使得你可以使用盡量少的時候去掌握它，並逐步應用於需要更復雜的專案中。

Vue.js既可以作為一個獨立的庫使用，也可以用於簡單的頁面。這種多樣化的使用方式使得Vue.js可以滿足不同規模和型別的專案需求。

Vue.js的特點包括易學易用、效能卓越、靈活性強、擴充套件性好、生態豐富等等。

總之，Vue.js是一款功能強大、靈活性高、易於上手的JavaScript框架，可以通過其簡潔的API和易於理解的檔案使Web開發人員輕鬆構建高效、可維護、可延伸的Web應用程式。

Vue.js的基礎語法是什麼？

Vue.js的基礎語法可以分為以下幾個方面：

  1. 資料繫結：Vue.js的核心特性之一就是資料繫結。Vue.js通過資料繫結來自動更新檢視，並保持檢視和資料的同步。可以使用{{}}和v-bind指令在模板中繫結資料。
  2. 指令：Vue.js提供了很多指令，用於操作DOM元素。常見的指令包括v-bind、v-if、v-for等。指令可以通過v-字首新增到普通的HTML屬性中。
  3. 計算屬性：計算屬性是由Vue.js計算出來的屬性，而不是手動設定的。計算屬性可以接收其他屬性或響應式資料的變化，計算並返回新的屬性值。
  4. 事件處理器：Vue.js提供了v-on指令用於繫結事件處理器。事件處理器可以使用methods選項中定義的方法來處理。
  5. 生命週期：Vue.js的元件生命週期包括建立、更新、銷燬等階段。在每個階段，Vue.js提供了不同的勾點函數，可以用來監聽和處理元件狀態變化。
  6. 元件：在Vue.js中，元件是可複用的Vue範例。元件可以包含自己的檢視模板、資料、方法等，並可以巢狀在其他元件中使用。
  7. 模板語法：Vue.js的模板語法支援JSX和Hyperscript。可以使用JSX或Hyperscript來宣告Vue元件並編寫Vue模板。

Vue中的常見指令有哪些

  1. v-bind：將資料繫結到HTML元素屬性上，可以簡寫為「:」
  2. v-on：繫結事件，可以簡寫為「@」【例如@click表示點選事件，即點一下會發生什麼】
  3. v-model：實現雙向資料繫結
  4. v-show：根據表示式的值，控制元素的顯示或隱藏【相當於Java中的if】
  5. v-if / v-else-if / v-else：根據表示式的值，條件性地渲染元素，當表示式為假時不渲染【相當於Java中的if/else if/else】
  6. v-for：遍歷一個陣列或物件，生成相應的DOM元素【相當於Java中的for迴圈，一個元件出現幾次，塞不同的資料進去】
  7. v-text：將表示式的值作為元素的文字內容，可以簡寫為「{{ }}」
  8. v-html：將表示式的值作為HTML內容輸出

總之，Vue的指令非常豐富，可以很靈活地實現各種資料和檢視之間的繫結關係。同時，Vue還支援自定義指令的開發，可以根據實際需求來擴充套件和客製化指令。

v-bind

v-bind是Vue.js中的一個指令，其作用是將資料繫結到HTML元素的屬性上。v-bind可以簡寫為「:」。

例如，我們可以將背景顏色系結到一個data中的變數color上：

<div v-bind:style="{ backgroundColor: color }">這裡的背景顏色會根據color變數的值而改變</div>

在上面的例子中，v-bind指令將style屬性和一個JavaScript物件繫結在一起，這個JavaScript物件的屬性名是CSS樣式名，其屬性值是繫結的資料color變數。

我們還可以將屬性名簡寫為不含有引數的指令名。例如，`v-bind:title="message"` 可以簡寫為 `:title="message"`。

以下案例展示了v-bind的使用：

<template>
  <div>
    <p>{{ message }}</p>
    <button :disabled="!isClickable" @click="increment">點選我增加計數器值</button>
    <p>計數器值：{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "歡迎來到我的Vue應用",
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    isClickable() {
      return this.count < 5;
    }
  }
};
</script>

在上面的程式碼中，我們使用`v-bind:disabled`指令將按鈕的disable屬性繫結到了計算屬性isClickable，當計數器值count大於等於5時，isClickable為false，按鈕被禁用。在點選按鈕時，計數器值會增加，繫結計數器值的文字會進行更新。

v-on

v-on是Vue.js中的一個指令，其作用是給HTML元素繫結事件。v-on可以簡寫為「@」。

例如，我們可以給一個按鈕繫結click事件:

<button v-on:click="handleClick">點選我</button>

在上面的例子中，v-on指令繫結了click事件到handleClick方法上。當按鈕被點選時，handleClick方法會被呼叫。

我們還可以傳遞事件物件和自定義引數到事件處理常式中。例如，`v-on:click="handleClick('hello', $event)"`，代表使用handleClick方法處理click事件，傳入引數 'hello' 和一個事件物件 $event。

以下案例展示了v-on的使用：

<template>
  <div>
    <p>{{ message }}</p>  
    <button @click="reverseMessage">點選我反轉上面的文字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
};
</script>

在上面的程式碼中，我們使用`v-on:click`指令將按鈕的click事件繫結到了reverseMessage方法上。當按鈕被點選時，reverseMessage方法會被呼叫，反轉message中的文字。

v-model

v-model是Vue.js中的一個指令，其作用是雙向繫結表單元素和資料。

例如，我們可以使用v-model將input元素的value屬性和data中的變數message繫結在一起：

<input v-model="message" />
<p>{{ message }}</p>

在上面的例子中，當input的值發生變化時，data中的message變數會自動更新，同時p標籤中的文字也會被更新。

v-model指令通常用於處理表單元素，例如input、select和textarea。它會自動監聽表單元素的input事件，並將最新的值同步到繫結的資料中，同時也會將繫結的資料同步到表單元素上。

以下案例展示了v-model的使用：

<template>
  <div>
    <input v-model="message" placeholder="請輸入您的姓名" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

在上面的程式碼中，我們使用v-model將input元素的value屬性繫結到data中的變數message上。當用戶在輸入框中輸入文字時，data中的message變數會自動更新，同時p標籤中的文字也會被更新。

v-show

v-show是Vue.js中的一個指令，其作用是根據表示式的值，在HTML元素之間切換顯示和隱藏。

例如，我們可以使用v-show根據一個變數isShow的值來顯示或隱藏一段文字：

<div v-show="isShow">
  這是一個需要根據表示式值來判斷是否顯示的文字。
</div>
<button @click="toggleShow">點選我切換顯示狀態</button>

在上面的例子中，v-show指令將div元素的顯示狀態繫結到了一個變數isShow上。當isShow的值為true時，這個div元素會被顯示，當isShow的值為false時，這個div元素會被隱藏。

我們還可以通過方法來改變isShow的值，例如定義一個toggleShow方法來切換isShow的值。

以下案例展示了v-show的使用：

<template>
  <div>
    <div v-show="isVisible">
      這是一個可以顯示和隱藏的文字內容。
    </div>
    <button @click="toggleVisibility">點選我切換文字內容的顯示狀態</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

在上面的程式碼中，我們使用v-show指令將一個div元素的顯示狀態繫結到了一個變數isVisible上。當用戶點選按鈕時，toggleVisibility方法會被呼叫，isVisble的值會被切換，從而根據isVisible的值來控制div元素的顯示和隱藏狀態。

v-if / v-else-if / v-else

v-if / v-else-if / v-else 是Vue.js中的條件渲染指令，用來根據條件顯示或隱藏HTML元素。

v-if指令用來判斷條件是否成立，如果條件為true，則渲染元素，否則不渲染。

例如，我們可以使用v-if來判斷是否顯示一段文字：

<div v-if="isShow">這是一個需要根據條件是否顯示的文字。</div>

在上面的例子中，v-if指令將這個div元素的渲染狀態繫結到了一個變數isShow上，如果isShow的值為true，則這個div元素會被渲染，否則不會渲染。

我們還可以使用v-else-if和v-else來實現條件分支，例如：

<div v-if="score >= 90">優秀</div>
<div v-else-if="score >= 80">良好</div>
<div v-else-if="score >= 60">合格</div>
<div v-else>不及格</div>

在上面的例子中，當score變數的值大於等於90時，第一個div元素會被渲染，否則判斷score的值是否大於等於80，如果大於等於80則顯示第二個div元素，以此類推。如果以上條件都不成立，則顯示最後一個div元素。

以下案例展示了v-if / v-else-if / v-else的使用：

<template>
  <div>
    <div v-if="isVisible">這是一個可以顯示和隱藏的文字內容。</div>
    <div v-else>這個文字內容是處於被隱藏狀態的。</div>
    <button @click="toggleVisibility">點選我切換文字內容的顯示狀態</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

在上面的程式碼中，我們使用v-if / v-else指令來根據isVisible的值來判斷文字內容應該顯示還是隱藏。當用戶點選按鈕時，toggleVisibility方法會被呼叫，從而改變isVisible的值，決定文字內容顯示或隱藏。

v-for

v-for是Vue.js中的一個指令，其作用是根據一組資料迴圈渲染HTML元素。

例如，我們可以使用v-for指令迴圈渲染一個列表：

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

在上面的例子中，v-for指令根據一個名為list的陣列，迴圈渲染li元素。迴圈過程中，每次迭代都會將list陣列中的元素賦值給item變數，然後渲染li元素，最終生成一個包含所有陣列元素的列表。

我們還可以在v-for指令中使用索引變數：

<ul>
  <li v-for="(item, index) in list">第 {{ index + 1 }} 項：{{ item }}</li>
</ul>

在上面的例子中，我們使用了一個索引變數index，它代表了list陣列中當前元素的下標，然後使用index來輸出當前項的序號。

以下案例展示了v-for的使用：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in fruits" :key="index">
        {{ index + 1 }}：{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: "蘋果", price: 5 },
        { name: "香蕉", price: 3 },
        { name: "西瓜", price: 10 }
      ]
    };
  }
};
</script>

在上面的程式碼中，我們使用v-for指令迴圈渲染li元素，並使用索引變數index來輸出當前項的序號。注意，在使用v-for指令時需要新增:key屬性，以便Vue.js能夠跟蹤資料項的變化。

v-text

v-text是Vue.js中的一個指令，其作用是將元素的textContent屬性與資料的值繫結在一起。

例如，我們可以使用v-text指令將一個變數的值顯示在HTML中：

<div v-text="message"></div>

在上面的例子中，v-text指令將這個div元素的textContent屬性繫結到了一個變數message上，當message的值改變時，這個div元素的文字內容也會相應地發生改變。

另外，如果我們要在HTML中輸出一個Vue.js表示式的值，也可以使用雙大括號的語法：

<div>{{ message }}</div>

在上面的例子中，雙大括號語法將這個div元素的textContent屬性繫結到了一個表示式message上，與v-text指令的效果是一樣的。

需要注意的是，雙大括號語法並不會替換元素的innerHTML，而是替換textContent。如果我們需要在元素中包含HTML標籤，則需要使用v-html指令。

以下案例展示了v-text的使用：

<template>
  <div>
    <div v-text="message"></div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!"
    };
  }
};
</script>

在上面的程式碼中，我們使用v-text指令和雙大括號語法分別將一個變數message的值輸出到div元素中。當message的值改變時，這個div元素的文字內容也會隨之改變。

v-html

v-html是Vue.js中的一個指令，其作用是將元素的innerHTML屬性與資料的值繫結在一起。

例如，我們可以使用v-html指令將一個變數的值作為HTML程式碼輸出到HTML中：

<div v-html="message"></div>

在上面的例子中，v-html指令將這個div元素的innerHTML屬性繫結到了一個變數message上，當message的值改變時，這個div元素的HTML內容也會相應地發生改變。

需要注意的是，使用v-html指令會帶來一定的安全風險，因為它可以注入任意的HTML程式碼。如果我們要輸出的HTML字串來自使用者輸入或其他不受信任的來源，則需要對其進行特殊處理，以避免注入攻擊。

以下案例展示了v-html的使用：

<template>
  <div>
    <div v-html="message"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "<strong>Hello, Vue.js!</strong>"
    };
  }
};
</script>

在上面的程式碼中，我們使用v-html指令將一個包含HTML標籤的字串輸出到div元素中，結果會被解析為粗體樣式的文字。

什麼是Vue元件

Vue元件是一個Vue範例，它可以複用在不同的Vue範例中，提高程式碼的可維護性、可重用性和可讀性。

Vue元件能夠將一些 HTML、CSS 和 JS 程式碼封裝成一個獨立的、可重用的元素，並且提供了可設定的介面。

Vue元件可以通過 `.vue` 單檔案元件進行建立。

下面是一個簡單的Vue元件案例：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  name: 'counter',
  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return { count: this.initialValue }
  },
  methods: {
    increment() {
      this.count += 1
    }
  }
}
</script>

這個案例中，定義了一個名為 `counter` 的Vue元件，它有一個初始值為0的計數器，每次點選按鈕可以對計數器進行加1操作。這個元件通過 `<template>` 進行展示，通過 `<script>` 進行邏輯處理。

這個元件還有一個 `props` 屬性用於父元件向子元件傳遞資料，這裡定義了一個 `initialValue` 屬性，父元件可以通過傳遞該屬性為計數器設定初始值。

父元件可以通過以下程式碼使用該元件：

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <counter :initialValue="10"></counter>
  </div>
</template>

<script>
import counter from './counter.vue'

export default {
  components: {
    counter
  },
  data() {
    return { count: 0 }
  }
}
</script>

在父元件中，通過 `<counter>` 標籤進行呼叫，並且傳遞了 `initialValue` 屬性值為10。因為 Vue 元件是可複用的，所以在同一個頁面或不同的頁面中都可以使用這個元件。

 

或者

通過`Vue.component` 函數

<!DOCTYPE html>
<html>
<head>
  <title>Hello World with Vue.js Component</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <!-- 使用 "greeting" 元件 -->
  <div id="app">
    <greeting></greeting>
  </div>

  <!-- 定義 "greeting" 元件 -->
  <script>
    Vue.component('greeting', {
      template: '<div>Hello World with Vue.js Component!</div>'
    })

    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

什麼是元件化開發

概念

Vue.js中的元件化開發是一種將頁面分解為獨立可重用元件的開發方式。元件化開發允許開發者將大型應用程式分解成多個小型、可重用的元件。這些元件可以互相獨立，有自己的模板、邏輯和樣式。

Vue.js中的元件是有自己獨立的作用域、資料、事件和生命週期勾點的。元件可以參照和巢狀在其他元件內，從而形成一個元件樹。父元件可以向子元件傳遞資料和事件，子元件也可以通過觸發事件來向上通知父元件，實現了元件之間的通訊。

元件化開發使得應用程式的開發更加易於維護和擴充套件。每個元件都可以獨立進行開發和測試，不會影響到其他元件和應用程式的執行。同時，元件之間的通訊也變得更加清晰和方便，提高了程式碼的可讀性和可維護性。

在Vue.js中，通過Vue.component()方法來註冊元件，使用Vue.extend()方法來建立一個元件構造器，然後通過範例化元件構造器來建立元件範例。元件也可以進行全域性註冊，通過設定Vue.options.components屬性實現。

案例

以一個簡單的購物車頁面為例，這個頁面中包含了商品列表、購物車列表、結算按鈕等等。在傳統的開發方式下，我們可能會將整個頁面作為一個整體編寫，但是這樣做會讓程式碼變得非常複雜和難以維護。

而在Vue.js中採用元件化開發的方式，我們可以將整個頁面拆分為多個元件，每個元件獨立負責自己的部分。對於購物車頁面，我們可以將其拆分為以下元件：

  • 商品列表元件：負責展示商品資訊和加入購物車按鈕等。
  • 購物車列表元件：負責展示已經加入購物車的商品列表、數量、價格等。
  • 結算按鈕元件：負責結算操作，並通知其他元件更新購物車狀態。

這樣拆分之後，每個元件所需要的資料、樣式和邏輯都可以獨立編寫和維護。同時，各個元件之間通過props和事件進行資料傳遞和通訊。

例如，在商品列表元件中，我們可以將商品資訊以props的形式傳遞給商品項元件，然後在商品項元件內部展示商品資訊和加入購物車按鈕。在加入購物車按鈕被點選時，商品項元件會通過觸發一個自定義事件來向上通知父元件應該加入哪個商品到購物車中。

這樣元件化開發使得程式碼結構更加清晰和易於維護，同時也提高了開發效率和程式碼重用率。