快速初始化Vue項目

在學習之前，我們先通過引入JS檔案的方式快速初始化一個 Vue 項目，首先我們先打開 VsCode 編輯器，具體步驟如下：

一、建立一個檔案夾

二、建立index.html、style.css 和 index.js 檔案

三、建立個lib目錄，把下載下傳好的 vue.global.js 檔案放在這個目錄下（下載下傳位址：https://unpkg.com/[email protected]/dist/vue.global.js）

完成後的目錄結構如下：

--- index.html
--- index.js
--- lib 
    ---vue.global.js
--- style.css

四、然後回到 index.html 做一些代碼編寫工作：

通過一個！（感歎号）快速初始化一個 h5 頁面代碼
然後再 head 标簽和 title 标簽之間，引入 lib/vue.global.js 檔案。
在 js 檔案的下方引入 style.css 檔案
在 body 中定義一個 id = app 的 div 容器
在body标簽結束之前引入 index.js 檔案

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue項目初始化</title>
    <script src="/lib/vue.global.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

五、接下來回到 index.js 檔案初始化 vue 執行個體，挂載到 id 等于 app 的執行個體中,代碼如下

const app = Vue.createApp();
app.mount("#app");

到這裡一個簡單的 Vue3 項目就建立完了，接下來我們進入 data() 函數的學習。

如何了解 data() 資料狀态函數

在 Vue.js 中，data 函數用于定義元件執行個體的狀态。元件執行個體中定義的資料可以在模闆中使用，也可以在元件的 JavaScript 邏輯中使用。

下面是一個例子，該元件有一個名為 message 的 data 屬性：

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

<script>
export default {
  data() {
    return {
      message: '你好，前端達人!'
    }
  }
}
</script>

在上面的例子中，data 函數傳回了一個對象，該對象中有一個名為 message 的屬性。在模闆中，可以使用 {{ message }} 來顯示這個屬性的值。

注意，data 屬性必須是函數,這是固定用法。如果 data 屬性是一個普通對象，那麼所有元件執行個體将共享同一個資料對象，在多個元件執行個體中使用同一個 data 對象将會導緻問題。

另外，元件執行個體中定義的資料屬性是響應式的，這意味着如果資料屬性的值改變，那麼對應的模闆中的内容也将自動更新（響應式機制，稍後會介紹）。

通過data函數傳回的對象，元件内部都能使用 this 通路到，如:

<template>
  <button @click="changeData">Change Data</button>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods:{
    changeData(){
      this.message = "new data";
    }
  }
}
</script>

在 Vue.js 中，data 函數用于定義元件執行個體的狀态，傳回的對象中的屬性可以是任意類型的值，包括：

基本類型: 例如數字、字元串、布爾值等
數組: 例如 array
對象:例如 Object
甚至是函數

例如

data() {
    return {
      message: 'Hello, Vue!',
      count: 0,
      todos: [],
      user: {
        name: 'John Doe',
        age: 30
      },
      print: function(){
        console.log("data function")
      }
    }
  },

在上面的例子中, 定義了message,count,todos,user,print五個資料，分别是字元串，數字，數組，對象，函數。

Vue3 中你可以用 setup() 函數定義資料狀态

在 Vue 3 中，可以使用 setup() 函數來定義元件的邏輯和狀态。在 setup() 函數中，可以使用 reactive() 函數來建立一個響應式對象，它可以用來存儲元件的狀态。下面是一個示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3 資料狀态示例</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const state = Vue.reactive({
            message: 'Hello Vue 3'
          });

          return {
            ...state
          }
        }
      });
      app.mount('#app')
    </script>
  </body>
</html>

HTML屬性綁定 Data 中的值

當你想要綁定一個連結的 href 屬性到 Vue 執行個體中的資料時，你可以這樣做：

<a v-bind:href="url">Link</a>

這裡的 v-bind:href 指令綁定了 Vue 執行個體中的 url 資料到連結的 href 屬性上。當 url 資料更新時，連結的 href 也會更新。

同樣也可以使用縮寫:

<a :href="url">Link</a>

需要注意的是，當你綁定一個資料到 href 時，確定你綁定的是完整的URL，不然可能會被浏覽器了解成相對路徑。

基于 data 資料狀态進行清單展示

在 Vue 中展示清單資料可以使用 v-for 指令。v-for 指令用于周遊數組中的資料并将其渲染到頁面上。

假設你有一個名為 items 的數組，其中包含了要展示在頁面上的資料，那麼你可以在模闆中使用 v-for 指令來周遊 items 數組并将每一項資料渲染到頁面上。

