Vue實(shí)現(xiàn)todo應(yīng)用的示例
首先聲明，本人并不是前端大神，看過我之前的內(nèi)容應(yīng)該知道，我擅長做后端，雖然前端略有涉略，但談不上精通，連熟悉都勉強(qiáng)。寫這個(gè)系列的目的僅僅只是出于好奇，好奇為何前幾年還是JQuery一統(tǒng)天下的前端局面如今為何如此混亂，好奇好好的js是如何被玩的親媽都不認(rèn)識(shí)，之所以選擇vue作為切入點(diǎn)，完全是因?yàn)関ue簡(jiǎn)單，基本看下demo就能入門，既然vue作為目前流行的前端三大框架之一，那么只要了解vue是怎么實(shí)現(xiàn)的，是不是對(duì)前端稍微有了一點(diǎn)認(rèn)識(shí)，于是在這種想法的促使下，有了這個(gè)系列。
這里模仿vue并不是指我把vue的源碼看了一遍，看懂了然后模仿vue寫，而是語法還是vue的語法，但是實(shí)現(xiàn)我自己想辦法實(shí)現(xiàn)，當(dāng)然可以參考vue，但以我前端的水平想完全看懂vue難度有點(diǎn)大，所以如果你想了解vue源碼實(shí)現(xiàn)，這個(gè)系列不適合你，但如果你和我一樣，稍微會(huì)點(diǎn)js，又對(duì)vue源碼無從下手，但又想知道如何實(shí)現(xiàn)跟vue一樣的功能，那么就跟著我一起，我們不看源碼，自己琢磨實(shí)現(xiàn)一個(gè)簡(jiǎn)單的vue。
vue實(shí)現(xiàn)todo應(yīng)用本系列的思路是，用vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單應(yīng)用，應(yīng)用中用到vue相關(guān)核心功能，然后代碼保持不變，把vue.js文件替換成我們自己的實(shí)現(xiàn)，最終達(dá)到和vue一樣的效果。這里用vue實(shí)現(xiàn)一個(gè)超簡(jiǎ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雖然簡(jiǎn)單，但包含了vue所有核心功能
雙向值綁定(v-model) 響應(yīng)式，值發(fā)生變化，綁定的節(jié)點(diǎn)值也同步變化 事件響應(yīng)(v-on:click) 循環(huán)指令(v-for)后面的章節(jié)，我們不引入vue.js文件，一步步實(shí)現(xiàn)同樣的功能。
以上就是Vue實(shí)現(xiàn)todo應(yīng)用的示例的詳細(xì)內(nèi)容，更多關(guān)于Vue實(shí)現(xiàn)todo應(yīng)用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁2. ASP.NET MVC使用JSAjaxFileUploader插件實(shí)現(xiàn)單文件上傳3. 使用ajax跨域調(diào)用springboot框架的api傳輸文件4. Python dict的常用方法示例代碼5. 使用AJAX實(shí)現(xiàn)上傳文件6. Python Matplotlib簡(jiǎn)易教程(小白教程)7. PHP數(shù)組操作詳細(xì)解釋8. java中redis增刪查以及清理緩存的案例9. Android實(shí)現(xiàn)下載進(jìn)度條效果10. 解決python logging遇到的坑 日志重復(fù)打印問題
網(wǎng)公網(wǎng)安備