added event handler; added form binding with v-model

src/App.vue

@@ -5,6 +5,7 @@
 import tutorial_1_options from './components/Tutorial-1-options.vue';
 import tutorial_1_composition from './components/Tutorial-1-composition.vue';
 import tutorial_2_composition from './components/Tutorial-2-composition.vue';
+import tutorial_3_composition from './components/Tutorial-3-composition.vue';
 import sidebar from './components/Sidebar.vue';
 import { store } from './components/Store.js';
 import { menuList } from './components/Store.js';
@@ -12,7 +13,8 @@ import { menuList } from './components/Store.js';
 const componentMap = {
     tutorial_1_options,
     tutorial_1_composition,
-    tutorial_2_composition
+    tutorial_2_composition,
+    tutorial_3_composition
 };
 
 </script>

src/components/Store.js

@@ -24,5 +24,10 @@ export const menuList = reactive([
         id: 3,
         name: "Tutorial-2-composition",
         elementName: "tutorial_2_composition"
+    },
+    {
+        id: 4,
+        name: "Tutorial-3-composition",
+        elementName: "tutorial_3_composition"
     }
 ])
\ No newline at end of file

src/components/Tutorial-1-composition.vue

@@ -6,6 +6,7 @@
         Tutorial-1-composition
     </H1>
     <br>
+    <hr>
     <!-- 文本插值演示({{ variable }}) -->
     <h3>
         <span v-text="textInsertDemo"></span>

src/components/Tutorial-1-options.vue

@@ -6,6 +6,7 @@
         Tutorial-1-options
     </H1>
     <br>
+    <hr>
     <!-- 文本插值演示({{ variable }}) -->
     <h3>
         <span v-text="textInsertDemo"></span>

src/components/Tutorial-2-composition.vue

@@ -5,6 +5,8 @@
     <H1>
         Tutorial-2-composition
     </H1>
+    <br>
+    <hr>
     <!-- 计算属性 -->
     <h3>
         <span>计算属性</span>
@@ -68,7 +70,40 @@
         </ul>
     </div>
     <br>
-
+    <hr>
+    <!-- 数组变化侦测 -->
+    <h3>
+        <span>数组变化侦测</span>
+    </h3>
+    <div>
+        <input id="npcName"/>
+        <button @click="addNpc">添加</button>
+    </div>
+    <div>
+        <div v-for="npc in npcs">
+            {{ npc }}
+        </div>
+    </div>
+    <br>
+    <hr>
+    <!-- 数组过滤和排序 -->
+    <h3>
+        <span>数组过滤和排序</span>
+    </h3>
+    <div>
+        <span>过滤结果</span>
+        <div v-for="filteredNpc in filteredNpcs">
+            {{ filteredNpc }}
+        </div>
+    </div>
+    <br>
+    <div>
+        <span>排序结果</span>
+        <div v-for="sortedNpc in sortedNpcs">
+            {{ sortedNpc }}
+        </div>
+    </div>
+    <br>
 
 </template>
 
