前言

本文將帶你從一個Todos清單組件，上手Vue基礎(chǔ)語法以及核心思想，設(shè)計內(nèi)容有ref響應(yīng)式數(shù)據(jù),v-指令、computed計算屬性

完整代碼：

<!-- App.vue -->
<script setup>
import { ref, computed } from 'vue'

// 1. 響應(yīng)式數(shù)據(jù)：所有 UI 都靠它們驅(qū)動
const title = ref('')                     // 輸入框內(nèi)容
const todos = ref([
  { id: 1, title: '睡覺', done: true },
  { id: 2, title: '吃飯', done: true }
])

// 添加任務(wù)
function addTodo() {
  if (!title.value.trim()) return
  todos.value.push({
    id: Math.random(),
    title: title.value.trim(),
    done: false
  })
  title.value = ''                         // 清空輸入框
}

// 2. 計算屬性：派生數(shù)據(jù)，自動更新
// 統(tǒng)計未完成的數(shù)量
const active = computed(() => {
  return todos.value.filter(t => !t.done).length
})

// 全選/全不選的高級玩法
const allDone = computed({
  get() {
    return todos.value.length > 0 && todos.value.every(t => t.done)
  },
  set(val) {
    todos.value.forEach(t => t.done = val)
  }
})
</script>

<template>
  <div class="container">
    <h2>我的 Todos 任務(wù)清單</h2>

    <!-- 雙向綁定 + 回車添加 -->
    <input type="text" placeholder="今天還要干啥？回車添加" v-model="title" @keydown.enter="addTodo" />

    <!-- 任務(wù)列表 -->
    <ul v-if="todos.length">
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.title }}</span>
      </li>
    </ul>
    <div v-else class="empty">暫無計劃，摸魚去吧～</div>

    <!-- 統(tǒng)計 + 全選 -->
    <div class="footer">
      <label>
        <input type="checkbox" v-model="allDone" />
        全選
      </label>
      <span>未完成 {{ active }} / 共 {{ todos.length }} 條</span>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 400px;
  margin: 40px auto;
  font-family: sans-serif;
}

input[type="text"] {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}

ul {
  padding-left: 0;
  list-style: none;
}

li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.done {
  color: #999;
  text-decoration: line-through;
}

.empty {
  color: #999;
  text-align: center;
  padding: 20px;
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

實際展示：

一、拆解Vue代碼

其實Vue主界面的代碼就是我們的HTML+JS+CSS,它是一個三明治結(jié)構(gòu)

    <script setup></script>  //JavaScript
    
    <template></template>    //HTML

    <style scoped></style>   //CSS

二、 響應(yīng)式數(shù)據(jù)：Vue 的靈魂

傳統(tǒng)寫法（jQuery 時代）：

// 想改標(biāo)題？先找 DOM 再改 innerText
document.querySelector('h2').innerText = '新標(biāo)題'

Vue 寫法：

const title = ref('Todos任務(wù)清單')

然后模板里直接 {{ title }}，你改 title.value = '新標(biāo)題'，頁面就自動變了。

為什么這么神奇？因為 Vue 把 todos、title 這些 ref 包裝成了響應(yīng)式對象，只要你通過 .value 去改它，Vue 就知道「有數(shù)據(jù)變了」，然后自動把所有用到這個數(shù)據(jù)的地方更新一遍。

記住一句話：在 Vue 里，你只需要操心數(shù)據(jù)怎么變，頁面怎么變 Vue 幫你搞定。

三、 Vue 基礎(chǔ)指令

這些指令就是 Vue 給我們提供的「魔法語法糖」，讓我們幾乎不用寫原生 DOM 操作。

1.v-model——雙向數(shù)據(jù)綁定

<input type="text" v-model="title" @keydown.enter="addTodo" />
<input type="checkbox" v-model="todo.done">
<input type="checkbox" v-model="allDone" />

作用：

• 自動同步表單輸入和響應(yīng)式數(shù)據(jù)。

• 對于 <input type="text">：
  v-model="title" 等價于：

  :value="title" @input="title = $event.target.value"
  

  用戶輸入 → title.value 自動更新；title.value 變化 → 輸入框內(nèi)容更新。

• 對于 <input type="checkbox">：
  v-model="todo.done" 綁定的是布爾值：

  :checked="todo.done" @change="todo.done = $event.target.checked"
  

• 對于 allDone（計算屬性）：
  因為 allDone 有 get 和 set，所以 v-model 能讀也能寫，實現(xiàn)“全選”聯(lián)動。

2.v-for——列表渲染

<li v-for="todo in todos" :key="todo.id">
  <input type="checkbox" v-model="todo.done">
  <span :class="{ done: todo.done }">{{ todo.title }}</span>
</li>

作用：

• 遍歷數(shù)組（或?qū)ο螅?，為每個元素生成一個 DOM 節(jié)點。
• todo in todos：todos 是源數(shù)組，todo 是當(dāng)前項。
• 必須加 :key：Vue 用 key 來高效追蹤每個節(jié)點的身份（避免復(fù)用錯誤）。你用了 todo.id，很好！

