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>
效果如下：
demo雖然簡單，但包含了vue所有核心功能
雙向值綁定(v-model) 響應式，值發生變化，綁定的節點值也同步變化 事件響應(v-on:click) 循環指令(v-for)后面的章節，我們不引入vue.js文件，一步步實現同樣的功能。
以上就是Vue實現todo應用的示例的詳細內容，更多關于Vue實現todo應用的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備