快速初始化Vue項目

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

一、新建一個文件夾

二、新建index.html、style.css 和 index.js 文件

三、新建個lib目錄，把下載好的 vue.global.js 文件放在這個目錄下（下載地址：https://unpkg.com/vue@3.2.45/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 可以在數據發生改變時自動更新，性能會比在模板中使用三元運算符和方法好。