注意：

• 不要使用 index 作為 key（除非列表只增不刪），否則可能引發(fā)狀態(tài)錯亂。
• v-for 的優(yōu)先級高于 v-if（如果同時用），但一般建議避免兩者同用。

3.v-if與v-else——條件渲染

<ul v-if="todos.length">
  <!-- 渲染任務(wù)列表 -->
</ul>
<div v-else class="empty">暫無計劃，摸魚去吧～</div>

作用：

• v-if="todos.length"：當(dāng) todos.length > 0（真值）時，渲染 <ul>。
• v-else：必須緊跟在 v-if 或 v-else-if 后面，表示“否則”。
• 完全銷毀/重建 DOM（不是隱藏），適合切換不頻繁的場景。

對比v-show：

• v-show 是通過 CSS display: none 切換，DOM 始終存在。
• 你的場景用 v-if/v-else 更合適，因為“空狀態(tài)”和“有任務(wù)”是互斥的兩種 UI。

4.v-bind（簡寫:）——動態(tài)綁定屬性

<span :class="{ done: todo.done }">{{ todo.title }}</span>
<li v-for="todo in todos" :key="todo.id">

作用：

• 將 HTML 屬性（如 class、id、src、key 等）綁定到 JS 表達式。
• :class="{ done: todo.done }"：
  當(dāng) todo.done === true 時，給 <span> 添加 class="done"，從而應(yīng)用樣式（刪除線+灰色）。
• :key="todo.id"：將 key 屬性綁定到 todo.id 的值。

其他常見用法：

<img :src="imageUrl" />
<div :style="{ color: textColor }"></div>
<a :href="linkUrl" rel="external nofollow" >鏈接</a>

v-bind 是 Vue 實現(xiàn)“數(shù)據(jù)驅(qū)動視圖”的關(guān)鍵橋梁。

5.@（即v-on）——事件監(jiān)聽

在你的代碼中：

<input ... @keydown.enter="addTodo" />

作用：

• 監(jiān)聽 DOM 事件，并執(zhí)行方法。

• @keydown.enter 是修飾符寫法，等價于：

  @keydown="(e) => { if (e.key === 'Enter') addTodo() }"
  

• 常見修飾符：

  • .enter：回車鍵
  • .stop：阻止事件冒泡
  • .prevent：阻止默認行為
  • .once：只觸發(fā)一次

其他例子：

<button @click="deleteTodo(id)">刪除</button>
<input @input="handleInput" />
<form @submit.prevent="handleSubmit">...</form>

@ 是 v-on: 的縮寫，就像 : 是 v-bind: 的縮寫。

總結(jié):

1. 用戶在輸入框輸入 → v-model 同步到 title

