1. 响应式数据与插值表达式
<script setup>
import { ref } from 'vue'
const text =ref({
title:"标题",
content:"内容"
})
text.value.content = "内容内容"
</script>
<template>
<h1>{{text.title}}</h1>
<p>{{text.content}}</p>
</template>
2. 计算属性computed
<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">
<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>
3. 侦听器
<script setup>
import { ref, watch } from 'vue'
const todoId = ref(1)
const todoData = ref(null)
async function fetchData() {
todoData.value = null
const res = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
todoData.value = await res.json()
}
fetchData()
watch(todoId, fetchData)
</script>
<template>
<p>Todo id: {{ todoId }}</p>
<button @click="todoId++">Fetch next todo</button>
<p v-if="!todoData">Loading...</p>
<pre v-else>{{ todoData }}</pre>
</template>
4. 指令
指令 | 作用 |
---|---|
v-text | 插入文本 |
v-html | 插入HTML |
v-bind (简写方式: ) | 绑定attribute |
v-on (简写方式@ ) | 绑定事件监听器 |
v-for | 多次渲染元素或模板块 |
v-if | 条件渲染元素或模板块 |
v-model | 在表单输入元素或组件上创建双向绑定 |
5. 修饰符(用于修饰指令)
指令 | 修饰符 |
---|---|
v-on | .stop/ .prevent/ .capture/ .self/ .once/ .left/ .left/ .middle |
v-model | .lazy/ .number/ .trim |
更多关于指令和修饰符的内容可以通过vue官网进行查询