Vue实现todo应用的示例

背景

首先声明，本人并不是前端大神，看过我之前的内容应该知道，我擅长做后端，虽然前端略有涉略，但谈不上精通，连熟悉都勉强。写这个系列的目的仅仅只是出于好奇，好奇为何前几年还是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>  

效果如下：

  • 输入框值发生变化时，在输入框下方会显示输入的内容（仅仅为了演示效果，忽略实际意义）
  • 每输入一条新的todo，下面就会多一项列表项
  • 点击列表项右边删除按钮可以删除当前列表项

demo虽然简单，但包含了vue所有核心功能

  • 双向值绑定(v-model)
  • 响应式，值发生变化，绑定的节点值也同步变化
  • 事件响应(v-on:click)
  • 循环指令(v-for)

后面的章节，我们不引入vue.js文件，一步步实现同样的功能。

以上就是Vue实现todo应用的示例的详细内容，更多关于Vue实现todo应用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

  • 使用Vue父子组件通信实现todolist的功能示例代码

    使用Vue父子组件通信实现todolist的功能示例代码

    先上代码 <body> <div id="root"> <div> <input v-model="inputValue" /> <button @click="handleClick">submit</button> </div> <ul> <todolist v-for="(item,index) of list" :ke

  • 使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

    前言 Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑. vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目 创建项目 ❓为什么使用 Vue Cli3 构建项目 官方维护,后续升级减少兼容性问题 使用以下配置进行项目的生成: Babel 对 Ts 进行转译 TSLint 对 TS 代码进行规范,后续会使用 prettie

  • vue todo-list组件发布到npm上的方法

    前言 最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用.想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例.案例源码:https://github.com/wuwhs/todoList 建立npm项目 1. 初始化npm项目 建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm i

  • vue组件编写之todolist组件实例详解

    vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • Vue中父子组件通讯之todolist组件功能开发

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

  • vue实现todolist基本功能以及数据存储功能实例详解

    实现todolist功能,具体实现如下: 可以实现对list添加.移除以及状态转变,其中添加功能既可以通过鼠标点击按钮实现,也可以通过回车键按下实现,通过使用v-model对checked的值进行双向绑定来完成状态的改变.在本次实际操作中仍存在一个小问题就是methods中函数调用,在完成数据存储前可以通过this.$options.methods.addFun();进行调用. <div id="app"> <input type="text" v

  • 详解vuex的简单todolist例子

    一个简单的vuex应用的小例子,一段自己的学习记录. todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除. 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> <div class="hello"> <input type="text"> <button>增加事项</button> <ul> &l

  • Vue实现todolist删除功能

    代码如下所示: <div id="app"> <input v-model="inputValue"> <button @click="handleSumbit">提交</button> <todo-item v-for="(item,index) of list":key="index":content="item":index=&

  • 使用Vue完成一个简单的todolist的方法

    使用Vue完成一个简单的todolist的方法

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we

随机推荐