附完整代码,V-bind指令使用，Vue组件初探，利用组件改写Todo List

dceb3a82 · Bobby · fface129 · dceb3a82
隐藏空白更改
内联并排

Showing with 73 addition and 0 deletion

4.组件概念初探，改写Todo List.md 4.组件概念初探，改写Todo List.md +73 -0

未找到文件。
--- a/4.组件概念初探，改写Todo List.md
+++ b/4.组件概念初探，改写Todo List.md
@@ -112,3 +112,76 @@
        `
    });
 ```
+改写后的能实现和之前一样的功能，效果和万恒代码如下：
+![todo_list](./images/todo_list.gif)
+```HTMl
+<!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>组件改写ToDo</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+<script>
+    // 3. 创建VUE的实例
+    const app = Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                // 定义需要列表中展示的内容数组
+                list:[], // 默认是一个空数字，展示空列表
+                newItemContent:''
+            }
+        },
+        // 3.2 函数域，定义新增代办事项的处理逻辑
+        methods:{
+            addTodoItem(){
+                // 增加一个代办事项
+                this.list.push(this.newItemContent);
+                // 将输入框清空
+                this.newItemContent='';
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+        template:`
+        <input v-model="newItemContent"/>
+        <button v-on:click="addTodoItem">增加</button>
+        <ul>
+            <todo-item
+                v-for="(item,index) of list"
+                v-bind:content="item"
+                v-bind:content_index="index"
+            />
+        </ul>
+        `
+    });
+    // 向app注册名字为todo-item的组件
+    app.component('todo-item',{
+        // 这里定义组建的数据域、函数域、模板域
+        // 组件内部数据域
+        data(){
+            return{
+            }
+        },
+        // 外部向组件传递的值
+        props:['content',"content_index"],
+        // 模板域
+        template:`<li>{{content_index}} - {{content}}</li>`
+    });
+    // 最后才能将app进行挂载
+    app.mount('#root')
+</script>
+</html>
+```