Vue实现todo应用的示例


Posted in Vue.js onFebruary 20, 2021

背景

首先声明,本人并不是前端大神,看过我之前的内容应该知道,我擅长做后端,虽然前端略有涉略,但谈不上精通,连熟悉都勉强。写这个系列的目的仅仅只是出于好奇,好奇为何前几年还是JQuery一统天下的前端局面如今为何如此混乱,好奇好好的js是如何被玩的亲妈都不认识,之所以选择vue作为切入点,完全是因为vue简单,基本看下demo就能入门,既然vue作为目前流行的前端三大框架之一,那么只要了解vue是怎么实现的,是不是对前端稍微有了一点认识,于是在这种想法的促使下,有了这个系列。

这里模仿vue并不是指我把vue的源码看了一遍,看懂了然后模仿vue写,而是语法还是vue的语法,但是实现我自己想办法实现,当然可以参考vue,但以我前端的水平想完全看懂vue难度有点大,所以如果你想了解vue源码实现,这个系列不适合你,但如果你和我一样,稍微会点js,又对vue源码无从下手,但又想知道如何实现跟vue一样的功能,那么就跟着我一起,我们不看源码,自己琢磨实现一个简单的vue。

vue实现todo应用

本系列的思路是,用vue实现一个简单应用,应用中用到vue相关核心功能,然后代码保持不变,把vue.js文件替换成我们自己的实现,最终达到和vue一样的效果。这里用vue实现一个超简单的todo应用,代码如下:

<html>  
<head>  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
    <div id="app">  
        <input v-model="newTodo"></input>  
        <button v-on:click="addTodo()">添加</button>  
        <div>输入的文字:{{newTodo}}</div>  
        <ul>  
            <div v-for="(todo,index) in todos" style="margin-bottom: 20px;">  
                <li style="float: left;margin-right: 20px;">  
                    {{todo.text}}  
                </li>  
                <button v-on:click="deleteTodo(index)">删除</button>  
            </div>  
        </ul>  
    </div>  
    <script>  
        var appx = new Vue({  
            el: '#app',  
            data: {  
                newTodo: '',  
                todos: []  
            },  
            methods: {  
                addTodo: function () {  
                    this.todos.push({ text: this.newTodo });  
                    this.newTodo = '';  
                },  
                deleteTodo: function (index) {  
                    this.todos.splice(index, 1);  
                }  
            }  
        })  
    </script>  
</body>  
</html>  

效果如下:

Vue实现todo应用的示例

  • 输入框值发生变化时,在输入框下方会显示输入的内容(仅仅为了演示效果,忽略实际意义)
  • 每输入一条新的todo,下面就会多一项列表项
  • 点击列表项右边删除按钮可以删除当前列表项

demo虽然简单,但包含了vue所有核心功能

  • 双向值绑定(v-model)
  • 响应式,值发生变化,绑定的节点值也同步变化
  • 事件响应(v-on:click)
  • 循环指令(v-for)

后面的章节,我们不引入vue.js文件,一步步实现同样的功能。

以上就是Vue实现todo应用的示例的详细内容,更多关于Vue实现todo应用的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue实现登录功能
Dec 31 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
You might like
一段防盗连的PHP代码
2006/12/06 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
js 匿名调用实现代码
2009/06/19 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
理解javascript中的闭包
2017/01/11 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
接待员岗位责任制
2014/02/10 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
全陪导游词
2015/02/04 职场文书
综合管理员岗位职责
2015/02/11 职场文书
行政复议决定书
2015/06/24 职场文书
python - asyncio异步编程
2021/04/06 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript