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组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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/02/03 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现批量下载文件
2015/05/17 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
酒店出纳岗位职责
2013/12/29 职场文书
公立医院改革实施方案
2014/03/14 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
小学班主任培训方案
2014/06/04 职场文书
小学家长学校培训材料
2014/08/24 职场文书
写景作文评语集锦
2014/12/25 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript