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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
Vue.Draggable实现交换位置
Apr 07 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模板中出现空行解决方法
2011/03/08 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python实现调用其他python脚本的方法
2014/10/05 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Python selenium文件上传方法汇总
2020/11/19 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python学习之time模块的基本使用
2021/01/17 Python
夫妻婚内购房协议书
2014/10/05 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
学习党章心得体会2016
2016/01/15 职场文书
六年级数学教学反思
2016/02/16 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB