From 92a71a60581f7a4b6b4b9ec4ccb0dd965528241f Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 27 Jul 2025 18:08:43 +0800
Subject: [PATCH] =?UTF-8?q?update=20for=20=E5=BE=AA=E7=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/vue/vue3-demo/src/views/AboutView.vue | 28 ++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/skills/vue/vue3-demo/src/views/AboutView.vue b/skills/vue/vue3-demo/src/views/AboutView.vue
index 83d1ac8..0e0e945 100644
--- a/skills/vue/vue3-demo/src/views/AboutView.vue
+++ b/skills/vue/vue3-demo/src/views/AboutView.vue
@@ -29,6 +29,24 @@
     <!-- style="color: red; font-size: 1em;" -->
     <span :style="dynamicStyle">style样式绑定</span>
 
+    <!-- 表单的绑定
+    https://cn.vuejs.org/guide/essentials/forms.html -->
+    <!-- value属性绑定 Model -- View(用户输入框里面的值) -->
+    <!-- input事件绑定 onInput View(用户在界面上的输入) -- Model -->
+    <!-- <input :value="inputValue" @input="inputEventHandler"> -->
+
+    <!-- 做了合并操作, 需要绑定元素的value, 并且监听input事件, 更新value属性的 这种操作
+    给了个 上层封装: v-model -->
+    <input v-model="inputValue">
+
+
+    <!-- 列表渲染 -->
+    <ul>
+      <li v-for="item in items" :key="item.message">
+        {{ item.message }}
+      </li>
+    </ul>
+
   </div>
 </template>
 
@@ -133,4 +151,14 @@ dynamicClass.value.static = false
 // css里面的属性 带有 - 需要被转换为驼峰
 const dynamicStyle = ref({ color: 'red', fontSize: '2em' })
 
+// 表单绑定
+const inputValue = ref('')
+// const inputEventHandler = (event) => {
+//   // 用户输入的值，传递给inputValue, 输入框才会显示用户输入的值
+//   inputValue.value = event.target.value
+// }
+
+// 响应式列表
+const items = ref([{ message: 'msg1' }, { message: 'msg2' }, { message: 'msg3' }])
+
 </script>