五十六、TodoList的三种写法，祭奠我的前端之路
@Author：Runsen
@Date：2020/10/14
我是Runsen，目前是一名XX學院的大四學生。回想起自己正式涉足CSDN的學習，已然過去三年又幾。這三年里，有困惑、迷茫，也有堅持、不棄，既收獲成長，亦收獲一點小成績。
個人技術棧Python，Java，數據，前端，算法。
為了補考化工原理和熱力學，廢掉我九月50%精力和到現在十月80%精力，最后化工原理涼涼，考得都不是我復習準備得那個。
今天交卷的那個時刻我已經崩潰，考完才發現可能重修的只有我一個了。一群作弊的人才，最后監考老師抓了一個。其實，我挺佩服二十分鐘交卷的人。
高中化學的熱愛從這場補考中，一殺而過，最后有種想殺掉出補考卷的傻逼老師的沖突。你能不能放個水啊？有必要出的比之前還難下手的嗎？補考讓全部都重修，你覺得有意思嗎？
廢話不多說，還是進入訓練模式，我決定要選擇前端，這年頭校招都不好過。
文章目錄
- 最原始的TodoList
- 使用組件改造TodoList（全局組件）
- 使用組件改造TodoList（局部組件）
- 添加刪除功能
- 后言
最原始的TodoList
最原始的TodoList，其實我在N年前，就已經掌握了。
<head><meta charset="UTF-8"><title>Todolist</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><div id="app"><!-- v-model 是個語法糖，實際就是在觸發 input 事件時去更新inputValue 值. --><input type="text" v-model="inputValue"><!-- 如果點擊就是實現handleBtnClick方法，v-on:click可以縮寫成@click --><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul></div><script>var app = new Vue({el:"#app",data:{list: [],inputValue:''},methods: {handleBtnClick:function(){this.list.push(this.inputValue)this.inputValue = ""}},})</script> </body>使用組件改造TodoList（全局組件）
上面是使用<li v-for="item in list">{{item}}</li>遍歷li的，但是在vue中提供了組件，因此可以使用Vue.component組件改造TodoList。
<body><div id="app"><input type="text" v-model = "value"><button @click = "HandleBtnClick">提交</button><ul><!-- <li v-for="item in list">{{item}}</li> --><!-- 通過v-bind:content綁住item，然后這里的content傳到component中的TodoItem組件 --><todo-item v-bind:content="item" v-for="item in list"></todo-item></ul></div><script>//TodoItem組件對應的todo-item模板（component寫在外面是全局組件）Vue.component("TodoItem",{props:["content"],// template : "<li>" + this.content + "</li>" 不然會出現undefined// 這里需要用插值表達式進行傳參template : "<li>{{content}}</li>"})var app = new Vue({el: "#app",data : {list : [],value : "",},methods: {HandleBtnClick:function(){this.list.push(this.value)this.value = ""}},})</script> </body>使用組件改造TodoList（局部組件）
局部組件的不同和全局組件不同的是，我們通過var TodoItem={}定義局部組件，定義后還要在new Vue中進行聲明
<body><div id="app"><input type="text" v-model = "value"><button @click = "HandleBtnClick">提交</button><ul><!-- <li v-for="item in list">{{item}}</li> --><!-- 通過v-bind:content綁住item，然后這里的content傳到component中的TodoItem組件 --><todo-item v-bind:content="item" v-for="item in list"></todo-item></ul></div><script>// //TodoItem組件對應的todo-item模板// Vue.component("TodoItem",{// props:["content"],// // template : "<li>" + this.content + "</li>" 不然會出現undefined// // 這里需要用插值表達式進行傳參// template : "<li>{{content}}</li>"// })var TodoItem = {// 局部組件的數據props:["content"],// template : "<li>" + this.content + "</li>" 不然會出現undefined// 這里需要用插值表達式進行傳參template : "<li>{{content}}</li>"}var app = new Vue({el: "#app",// 將TodoItem寫在里面就是局部組件components:{TodoItem:TodoItem},data : {list : [],value : "",},methods: {HandleBtnClick:function(){this.list.push(this.value)this.value = ""}},})</script> </body>添加刪除功能
下面在TodoList添加刪除功能，給子組件綁定點擊事件HandleItemClick，子組件emit回傳到父組件delete，再觸發HandleItemDelete方法。
<body><div id="app"><input type="text" v-model = "value"><button @click = "HandleBtnClick">提交</button><ul><!-- <li v-for="item in list">{{item}}</li> --><!-- 通過v-bind:content綁住item，然后這里的content傳到component中的TodoItem組件 --><todo-item v-bind:content="item"v-bind:index = "index" v-for="(item,index) in list"@delete="HandleItemDelete"></todo-item></ul></div><script>var TodoItem = {// 局部組件的數據props:["content","index"],// template : "<li>" + this.content + "</li>" 不然會出現undefined// 這里需要用插值表達式進行傳參template : "<li @click='HandleItemClick'>{{content}}</li>",methods: {HandleItemClick:function(){this.$emit("delete",this.index)}},}var app = new Vue({el: "#app",// 將TodoItem寫在里面就是局部組件components:{TodoItem:TodoItem},data : {list : [],value : "",},methods: {HandleBtnClick:function(){this.list.push(this.value)this.value = ""},HandleItemDelete:function(index){this.list.splice(index,1)}},})</script> </body>于此于文，將自己在前端上的摸索和歷程記錄下來。
后言
2020 年 10 月 13 日凌晨一名大連理工大學研究生在實驗室自殺身亡，
我也慢慢接受了目前的一切，好好活著比什么都重要
生活，并不是學歷、工資、財富這些數字的簡單堆砌，不要被單向度的尺度限制了自己，甚至把自己逼上了絕路
要好好活著，為自己活著，管他最后怎么樣。
總結
以上是生活随笔為你收集整理的五十六、TodoList的三种写法，祭奠我的前端之路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 来分期为什么总是放款失败
- 下一篇： 2020 年最全 Python 面试题汇