企业官网建设流程全解析

App.vue

<template> <div class="app"> <h2>求和为：{{ sum }}</h2> <h2>名字为：{{ person.name }}</h2> <h2>年龄为：{{ person.age }}</h2> <h2>骑车为：{{ car }}</h2> <button @click="changeSum">sum+1</button> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="changePerson">修改整个人</button> <span>||</span> <button @click="changeBrand">修改品牌</button> <button @click="changeColor">修改颜色</button> <button @click="changeEngine">修改发动机</button> <button @click="changeCar">修改整个车</button> </div> </template> <script setup lang="ts" name="App"> /* shallowRef, shallowReactive 创建浅层次响应式数据 */ import { ref, reactive, shallowRef, shallowReactive } from "vue"; let sum = ref(0); let person = shallowRef({ name: "zhangsan", age: 18, }); let car = shallowReactive({ brand: "奔驰", options: { color: "黑色", engine: "V8", }, }); function changeSum() { sum.value += 1; } function changeName() { person.value.name = "lisi"; } function changeAge() { person.value.age = 20; } function changePerson() { person.value = { name: "wangwu", age: 30, }; } function changeBrand() { car.brand = "宝马"; } function changeColor() { car.options.color = "白色"; } function changeEngine() { car.options.engine = "V6"; } function changeCar() { Object.assign(car, { brand: "奥迪", options: { color: "红色", engine: "V8", }, }); } </script> <style scoped> .app { color: red; background-color: #ddd; border-radius: 10px; box-shadow: 0 0 10px; padding: 10px; } </style>