例如:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

當你使用 v-for 指令來周遊數組中的資料時，你需要在指令中指定兩個值：

第一個值是目前周遊到的數組元素，在上面的例子中是 item。
第二個值是數組本身，在上面的例子中是 items。

在指令中你可以使用這兩個值來定義要渲染在頁面上的元素。在上面的例子中，我們使用了一個 li 标簽來渲染每一項資料，并在裡面使用了一個插值表達式來展示每一項的 name。

在周遊數組時,為了避免vue重複渲染,你需要給每一個元素賦予一個唯一辨別符。可以使用 v-bind 指令和 key 特性來為每一項綁定一個唯一的辨別符，比如上面的例子中用了每一項的 id 來辨別。

整體來說，使用 v-for 指令可以讓你很容易地在 Vue 中周遊數組并将資料渲染到頁面上。

在真實項目中還會經常使用 computed 和 methods 來擷取資料進行展示, 也可以使用vuex進行狀态管理。（在稍後的文章裡會詳細介紹）

基于條件展示 Data 資料

在 Vue 中一共有 4 種方式可以基于條件展示 Data 中的資料。

一、使用 v-if 指令。

v-if 指令用于根據條件判斷是否渲染元素。當條件為 true 時，元素會被渲染，否則元素不會被渲染。

<template>
  <div>
    <p v-if="showData">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

二、使用 v-show 指令。

v-show 指令與 v-if 指令類似，也用于根據條件判斷是否渲染元素。唯一的差別是，v-show 指令會始終渲染元素，隻是在條件為 false 時将元素隐藏。

<template>
  <div>
    <p v-show="showData">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

三、使用三元運算符。

三元運算符可以在模闆中直接使用條件判斷并傳回對應的值，進而達到條件展示資料的目的.

<template>
  <div>
    <p>{{showData ? data : "loading"}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'This is my data',
      showData: true,
    };
  },
};
</script>

四、使用計算屬性 computed.

可以在 computed 裡面進行條件判斷，并傳回對應的資料。

<template>
    <div>
        <p>{{computedData}}</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: 'This is my data',
                showData: true,
            };
        },
        computed: {
            computedData() {
                return this.showData ? this.data : "loading"
            }
        }
    };
</script>

這四種方法都可以在 Vue 中基于條件展示資料。

你可以根據自己的需求來選擇使用哪一種方法。

v-if指令和v-show的差別在于，v-if會在第一次加載的時候，真正的去除不需要的元素，而v-show隻是用CSS來控制元素的顯示和隐藏。是以v-if會在第一次加載時對性能有影響，而v-show在第一次加載時不會對性能産生影響。

計算屬性 computed 可以在資料發生改變時自動更新，性能會比在模闆中使用三元運算符和方法好。

結束語

今天的文章就介紹到這裡，感謝你的閱讀，下一篇文章我将會繼續介紹事件、computed 計算屬性相關内容。

Vue3 學習筆記，快速初始化Vue項目及 data 函數用法學習（二）

推薦閱讀

快速初始化Vue項目

如何了解 data() 資料狀态函數

Vue3 中你可以用 setup() 函數定義資料狀态

HTML屬性綁定 Data 中的值

基于 data 資料狀态進行清單展示

基于條件展示 Data 資料

結束語

繼續閱讀

SVM學習筆記（一）

閱讀筆記--java程式設計思想第四版 --接口嵌套

法理學學習筆記Day4——法律規則重點知識點法的微觀結構★★★★★（考察40次）（二級考點）法律規則（二級考點）1.法律

最大子段和問題（分治法和動态規劃）

#人教五上預習#知識點總結#學習打卡ing#學習筆記#假期學習

持續更新調研報告寫作資料，希望各位多多批評指正#寫材料#學習資料分享#學習筆記#每天學習一點點

android學習筆記3：存儲資料存儲 Key-Value 集資料儲存到檔案

安卓學習筆記（九）網絡程式設計網絡程式設計

安卓學習筆記（一） Activity篇

django短信驗證碼的後端實作

天池龍珠計劃Python訓練營-task2筆記清單元組字元串字典集合序列

2022秋招cpp相關面試總結（長期更新）1、記憶體對齊2、類的占用空間死鎖elf優化bin檔案c語言和c++中const差別sizeof原理malloc一塊記憶體free怎麼找到頭尾

2022秋招面試總結（cpp+java+測開）百度測開一面位元組後端一面蝦皮後端一面蝦皮後端二面

nagios服務端搭建

Apache 虛拟主機搭建過程

判斷浏覽器類型與版本以及ios安卓判别