Vue.js教程笔记
教程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 = 0const 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 = 0const 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>