Vue.js教程笔记

Attribute 绑定

思考

编码发现动态绑定和静态绑定的问题

动态绑定：

<h1 :class="titleClass">Make me red</h1> 使用了 Vue 的动态类绑定 (:class)。titleClass 是一个 ref，它的初始值是 'title'，即类名为 title。Vue 会将 titleClass 的值动态绑定为 h1 的 class，效果等同于直接设置 class="title"。

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

静态绑定：

<h1 class="title">Make me red</h1> 是静态绑定，直接将 title 类赋予 h1 元素。这个类直接引用了 CSS 中定义的 .title，因此同样应用了颜色规则。

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 class="title">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

<style>
.title {
  color: red;
}
</style>

列表渲染

更新列表有两种方式：

在源数组上调用变更方法：

todos.value.push(newTodo)

使用新的数组替代原数组：

todos.value = todos.value.filter(/* ... */)

运行代码

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({id: id++, text: newTodo.value})
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t)=>t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

函数的作用：

removeTodo(todo) 函数用于从待办事项（todos）列表中删除某个特定的待办事项（todo）。

函数的实现：

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}

这个函数的逻辑基于数组的 filter 方法。它做了以下几步：
1.参数：

函数接收一个参数 todo，这个参数是要删除的待办事项对象（即一个对象形如 { id: 1, text: 'Learn HTML' }）。
2.使用 filter 方法：
todos.value.filter((t) => t !== todo) 语句中，filter 方法会遍历 todos.value（待办事项列表）中的每一个待办事项 t。

filter 方法的作用是生成一个新的数组，包含所有不满足条件的元素。在这里，条件是 t !== todo，即 t 不等于我们要删除的那个 todo。

也就是说，所有与传入的 todo 不相等的待办事项都会保留下来，而与 todo 相等的待办事项会被过滤掉（即删除）。
3.更新 todos.value：

todos.value 是一个响应式的数组。在调用 filter 后，会生成一个新的数组（不包含要删除的待办事项），然后将这个新数组赋值给 todos.value。Vue 会自动检测到这个更改，并更新视图，移除相应的待办事项。

计算属性

添加 filteredTodos 计算属性并实现计算逻辑！如果实现正确，在隐藏已完成项目的状态下勾选一个 todo，它也应当被立即隐藏。

<script setup>
import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value
})
function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>