Vue 3 入門基礎知識

本章節實驗主要講解 vue 的最基本的知識點，在講解知識點之前，我們需要介紹一下 vue.js：

Vue（發音為/vju?/，類似于view）是用于構建用戶界面的漸進框架。與其他整體框架不同，Vue從頭開始設計以逐漸采用。核心庫僅集中在視圖層，并且易于拾取并與其他庫或現有項目集成。另一方面，當與現代工具和支持庫結合使用時，Vue也完全有能力為復雜的單頁應用程序提供支持。

模版插值，就是將變量使用 {{}} 雙大括號的方式在 DOM 元素中解析我們在 data() 中定義好的變量。

接下來，在上節課的實驗代碼中基礎上，在src/views新建BasicKnow.vue：

<template>
  <div class="basic-know-wrap">
    <!-- 模版插值 -->
    {{counter}}
    <br>
    <button @click="count">計數器</button>
  </div>
</template>
<script>
export default {
  name: 'BasicKnow',
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    count() {
      this.counter++
    }
  }
}
</script>

從上面的代碼，我們可以看出其實 vue.js 3 是兼容 vue.js 2.x 的，我們同樣可以在 vue.js 3 版本使用 vue.js 2.x 的知識點，像 data()，methods。

在router/index.js配置路由：

const routes = [
  {
    path: '/basic_know',
    name: 'BasicKnow',
    component: () => import('../views/BasicKnow.vue'),
    meta: {
      title: '基礎知識'
    }
  }
]

然后跑起服務：

npm run serve

除了上面的模版插值之外，我們還可以使用 v-bind，以及 v-bind 簡寫模式:

<button @click="count" :title="msg">計數器</button>

在 data() {} 定義 msg 變量，將 msg 綁定給 title 屬性：

<script>
export default {
  name: 'BasicKnow',
  data() {
    return {
      counter: 0,
      msg: '這是一個 button 按鈕'
    }
  },
  methods: {
    count() {
      this.counter++
    }
  }
}
</script>

然后我們使用鼠標移上 button 按鈕，會出現一個這是一個 button 按鈕提示語：

Vue還提供了一個v-model指令，使表單輸入和應用程序狀態之間的雙向綁定變得輕而易舉：

使用input標簽，通過v-mode指令綁定我們上面定義好的counter變量：

<template>
  <div class="basic-know-wrap">
    <!-- 模版插值 -->
    {{counter}}
    <br>
    <input v-model="counter">
    <br>
    <button @click="count" :title="msg">計數器</button>
  </div>
</template>

效果如下：

通常我們在js中可以使用 if 語句來判斷程序如何運行，vue.js 吸取了這點優勢，我們也可以在 DOM 元素進行條件判斷。假如程序員有女朋友的話，你大概會呈現以下狀態：

<span v-if="isSeen">我想見你</span>

然而這個isSeen變量其實就是你的女朋友，所以需要在 data() 里面定義isSeen變量：

<script>
export default {
  name: 'BasicKnow',
  data() {
    return {
      isSeen: true
    }
  },
}
</script>

所以效果如下：

有了 v-if 語句，當然就會有 v-for 循環指令，只要適用于列表展示：

<template>
  <div class="basic-know-wrap">
    <ul>
      <li :key="index" v-for="(item, index) in arr">{{item}}</li>
    </ul>
  </div>
</template>

在 data() 定義 arr 變量：

<script>
export default {
  name: 'BasicKnow',
  data() {
    return {
      arr: ['女朋友', '我想你了', '我想見你了']
    }
  },
}
</script>