2. 按回車 → @keydown.enter 觸發(fā) addTodo() → 新任務(wù)加入 todos

3. v-for 重新遍歷 todos，渲染新 <li>

4. 每個任務(wù)的復(fù)選框用 v-model 雙向綁定 todo.done

5. 勾選復(fù)選框 → todo.done 更新 →

   • active 計算屬性自動更新（未完成數(shù)）
   • allDone.get() 重新計算（是否全選）

6. 底部全選框用 v-model="allDone" → 點擊時調(diào)用 allDone.set() → 批量更新所有 todo.done

7. 如果 todos 為空 → v-if 切換到 v-else 顯示“摸魚”提示

四、 computed 計算屬性：自動緩存的派生數(shù)據(jù)

我們想顯示「未完成的任務(wù)有幾條」，最笨的寫法是：

{{ todos.filter(t => !t.done).length }} / {{ todos.length }}

這樣每次渲染都會重新 filter 一遍，數(shù)據(jù)一大就廢。

聰明做法：

const active = computed(() => 
  todos.value.filter(t => !t.done).length
)

computed 有兩大殺招：

1. 緩存：只有當(dāng) todos 真的變了，它才會重新計算
2. 響應(yīng)式：todos 一變，頁面上所有用了 active 的地方立刻更新

更牛的全選 checkbox：

const allDone = computed({
  get() {
    return todos.value.length > 0 && todos.value.every(t => t.done)
  },
  set(val) {
    todos.value.forEach(t => t.done = val)
  }
})

這樣 就能實現(xiàn)「全選/全不選」雙向功能，代碼量少到令人發(fā)指。

在 Vue 3 的 computed 中，get 和 set 是用于定義「可讀寫計算屬性」的兩個函數(shù)。默認情況下，computed 只有一個 getter（即只讀），但當(dāng)你需要讓計算屬性也能被賦值（比如用在 v-model 中），就需要提供一個 setter（即 set 函數(shù)）。

const myComputed = computed({
  get() {
    // 返回派生值（必須）
    return someDerivedValue
  },
  set(newValue) {
    // 處理賦值邏輯（可選）
    // 根據(jù) newValue 更新原始數(shù)據(jù)
  }
})

get()——讀取時觸發(fā)

• 當(dāng)你在模板中使用 {{ myComputed }}，或在 JS 中讀取 myComputed.value 時，會調(diào)用 get()。
• 它應(yīng)該返回一個值，這個值通常基于其他響應(yīng)式數(shù)據(jù)（如 ref 或 reactive 對象）計算而來。
• Vue 會自動追蹤 get() 內(nèi)部訪問的所有響應(yīng)式依賴，并在它們變化時重新計算。

set(newValue)——賦值時觸發(fā)

• 當(dāng)你執(zhí)行 myComputed.value = someValue（例如通過 v-model），就會調(diào)用 set(newValue)。
• newValue 就是你試圖賦給計算屬性的值。
• 在 set 中，你不能直接修改計算屬性本身（因為它沒有存儲空間），而是要反向更新它所依賴的原始數(shù)據(jù)。

五、 Vue 開發(fā)的核心思維轉(zhuǎn)變

你看，Vue 讓我們徹底從「操作頁面元素」變成了「操作數(shù)據(jù)」，代碼更清晰、更容易維護、也更好測試。

最后總結(jié)：

• ref 響應(yīng)式數(shù)據(jù)（核心核心）
• v-model 雙向綁定（表單必備）
• v-for / v-if 指令（模板必備）
• computed 計算屬性（性能+優(yōu)雅）
• Composition API 的 script setup（現(xiàn)代寫法）

到此這篇關(guān)于Vue基礎(chǔ)學(xué)習(xí)之ref響應(yīng)式數(shù)據(jù)、v-指令、computed的文章就介紹到這了,更多相關(guān)Vue ref響應(yīng)式數(shù)據(jù)、v-指令、computed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論