Vue實(shí)現(xiàn)todo應(yīng)用的示例
首先聲明，本人并不是前端大神，看過我之前的內(nèi)容應(yīng)該知道，我擅長做后端，雖然前端略有涉略，但談不上精通，連熟悉都勉強(qiáng)。寫這個(gè)系列的目的僅僅只是出于好奇，好奇為何前幾年還是JQuery一統(tǒng)天下的前端局面如今為何如此混亂，好奇好好的js是如何被玩的親媽都不認(rèn)識，之所以選擇vue作為切入點(diǎn)，完全是因?yàn)関ue簡單，基本看下demo就能入門，既然vue作為目前流行的前端三大框架之一，那么只要了解vue是怎么實(shí)現(xiàn)的，是不是對前端稍微有了一點(diǎn)認(rèn)識，于是在這種想法的促使下，有了這個(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，又對vue源碼無從下手，但又想知道如何實(shí)現(xiàn)跟vue一樣的功能，那么就跟著我一起，我們不看源碼，自己琢磨實(shí)現(xiàn)一個(gè)簡單的vue。
vue實(shí)現(xiàn)todo應(yīng)用本系列的思路是，用vue實(shí)現(xiàn)一個(gè)簡單應(yīng)用，應(yīng)用中用到vue相關(guān)核心功能，然后代碼保持不變，把vue.js文件替換成我們自己的實(shí)現(xiàn)，最終達(dá)到和vue一樣的效果。這里用vue實(shí)現(xiàn)一個(gè)超簡單的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é)點(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)用的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Java進(jìn)行Appium自動(dòng)化測試的實(shí)現(xiàn)2. 詳細(xì)總結(jié)Java for循環(huán)的那些坑3. php中PHPUnit框架實(shí)例用法4. Python通過format函數(shù)格式化顯示值5. 新手學(xué)python應(yīng)該下哪個(gè)版本6. jsp文件下載功能實(shí)現(xiàn)代碼7. uni-app結(jié)合PHP實(shí)現(xiàn)單用戶登陸demo及解析8. 如何利用Python matplotlib繪制雷達(dá)圖9. ajax實(shí)現(xiàn)頁面的局部加載10. 詳解CSS偽元素的妙用單標(biāo)簽之美
網(wǎng)公網(wǎng)安備