剛學習vue的小伙伴不知道從哪入手，很多網上的教程一來就搭建腳手架環境，可以新手更本看不懂，建議還是用引入script的方式引入vue.js，然后看官網的教程，再拿那這個demo練練手，也可以看看官網的demo，然后再去熟悉安裝，搭建單頁面應用。
效果：
功能：
在input輸入文字點擊按鈕或者enter，下面會添加一個帶復選框和文字還有刪除按鈕的li
用到的vue函數：
data，methods，watch，還有localstorage
頁面非常簡單：
先寫外面的盒子，這里用到v-model雙向綁定input的值和js里的inputValue
<div id="vue-todolist" class="todolistDiv"> <span> todolist</span> <input class="ipt" type="text" v-model="inputVaule" /></div>
然后在js綁定：
var vm=new Vue({ el: '#vue-todolist', data: { inputVaule:"" }})頁面添加ul和button：
<div id="vue-todolist" class="todolistDiv"> <span> todolist</span> <input class="ipt" type="text" v-model="inputVaule" v-on:keyup.enter="add"/> <button v-on:click="add" class="btn">add</button> <ul > <li v-for="item in items" > <div class="liDiv"> <label>{{item.text}}</label> </div> </li> </ul> </div>button的點擊事件為methods里的add方法v-for就是遍歷items數組，將item的text顯示
js里的data要加上items,還要有methods:
var vm=new Vue({ el: '#vue-todolist', data: { items:[{text:'1'},{text:'2'}] inputVaule:"" }, methods:{ add:function(){ this.items.push({text:this.inputVaule}); this.inputVaule=""; } }})點擊按鈕時，就添加input的值到items數組，并重置值。這樣view就自動更新li添加一項，因為數據變化頁面也會實時更新，vue的好處開始浮現
在li加上checkbox和delete，再給items添加completed這個屬性，代表完成沒有，使用v-bind：class，意思是item.completed是true，那么就會使用complete這個class，如果false，就沒有class，complete這個class我們可以設置字體red，便于識別。
<li v-for="item in items" > <div class="liDiv"> <input type="checkbox" v-model="item.completed"> <label v-bind:class="{ complete:item.completed }">{{item.text}}</label> <button v-on:click="removeTodo(item)" class="btn">x</button> </div></li>js這里添加了completed屬性，還添加了removeTodo方法用于刪除指定item：
var vm=new Vue({ el: '#vue-todolist', data: { items:[{text:'1',completed:true},{text:'2',completed:false}] inputVaule:"" }, methods:{ add:function(){ this.items.push({text:this.inputVaule}); this.inputVaule=""; }, removeTodo: function (todo) { this.items.splice(this.items.indexOf(todo), 1) } }})現在已經完善的差不多了，可是我們發現，每次瀏覽器刷新，或者頁面重新打開，我們新增加的li就會消失，那我們要保存我們添加的數據，要怎么做呢，很簡單，html5為我們提供了localstorage這個東西，它保存數據在瀏覽器，使得頁面刷新或者重新打開或者瀏覽器關閉也不會數據丟失。
我們一步步來看怎么實現
1.添加li時保存數據到localstorage:
var STORAGE_KEY = 'todos-vuejs'//名稱var todoStorage = { save: function (todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) }} 很簡單，調用setItem傳入key和我們的items數組即可，這時候我們要用到watch函數了，去監視items數組，如果items數組有變化即添加或者刪除，我們都自動調用todostorage的save方法
watch:{ items:{ handler:function(items){ todoStorage.save(items) }, deep:true//一定要加 } }我們打開瀏覽器的開發者選項的dom，然后添加幾個li，可以看到localstorage里面已經保存了todos-vuejs，里面保存了我們添加的item數據
2.數據保存到瀏覽器的localstorage后，我們的items數組的數組源是不是也應該設置為localstorage的呢
添加fetch方法
var STORAGE_KEY = 'todos-vuejs'//名稱var todoStorage = { fetch: function () { var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]') todos.forEach(function (todo, index) { todo.id = index }) todoStorage.uid = todos.length return todos }, save: function (todos) { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)) }} 還有我們data里的items：
data: { items:todoStorage.fetch(),//直接從localstroage拿數據 inputVaule:"" },到這里功能就齊全了，小伙伴可以再添加更多的功能，比如全部刪除等，
最后附上源碼：https://github.com/gdmec07140603/todolist.git
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
