vue todos,vue实现todolist

　　本文主要介绍vue实现todo应用的例子，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。

背景

　　首先，我不是前端神。看了我之前的内容，应该知道我擅长做后端。虽然前端略有涉及，但我并不精通，勉强熟悉。写这个系列的目的只是出于好奇。不知道为什么几年前以JQuery为主的前端现在这么乱？好奇js打得有多好的我妈不知道。之所以选择vue作为起点，是因为vue比较简单，基本看demo就能入门。由于vue是目前流行的三大前端框架之一，我们只需要知道vue是如何实现的，是否对前端有一点了解就可以了。因此，在这个想法的推动下，

　　这里模仿vue并不是说我看了一遍vue的源代码，理解了之后再模仿vue的写法，语法还是vue的语法。但是，我可以自己想办法实现。当然我可以参考vue，但是以我的前端水平完全理解vue有点困难，所以如果你想知道vue的源码如何实现，这个系列不适合你，但是如果你像我一样懂一点js，又不会从vue的源码入手，但是你想

vue实现todo应用

　　本系列的想法是用vue实现一个简单的应用程序。在应用中使用vue的核心功能，然后代码不变，用我们自己的实现替换vue.js文件，最终达到和vue一样的效果。这里用vue实现了一个超级简单的todo应用，代码如下：

　　超文本标记语言

　　头

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　/头

　　身体

　　divid=app

　　inputv-model=newTodo/input

　　Buttonv-on:click=addTodo()添加/按钮

　　div输入的文本：{{newTodo}}/div

　　保险商实验所

　　divv-for=(todo，index)intodos style= margin-bottom:20px；

　　listyle= float:left；右边距：20px

　　{{todo.text}}

　　/李

　　button v-on:click= delete todo(index) delete/按钮

　　/div

　　/ul

　　/div

　　脚本

　　varappx=newVue({

　　埃尔： #app ，

　　数据：{

　　牛顿多：，

　　托多斯：[]

　　},

　　方法：{

　　addTodo:function(){

　　this . todos . push({ text:this . newdo })；

　　this . newtodo=“”；

　　},

　　deleteTodo:函数(索引){

　　this.todos.splice(索引，1)；

　　}

　　}

　　})

　　/脚本

　　/body

　　/html

　　效果如下：

　　当输入框的值发生变化时，输入框下方会显示输入的内容(只是为了演示效果，忽略实际意义)。

　　输入一个新的待办事项，下面就会多一个列表项。

　　单击列表项目右侧的删除按钮，删除当前列表项目。

　　Demo很简单，但是包含了vue的所有核心功能。

　　双向值绑定(v模型)

　　响应，值发生变化，绑定节点值同步变化。

　　事件(v-on:点击)

　　循环指令

　　后面章节就不介绍vue.js文件了，一步一步实现同样的功能。

　　这就是Vue实现todo应用的例子的细节。更多关于Vue实现todo应用的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。