当前位置：首页 > news >正文

vue3官网文档学习、复习笔记（快速上手）

news 2025/8/12 0:40:13

2.Attribute 绑定（v-bind）

3.事件监听（v-on）

4.表单绑定（v-model）

5.条件渲染（v-if）

6.列表渲染（v-for）

all.value = all.value.filter（（t） => t ！== all）

7.计算属性（computed()）

8.生命周期和模板引用（onMounted、ref=）

9.侦听器（watch()）

10.组件（ChildComp）

11.Props（使用父组件动态数据defineProps()）

12.Emits（子组件向父组件触发事件）

13.插槽（slots)

能在改变时触发更新的状态被称作是响应式的。我们可以使用 Vue 的 reactive() API 来声明响应式状态。由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样：

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。

reactive() 和 ref() 的细节：响应式基础 | Vue.js (vuejs.org)

例：
<script setup>
import { reactive, ref } from 'vue'const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script><template><h1>{{ message }}</h1><p>Count is: {{ counter.count }}</p>
</template>
注意我们在模板中访问的 message ref 时不需要使用 .value：它会被自动解包，让使用更简单。

2.Attribute 绑定（v-bind）

mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令

例：

把一个动态的 class 绑定添加到这个 <h1> 上，并使用 titleClass 的 ref 作为它的值。如果绑定正确，文字将会变为红色。
<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>

3.事件监听（v-on）

例：

尝试自行实现 increment 函数并通过使用 v-on 将其绑定到按钮上
<script setup>
import { ref } from 'vue'const count = ref(0)function increment() {count.value++
}
</script><template><button @click="increment">count is: {{ count }}</button>
</template>

4.表单绑定（v-model）

我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖

例：

试着在文本框里输入——你会看到 <p> 里的文本也随着你的输入更新了
<script setup>
import { ref } from 'vue'const text = ref('')
</script><template><input v-model="text" placeholder="Type here"><p>{{ text }}</p>
</template>

5.条件渲染（v-if）

例：

同时展示了两个 <h1> 标签，并且按钮不执行任何操作。尝试给它们添加 v-if 和 v-else 指令，并实现 toggle() 方法，让我们可以使用按钮在它们之间切换。
<script setup>
import { ref } from 'vue'const awesome = ref(true)function toggle() {awesome.value = !awesome.value
}
</script><template><button @click="toggle">toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1>
</template>

6.列表渲染（v-for）

例：

这里有一个简单的 todo 列表——试着实现一下 addTodo() 和 removeTodo() 这两个方法的逻辑，使列表能够正常工作！
<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"><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>
all.value = all.value.filter（（t） => t ！== all）

该代码通过删除任何等于的元素来筛选数组中的元素。然后将过滤后的结果分配回。todos.value.filter((t) => t !== todo)

当您要从数组中删除特定元素时，可以使用此代码。它遍历数组中的每个元素（）并检查它是否不等于。如果条件为 true，则该元素将保留在筛选结果中，否则将删除该元素。

过滤后，生成的数组被赋回变量，有效地使用修改后的数组对其进行更新

<form @submit.prevent=“addTodo”>

该代码为元素上的事件设置事件处理程序。提交表单时，它会调用 Vue.js 实例中指定的方法或函数。<form @submit.prevent="addTodo">

该指令阻止默认表单提交行为，这通常涉及刷新页面或导航到新 URL。相反，它允许您定义自定义逻辑以使用该方法处理表单提交

7.计算属性（computed()）

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

例：

试着添加 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"><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>