1.响应式
<script setup>
import { ref,reactive } from 'vue'
//ref任何类型,value暴露内部值
//template中不需要value
let counter=reactive({count:0})
let message=ref('hello')
</script>
<template>
<h1>{{counter.count}}</h1>
<h1>{{message}}</h1>
</template>
2.v-bind:class简写成:class
<script setup>
import { ref } from 'vue'
const titleClass = ref('title')
</script>
<template>
<!-- 将元素的class和组件的titleClass属性保持一致 -->
<h1 :class='titleClass'>Make me red</h1>
</template>
<style>
.title {
color: red;
}
</style>
3.事件监听,v-on:缩写成@
<script setup>
import { ref } from 'vue'
const count = ref(0)
function plus(){
count.value=count.value+1;
}
</script>
<template>
<!-- 使此按钮生效 -->
<button @click='plus'>count is: {{ count }}</button>
</template>
点击+1
4.表单绑定
<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
<input v-model='text'>
<p>{{ text }}</p>
</template>
5.条件渲染
<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列表渲染
<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(x=>x!==todo)
}
</script>
<template>
<!-- 修饰符,prevent阻止默认程序的运行 -->
<form @submit.prevent="addTodo">
<input v-model="newTodo">
<button>Add Todo</button>
</form>
<ul>
<li v-for="todo in todos" :key="todo.id">
<!-- todo是局部变量 -->
{{ todo.text }}
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
</template>
7.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 }
])
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)
}
//computed动态根据其他响应式数据,计算value
let filt=computed(()=>{
return hideCompleted.value
? todos.value.filter(x=>!x.done)
: todos.value
})
</script>
<template>
<form @submit.prevent="addTodo">
<input v-model="newTodo">
<button>Add Todo</button>
</form>
<ul>
<!-- 渲染filt列表 -->
<li v-for="todo in filt" :key="todo.id">
<!-- 复选框,每一个todo对象添加done属性 -->
<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.组件
App.vue
<script setup>
import ChildComp from './ChildComp.vue'
</script>
<template>
<ChildComp />
</template>
ChildComp.vue
<template>
<h2>A Child Component!</h2>
</template>