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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
浅谈PHP封装CURL
2019/03/06 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js实现无缝滚动图
2017/02/22 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
从vue源码看props的用法
2019/01/09 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python中字典的setdefault()方法教程
2017/02/07 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
悬挂训练绳:TRX
2017/12/14 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
党支部书记先进事迹
2014/01/17 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
超市采购员岗位职责
2014/02/01 职场文书
小区消防演习方案
2014/02/21 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
python绘制箱型图
2021/04/27 Python
Golang jwt身份认证
2022/04/20 Golang
Mysql中常用的join连接方式
2022/05/11 MySQL