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在图片上传的时候压缩图片
Nov 18 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
ant design vue的form表单取值方法
Jun 01 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中new static() 和 new self() 的区别介绍
2015/01/09 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
10款最好的Python开发编辑器
2019/07/03 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Python-for循环的内部机制
2020/06/12 Python
Keras设置以及获取权重的实现
2020/06/19 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python中添加模块导入路径的方法
2021/02/03 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
职务说明书范文
2014/05/07 职场文书
挂靠协议书
2015/01/27 职场文书
运动会闭幕词
2015/01/28 职场文书
2016年春节慰问信息
2015/03/25 职场文书
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技