Vue實現(xiàn)todo應(yīng)用的示例
首先聲明，本人并不是前端大神，看過我之前的內(nèi)容應(yīng)該知道，我擅長做后端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅只是出于好奇，好奇為何前幾年還是JQuery一統(tǒng)天下的前端局面如今為何如此混亂，好奇好好的js是如何被玩的親媽都不認識，之所以選擇vue作為切入點，完全是因為vue簡單，基本看下demo就能入門，既然vue作為目前流行的前端三大框架之一，那么只要了解vue是怎么實現(xiàn)的，是不是對前端稍微有了一點認識，于是在這種想法的促使下，有了這個系列。
這里模仿vue并不是指我把vue的源碼看了一遍，看懂了然后模仿vue寫，而是語法還是vue的語法，但是實現(xiàn)我自己想辦法實現(xiàn)，當然可以參考vue，但以我前端的水平想完全看懂vue難度有點大，所以如果你想了解vue源碼實現(xiàn)，這個系列不適合你，但如果你和我一樣，稍微會點js，又對vue源碼無從下手，但又想知道如何實現(xiàn)跟vue一樣的功能，那么就跟著我一起，我們不看源碼，自己琢磨實現(xiàn)一個簡單的vue。
vue實現(xiàn)todo應(yīng)用本系列的思路是，用vue實現(xiàn)一個簡單應(yīng)用，應(yīng)用中用到vue相關(guān)核心功能，然后代碼保持不變，把vue.js文件替換成我們自己的實現(xiàn)，最終達到和vue一樣的效果。這里用vue實現(xiàn)一個超簡單的todo應(yīng)用，代碼如下：
<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) 響應(yīng)式，值發(fā)生變化，綁定的節(jié)點值也同步變化 事件響應(yīng)(v-on:click) 循環(huán)指令(v-for)后面的章節(jié)，我們不引入vue.js文件，一步步實現(xiàn)同樣的功能。
以上就是Vue實現(xiàn)todo應(yīng)用的示例的詳細內(nèi)容，更多關(guān)于Vue實現(xiàn)todo應(yīng)用的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Kotlin + Flow 實現(xiàn)Android 應(yīng)用初始化任務(wù)啟動庫2. 基于javascript處理二進制圖片流過程詳解3. Gitlab CI-CD自動化部署SpringBoot項目的方法步驟4. ajax請求添加自定義header參數(shù)代碼5. 使用python 計算百分位數(shù)實現(xiàn)數(shù)據(jù)分箱代碼6. ASP基礎(chǔ)知識VBScript基本元素講解7. ASP中解決“對象關(guān)閉時,不允許操作。”的詭異問題……8. ASP刪除img標簽的style屬性只保留src的正則函數(shù)9. 教你如何寫出可維護的JS代碼10. 使用Python和百度語音識別生成視頻字幕的實現(xiàn)
網(wǎng)公網(wǎng)安備