Vue實現(xiàn)todo應用的示例
背景
首先聲明，本人并不是前端大神，看過我之前的內(nèi)容應該知道，我擅長做后端，雖然前端略有涉略，但談不上精通，連熟悉都勉強。寫這個系列的目的僅僅只是出于好奇，好奇為何前幾年還是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應用
本系列的思路是，用vue實現(xiàn)一個簡單應用，應用中用到vue相關核心功能，然后代碼保持不變，把vue.js文件替換成我們自己的實現(xiàn)，最終達到和vue一樣的效果。這里用vue實現(xiàn)一個超簡單的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>
效果如下：
- 輸入框值發(fā)生變化時，在輸入框下方會顯示輸入的內(nèi)容（僅僅為了演示效果，忽略實際意義）
- 每輸入一條新的todo，下面就會多一項列表項
- 點擊列表項右邊刪除按鈕可以刪除當前列表項
demo雖然簡單，但包含了vue所有核心功能
- 雙向值綁定(v-model)
- 響應式，值發(fā)生變化，綁定的節(jié)點值也同步變化
- 事件響應(v-on:click)
- 循環(huán)指令(v-for)
后面的章節(jié)，我們不引入vue.js文件，一步步實現(xiàn)同樣的功能。
以上就是Vue實現(xiàn)todo應用的示例的詳細內(nèi)容，更多關于Vue實現(xiàn)todo應用的資料請關注腳本之家其它相關文章！
- 使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法
- 詳解vuex的簡單todolist例子
- webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法
- vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能實例詳解
- 使用Vue父子組件通信實現(xiàn)todolist的功能示例代碼
- Vue實現(xiàn)todolist刪除功能
- Vue中父子組件通訊之todolist組件功能開發(fā)
- vue todo-list組件發(fā)布到npm上的方法
- vue組件編寫之todolist組件實例詳解
- 使用Vue完成一個簡單的todolist的方法
相關文章
本文主要介紹了Vue中的性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
下面小編就為大家分享一篇vue 路由頁面之間實現(xiàn)用手指進行滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中getters的使用與四個map方法的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要給大家介紹一下vue實現(xiàn)在頁面上添加水印的實例,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
vue2.0設置proxyTable使用axios進行跨域請求的方法
這篇文章主要介紹了vue2.0設置proxyTable使用axios進行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue項目使用.env文件配置全局環(huán)境變量的方法
這篇文章主要介紹了vue項目使用.env文件配置全局環(huán)境變量的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
在實際的項目中,和后臺的數(shù)據(jù)交互是少不了的,我通常使用的是 axios 庫,所以下面這篇文章主要給大家介紹了關于vue封裝axios與api接口管理的相關資料,需要的朋友可以參考下2022-01-01
vue 使用 vue-pdf 實現(xiàn)pdf在線預覽的示例代碼
這篇文章主要介紹了vue 使用 vue-pdf 實現(xiàn)pdf在線預覽的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
Vue組件庫ElementUI實現(xiàn)表格加載樹形數(shù)據(jù)教程
這篇文章主要為大家詳細介紹了Vue組件庫ElementUI實現(xiàn)表格加載樹形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06