feat: - 添加代码

src/App.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 15:54:50
- * @LastEditTime: 2021-10-18 19:02:19
+ * @LastEditTime: 2021-10-20 10:35:51
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /vue-scaffold/src/App.vue
@@ -33,10 +33,10 @@ interface App {
 export default defineComponent({
 	data() {
 		return {
-			title: null,
+			title: undefined,
 			obj: {
 				name: 'matias',
-				age: null,
+				age: undefined,
 			},
 		} as App
 	},

src/views/Home.vue

@@ -1,25 +1,63 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-15 17:25:57
- * @LastEditTime: 2021-10-15 17:45:55
+ * @LastEditTime: 2021-10-20 11:12:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /vue-scaffold/src/views/Home.vue
 -->
 <template>
 	<div class="home">
-		<img alt="Vue logo" src="../assets/logo.png" />
+		<div :class="{ logo: true, animation: animation }" @click="animationAction" />
+		<div :class="{ logo: true, zoom: zoom }" @click="zoomAction" />
+		<!-- <img alt="Vue logo"  /> -->
 		<!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> -->
 	</div>
 </template>
 
 <script lang="ts">
-// import Vue from "vue";
-// import Component from "vue-class-component";
-// // import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
+import { defineComponent } from 'vue'
 
-// @Component
-// export default class Home extends Vue {
-
-// }
+export default defineComponent({
+	data() {
+		return {
+			animation: false,
+			zoom: false,
+		}
+	},
+	methods: {
+		animationAction() {
+			this.animation = !this.animation
+		},
+		zoomAction() {
+			this.zoom = !this.zoom
+		},
+	},
+})
 </script>
+
+<style lang="scss">
+.logo {
+	height: 100px;
+	width: 100px;
+	background-color: red;
+	animation-name: spin;
+	animation-duration: 1000ms;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+.animation {
+	transform: scale(0.5);
+}
+.zoom {
+	zoom: 0.5;
+}
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>