保存进度！

2022-10-20 18:04:19 +08:00
parent 8e3dcf4e5b
commit 7439e216b9
5 changed files with 16085 additions and 43 deletions
--- a/code/web/car_dealer/vue/vue_01.html
+++ b/code/web/car_dealer/vue/vue_01.html
@@ -0,0 +1,62 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-10-20 15:07:59
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-10-20 16:45:40
+ * @FilePath: \car_dealer\vue\vue_01.html
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue3入门</title>
+    <link rel="stylesheet" href="../css/root.css" .css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/kane.css" .css" />
+    <script src="../js/vue/vue.global.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <div class="content">
+            <h1>{{title}}</h1>
+            <h1>{{count}}</h1>
+            <button v-on:click="addCount()">计数器</button>
+            <button v-on:click="switchButton()">{{btn_title}}</button>
+        </div>
+    </div>
+</body>
+<script>
+    const app = {
+        data() {
+            return {
+                title: "vue3 入门！",
+                count: 0,
+                btn_title: "走你",
+                btn_switch: true,
+            };
+        },
+        methods: {
+            addCount() {
+                this.count++;
+            },
+            switchButton() {
+                this.btn_switch = !this.btn_switch;
+
+                this.btn_title = this.btn_switch ? "走你！" : "滚";
+            }
+        },
+    };
+
+    const vm = Vue.createApp(app);
+
+    vm.mount("#app");
+</script>
+
+</html>