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基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue实现登陆页面开发实践
May 30 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文件操作的详解
2013/06/05 PHP
php生成html文件方法总结
2014/12/01 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
使用python进行拆分大文件的方法
2018/12/10 Python
如何使用python操作vmware
2019/07/27 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
美国鲜花递送:UrbanStems
2021/01/04 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
先进教师个人总结
2015/02/11 职场文书
入党转正申请报告
2015/05/15 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
Python 中面向接口编程
2022/05/20 Python