凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
五十六、todolist的三种写法，祭奠我的前端之路
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
@author：runsen
@date：2020/10/14
我是runsen，目前是一名xx学院的大四学生。回想起自己正式涉足csdn的学习，已然过去三年又几。这三年里，有困惑、迷茫，也有坚持、不弃，既收获成长，亦收获一点小成绩。
个人技术栈python，java，数据，前端，算法。
为了补考化工原理和热力学，废掉我九月50%精力和到现在十月80%精力，最后化工原理凉凉，考得都不是我复习准备得那个。
今天交卷的那个时刻我已经崩溃，考完才发现可能重修的只有我一个了。一群作弊的人才，最后监考老师抓了一个。其实，我挺佩服二十分钟交卷的人。
高中化学的热爱从这场补考中，一杀而过，最后有种想杀掉出补考卷的傻逼老师的冲突。你能不能放个水啊？有必要出的比之前还难下手的吗？补考让全部都重修，你觉得有意思吗？
废话不多说，还是进入训练模式，我决定要选择前端，这年头校招都不好过。
文章目录
- 最原始的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"><input type="text" v-model="inputvalue"><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>
上面是使用
{{item}}遍历li的，但是在vue中提供了组件，因此可以使用vue.component组件改造todolist。
<body><div id="app">
