vue最简单的todolist

最新推荐文章于 2023-05-15 10:42:03 发布
最新推荐文章于 2023-05-15 10:42:03 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38600000/article/details/100530374
版权

v-model的双向数据绑定

使用组件代替li标签，并添加属性进行传值

每一个组件都是实例，自身的Vue是个根实例

在子组件定义一个点击事件并用$emit传事件和参数到父组件中，父组件监听到事件并定方法对子组件的值进行修改

酷雨吹
关注
vue实现todolist笔记
weixin_45732235的博客
03-19 3239
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
vue--简单的todolist
Ada_lake的博客
05-24 252
实现 TODOList 最简单的 1. input框中输入内容 2. 点击提交按钮 3. input框中的内容输入到下面的ul的li中 具体实现 html input输入内容-- v-model="inputValue"实现数据双向绑定 button点击提交-- v-on:click="handleBtnClick"实现方法绑定 ul的li中要存放输入后提交的内容-- v-for="item ...
vue 做一个简单的TodoList
azj63323的博客
09-17 237
目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &...
VUE编写一个简单的 ToDoList
cc012812的博客
02-19 566
这里创建完app后，在浏览器的console中可以直接打印 var app = new Vue({ }) 如，app.$data.inputValue就可以打印出input框中的内容，app.$data.inputValue='123' 就可以直接修改Input框中的内容 这里的this.inputValue，指的就是data中的inputValue的内容。 点击按钮，然后根据I...
一个简单的todolist
纸上得来终觉浅
11-18 1622
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue-todolist</title> <meta charset="utf-8" /> <script src="https://unpkg.com/v
Vue3.0实现todolist
ll666888999的博客
03-31 1640
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
vue2的todolist入门小项目的详细解析
08-30
今天，我们将通过构建一个简单的todolist小项目，来详细解析Vue.js的使用。 安装和配置环境 首先，我们需要安装Vue.js的命令行工具：`vue-cli`。使用以下命令安装： ``` $ npm install -g vue-cli ``` 然后，我们...
vue.js实例todoList项目
10-19
总结来说，这个Vue.js `todoList`项目展示了如何创建一个简单的待办事项列表，包括数据的定义、列表的渲染、事件监听以及数据驱动的视图更新。通过这个实例，开发者可以更好地理解Vue.js的基本概念，如组件、数据...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的...如果你对Vue.js感兴趣，这个简单的例子无疑是一个很好的学习起点。
Vue实现简易todolist
大风起兮云飞扬
02-09 266
通过单击添加按钮，将输入框中的值添加到下面，可删除，也可重新编辑。具体效果如图： 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
【vue】适合初学vue的简单todolist
qq_43586999的博客
05-13 295
其中主要是这三个组件，添加事件组件和事件列表组件，我将数据放在了父组件Appvue中，以供子组件访问。子组件AddTodovue需要向父组件中添加事项，但是只有父组件中的函数能够对数据进行操作，所以再AddTodovue中，表单提交函数将用户输入的一行数据todo以vm.emit(eventName,[…args]）函数的方式返回给Appvue组件中的add−todo绑定的函数，这个函数正是要给全局数据列表中追加数据的函数。Todovue子组件负责显示数据，并进行删除操作，删除按钮以vm.emit( eve
ToDoList—最简单的待办事项列表
remakez的博客
10-15 1086
ToDoList—最简单的待办事项列表 代码如下：(样式与网上的相同，js代码不同) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sca
使用vue制作todolist
最新发布
qq_69444691的博客
05-15 337
简单的实现了todoList案例
Vue实现简易版Todolist案例
龘
12-21 291
筛选+搜索功能 <select name="" id="" v-model="sel"> <option value="">请选择</option> <option value="all">全部</option> <option value="no">正在进行</option> <option value="yes">已经完成</option> </select>
Vue实现todoList（任务计划列表）
冰雪为融的博客
07-14 3万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
学习Vue 做一个简单的Todo List
DevilAngelia的博客
08-31 817
一、创建Vue项目 创建项目的方式有很多，这就简单的说两种吧： 1、命令行创建 win+r 输入cmd 回车 cd进入你要创建的目录 输入下面的命令，遇到需要确认的地方按回车就行了，一般没有什么问题 vue init webpack todolist // todolist是项目名称 创建成功以后 进入项目里面安装依赖运行 cd todolist npm install // yarn 或 cnpm install npm run dev 2、如果使用的HBuilder开发工具，可以直接在工
Vue实现简易TodoList
liaoai的博客
02-23 4975
文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vue TodoList案例 （省略样式部分） 分析 分为四个组件 Header List Item Footer App.vue <template> <div id="root"> <div class="todo-container"> <div
vue + element-ui 简单的入门小例子——todolist
热门推荐
界之边缘的轮回
03-08 4万+
1. 这里不使用vue-cli来构建，而是直接创建一个html，IE不支持 2. 引入Vue和element-ui，注意vue要先于element-ui的js引入,代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&
一个简单的todolist，记录我的前端第一步
to_study的博客
05-26 1万+
啦啦啦效果如下地址：点击打开链接body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2; } .todo{ width: 70%; margin: 1em auto 3em; border: 1px solid #efefef; bac...
vue实现todolist
05-14
好的，下面是一个简单的Vue实现todolist的例子： 首先在HTML中定义一个输入框和一个按钮，用于添加待办事项： ``` <div id="app"> <input v-model="newTodo" placeholder="Add a new todo"> <button @click="addTodo">Add</button> </div> ``` 然后在Vue实例中定义一个data属性newTodo，用于存储用户输入的待办事项，以及一个todos数组，用于存储所有的待办事项： ``` new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo() { this.todos.push(this.newTodo); this.newTodo = ''; } } }); ``` 最后，在页面中使用v-for指令遍历todos数组，将所有的待办事项渲染出来： ``` <div id="app"> <input v-model="newTodo" placeholder="Add a new todo"> <button @click="addTodo">Add</button> <ul> <li v-for="todo in todos">{{ todo }}</li> </ul> </div> ``` 这样，当用户在输入框中输入待办事项并点击添加按钮时，该待办事项就会被添加到todos数组中，并且新的待办事项列表会自动在页面中渲染出来。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值