@@ -99,28 +134,33 @@ export default {
         // 用于绑定 Style
         const fontSize = ref(24)
         // 用于展示v-for 不绑定 id 的问题
-        var items = reactive([
-            {
-                id: 1,
-                name: 'Alice'
-            },
-            {
-                id: 2,
-                name: 'Bob'
-            },
-            {
-                id: 3,
-                name: 'Charlie'
-            }
+        const items = reactive([
+            { id: 1, name: 'Alice' },
+            { id: 2, name: 'Bob' },
+            { id: 3, name: 'Charlie' }
         ])
         const isChecked = reactive({
             result: true
         })
+        // 用于数组变化侦测
+        const npcs = reactive([
+            "张三",
+            "李四",
+            "王五"
+        ])
 
         // 定义计算属性
         const publishedBooksMessage = computed(() => {
             return author.books.length > 0 ? "Yes" : "No"
         })
+        // 用于数组过滤和排序
+        const filteredNpcs = computed(() => {
+            return npcs.filter((str, index) => index % 2 === 0)
+        })
+        const sortedNpcs = computed(() => {
+            var newArray = filteredNpcs
+            return newArray.value.sort()
+        })
 
         // 定义函数
         function toggleActive() {
@@ -139,6 +179,13 @@ export default {
             items = items.sort(() => Math.random() - 0.5);
         }
 
+        function addNpc() {
+            if (document.getElementById("npcName").value != "") {
+                npcs.push(document.getElementById("npcName").value)
+                document.getElementById("npcName").value = ""
+            }
+        }
+
         // 返回变量和函数，暴露给模板使用
         return {
             // 变量
@@ -148,13 +195,17 @@ export default {
             fontSize,
             items,
             isChecked,
+            npcs,
             // 计算属性
             publishedBooksMessage,
+            filteredNpcs,
+            sortedNpcs,
             // 函数
             toggleActive,
             toggleHasError,
             changeFontSize,
-            shuffle
+            shuffle,
+            addNpc
         }
     }
 }

src/components/Tutorial-3-composition.vue

+<template>
+    <hr style="height: 30px;
+    border: 0;
+    box-shadow: inset 0 30px 30px -30px darkblue;">
+    <H1>
+        Tutorial-3-composition
+    </H1>
+    <br>
+    <hr>
+    <!-- 内联事件处理器 -->
+    <h3>
+        <span>内联事件处理器</span>
+    </h3>
+    <button @click="count++">Add 1</button>
+    <p>Count is: {{ count }}</p>
+    <br>
+    <hr>
+    <!-- 函数事件处理器 -->
+    <h3>
+        <span>函数事件处理器</span>
+    </h3>
+    <button data-value="buttonGreet" @click="greet">Greet</button>
+    <br>
+    <hr>
+    <!-- 事件修饰符 -->
+    <h3>
+        <span>事件修饰符</span>
+    </h3>
+    <button @click.once="handleOnce">只触发一次</button>
+    <br>
+    <hr>
+    <!-- 按键修饰符 -->
+    <h3>
+        <span>按键修饰符</span>
+    </h3>
+    <input id="input1" @keyup.enter="handleEnter" placeholder="按回车捕获键盘事件"/>
+    <br>
+    <hr>
+    <!-- 表单输入绑定 -->
+    <h3>
+        <span>表单输入绑定</span>
+    </h3>
+    <div>
+        <input v-model="text"/>
+    </div>
+    <div>
+        <output>{{ text }}</output>
+    </div>
+    <br>
+    <hr class="half-line">
+    <br>
+    <div>
+        <input v-model.lazy="textLazy"/>
+    </div>
+    <div>
+        <output>{{ textLazy }}</output>
+    </div>
+    <br>
+    <hr class="half-line">
+    <br>
+    <div>复选</div>
+    <div>
+        <input type="checkbox" id="checkbox" v-model="checked" />
+        <label for="checkbox">{{ checked }}</label>
+    </div>
+    <br>
+    <hr class="half-line">
+    <br>
+    <div>单选</div>
+    <div>Picked: {{ picked }}</div>
+    <input type="radio" id="one" value="One" v-model="picked" />
+    <label for="one">One</label>
+    <input type="radio" id="two" value="Two" v-model="picked" />
+    <label for="two">Two</label>
+    <br>
+    <hr class="half-line">
+    <br>
+    <div>复选框</div>
+    <div>Selected: {{ selected }}</div>
+    <select v-model="selected" multiple>
+        <option>A</option>
+        <option>B</option>
+        <option>C</option>
+    </select>
+    <hr>
+
+</template>
+
+<script>
+
+import {ref} from "vue";
+
+export default {
+
+    // 固定名称的函数，在生命周期钩子中自动执行
+    setup() {
+
+        // 定义变量
+        // 内联事件处理器
+        const count = ref(0)
+        // 函数事件处理器
+        const name = ref("Vue.js")
+        // 表单输入绑定
+        const text = ref("表单输入绑定文字")
+        const textLazy = ref("表单输入绑定文字.lazy")
+        const checked = ref(false)
+        const picked = ref("None")
+        const selected = ref("selected")
+        selected.value = ""
+        // 定义计算属性
+        // 定义函数
+        function greet(event) {
+            alert(`Hello ${name.value}!`)
+            // `event` 是 DOM 原生事件
+            if (event) {
+                const presetValue = event.target.getAttribute('data-value');
+                alert(event.target.tagName + " - " + presetValue)
+            }
+        }
+
+        function handleOnce() {
+            alert("触发了")
+        }
+
+        function handleEnter() {
+            document.getElementById("input1").value = "Enter pressed!"
+        }
+
+        // 返回变量和函数，暴露给模板使用
+        return {
+            // 变量
+            count,
+            name,
+            text,
+            textLazy,
+            checked,
+            picked,
+            selected,
+            // 函数
+            greet,
+            handleOnce,
+            handleEnter
+        }
+
+    }
+
+}
+
+</script>
+
+<style>
+.half-line {
+    width: 50%; /* 改变宽度为50%，实现半条线的效果 */
+    border: none; /* 移除默认边框 */
+    height: 0.5px; /* 设置线条的高度 */
+    background-color: grey; /* 设置线条颜色 */
+    float: left;
+}
+</style>
\ No newline at end of file