1 声明式渲染
能在改变时触发更新的状态被称作是响应式的。我们可以使用 Vue 的 reactive() API 来声明响应式状态。reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
例：
<script setup>
import { ref } from 'vue'const t = ref("")
t.value = hello
</script><template><h1>{{t}}</h1>
</template>
2 Attribute 绑定
在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令，例：
<div v-bind:id="dynamicId"></div>
但是v-bind可以省略：
<div :id="dynamicId"></div>
例，将一个class动态绑定到一个h1:
<script setup>
import { ref } from 'vue'const titleClass = ref('title')
</script><template><h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template><style>
.title {color: red;
}
</style>
3 事件监听
可以通过v-on监听事件：
<button v-on:click="increment">{{ count }}</button>
<!-- v-on也可以简略-->
<button @click="increment">{{ count }}</button>
例，监听按钮的点击事件：
<script setup>
import { ref } from 'vue'const count = ref(0)
function add(){count.value++
}
</script><template><!-- 可以声明为函数--><button @click="add">Count is: {{ count }}</button><!-- 也可以直接声明可执行表达式--><button @click="count++">Count is: {{ count }}</button>
</template>
4 表单绑定
在处理页面和变量双向绑定有两种方式：
方式一，使用v-bind 和 v-on：
例：
<script setup>
import { ref } from 'vue'const text = ref('')
function onInput(e) {text.value = e.target.value
}
</script><template><input :value="text" @input="onInput" placeholder="Type here"><p>{{ text }}</p>
</template>
方法二，使用v-model
例：
<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 指令来有条件地渲染元素,当v-if的值为true时，元素才会被渲染。
例：
<script setup>
import { ref } from 'vue'const awesome = ref(true)
</script><template><button @click="awesome = !awesome">Toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 😢</h1>
</template>
6 列表渲染
我们可以使用 v-for 指令来渲染一个基于源数组的列表：
<ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样。
注意，我们还给每个 todo 对象设置了唯一的 id，并且将它作为特殊的 key attribute 绑定到每个
- 。key 使得 Vue 能够精确的移动每个
- ，以匹配对应的对象在数组中的位置。
例，实现列表元素的增删： -
<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}) }function removeTodo(todo) {todos.value = todos.value.filter(s=>s.id !== todo.id) } </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>7 计算属性
API computed()，它可以让我们创建一个计算属性 ref，这个 ref 会动态地根据其他响应式数据源来计算其 .value：
例，通过按钮来隐藏所有被删除的列表元素：<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 } ])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) }const completedTodos = computed(()=>{if(hideCompleted.value){return todos.value.filter((t) => !t.done)}else{return todos.value} })</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 completedTodos" :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>8 生命周期和模板引用
需要手动操作 DOM时，可以通过ref attribute来实现。
可以通过onMounted()等生命周期钩子函数来在指定生命周期执行目标代码。
例，在onMounted()修改<p>的值：<script setup> import { ref,onMounted } from 'vue'const pElementRef = ref(null) onMounted(()=>{pElementRef.value.textContent = "hhhh" }) </script><template><p ref="pElementRef">Hello</p> </template>9 监听器
watch() 可以直接侦听一个 ref，并且只要这个ref的值改变就会触发回调。
例，当点击按钮式显示新的todo内容：<script setup> import { ref,watch } from 'vue'const todoId = ref(1) const todoData = ref(null)async function fetchData() {todoData.value = nullconst res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)todoData.value = await res.json() }fetchData()watch(todoId,(newTodoId)=>{fetchData() }) </script><template><p>Todo id: {{ todoId }}</p><button @click="todoId++" :disabled="!todoData">Fetch next todo</button><p v-if="!todoData">Loading...</p><pre v-else>{{ todoData }}</pre> </template>10 组件
一个vue的应用会使用到多个组件，可以通过 import 的方式引用其他组件。
例，在App.vue中使用ChildComp.vue组件:ChildComp.vue：
<template><h2>A Child Component!</h2> </template>App.vue:
<script setup> import Child from "./ChildComp.vue" </script><template><Child/> </template>11 Props
在子组件中，可能会用到父组件中的变量。在父组件中可以像声明一个attribute一样，向子组件动态传值。子组件需要使用defineProps，生命需要使用父组件的变量。
ChildComp.vue：<script setup> const props = defineProps({msg: String }) </script><template><h2>{{ msg || 'No props passed yet' }}</h2> </template>App.vue:
<script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue'const greeting = ref('Hello from parent') </script><template><ChildComp :msg = "greeting"/> </template>12 Emits
除了属性，子组件也会使用到父组件中的事件。子组件需要使用defineEmits声明需要用到的事件，使用emit()调用事件。emit() 的第一个参数是事件的名称，其他所有参数都将传递给事件监听器。父组件可以使用 v-on 监听子组件触发的事件.
ChildComp.vue：<script setup> const emit = defineEmits(['response'])emit('response', 'hello from child') </script><template><h2>Child component</h2> </template>App.vue:
一、在v-on中声明函数名<script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet')function fuc(msg){childMsg.value = msg } </script><template><ChildComp @response="fuc"/><p>{{ childMsg }}</p> </template>二、直接在v-on中声明函数过程
<script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet') </script><template><ChildComp @response="(msg)=>{childMsg = msg}"/><p>{{ childMsg }}</p> </template>13 插槽
父组件还可以通过插槽 (slots) 将模板片段传递给子组件。子组件只需要使用
<slot>即可获取到父组件传输子组件的代码片段。
例：
ChildComp.vue：<template> <!--如果父组件没有传递任何内容，则会显示默认内容：Fallback content--><slot>Fallback content</slot> </template>App.vue:
<script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue'const msg = ref('from parent') </script><template><ChildComp>{{msg}}</ChildComp> </template>
