用vue.js實(shí)現(xiàn)一個(gè)todolist項(xiàng)目：input輸入框輸入的值會(huì)呈現(xiàn)在下方，并且會(huì)保存在localStorage里面，而且下方的列表點(diǎn)擊之后也會(huì)有變化：
完整代碼：
App.vue
<template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="addNew" ></input> <ul> <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</li> </ul> </div></template><script>import Store from './store'export default { data:function(){ return { title:"This Is A Todolist", items:Store.fetch(), newItem:"" } }, watch:{ items:{ handler:function(items){ Store.save(items) }, deep:true } }, methods:{ toggleFinish:function(item){ item.isFinished = !item.isFinished }, addNew:function(){ this.items.push({ label:this.newItem, "isFinished":false }) this.newItem="" } }}</script><style>.finished{ text-decoration:underline;}li{ list-style:none; font-size:1.6em; margin-top:10px;}#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}input{ width:230px; height:40px; border-radius:20px; padding: 0.4em 0.35em; border:3px solid #CFCFCF; font-size: 1.55em;}</style>store.js:
const STORAGE_KEY='todos-vuejs' export default { fetch:function(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]'); }, save:function(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) }} 詳細(xì)解析
ES6的寫(xiě)法：
export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }}export default 和 export 區(qū)別：
1）.export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
2）.你可以在其它文件或模塊中通過(guò)import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用
3）.在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
4）.通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要
1.export
//demo1.jsexport const str = 'hello world'export function f(a){ return a+1}對(duì)應(yīng)的導(dǎo)入方式：//demo2.jsimport { str, f } from 'demo1' //也可以分開(kāi)寫(xiě)兩次，導(dǎo)入的時(shí)候帶花括號(hào)2.export default
//demo1.jsexport default const str = 'hello world'對(duì)應(yīng)的導(dǎo)入方式：//demo2.jsimport str from 'demo1' //導(dǎo)入的時(shí)候沒(méi)有花括號(hào)
當(dāng)最簡(jiǎn)單導(dǎo)入的時(shí)候，這個(gè)值是將被認(rèn)為是”入口”導(dǎo)出值。
在App.vue中完成項(xiàng)目編寫(xiě)：
組件布局將在這里設(shè)置，.vue文件將由vue-loader進(jìn)行加載，.vue內(nèi)同時(shí)包含html、css、js源碼，使組件的獨(dú)立，組件之間可以盡可能地解耦，便于開(kāi)發(fā)維護(hù)
先看一個(gè)簡(jiǎn)單示例：只要isFinished為true就加下劃線，false就不加下劃線：
<template> <div id="app"> <h1 v-html = "title"></h1> <ul> <li v-for="item in items" v-bind:class="{finished:item.isFinished}">{{item.label}}</li> </ul> </div></template><script>import Hello from './components/Hello'export default { data:function(){ return { title:"this is a todolist", items:[ { label:"coding", "isFinished":false }, { label:"walking", "isFinished":true } ] } }}</script><style>.finished{ text-decoration:underline;}#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>對(duì)于class的控制如上：如果是數(shù)組的話則可以渲染多個(gè)。
再進(jìn)一步完成功能：點(diǎn)擊沒(méi)有下劃線的li就會(huì)加下劃線，有下劃線就會(huì)去除下劃線。
需要綁定事件：
還要添加方法toggleFinish()：
methods:{ toggleFinish:function(item){ item.isFinished = !item.isFinished } }將input輸入的值添加到列表下面
添加input：
<input v-model="newItem" v-on:keyup.enter="addNew" ></input>
data對(duì)象添加：
newItem:""
添加方法：
//addNew:function(){// alert(this.newItem)// this.newItem="" //添加后加輸入框清空//}addNew:function(){ this.items.push({ label:this.newItem, "isFinished":false }) this.newItem=""}使用localStorage來(lái)存儲(chǔ)
使用store.js：
const STORAGE_KEY='todos-vuejs' export default { fetch:function(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]'); }, save:function(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) }}兩個(gè)方法：一個(gè)設(shè)置，一個(gè)獲取
導(dǎo)入：
import Store from './store'
打印一下Store,console.log(Store)，可以看到：
由于加入代碼中每次都需要添加還有刪除等等，如果每次都用到store的方法，這就有點(diǎn)麻煩了，所以這里就要用到watch觀察。
watch:{ items:{ handler:function(val,oldVal){ console.log(val,oldVal) }, deep:true } },可以看到打印出：
使用save()方法：
watch:{ items:{ handler:function(items){ Store.save(items) }, deep:true } },
一有變化就會(huì)觸發(fā)。
將fetch()方法也加進(jìn)去：
<script>import Store from './store'export default { data:function(){ return { title:"<span>?</span>this is a todolist", items:Store.fetch(), newItem:"" } }, watch:{ items:{ handler:function(items){ Store.save(items) }, deep:true } }, methods:{ toggleFinish:function(item){ item.isFinished = !item.isFinished }, addNew:function(){ this.items.push({ label:this.newItem, "isFinished":false }) this.newItem="" } }}</script>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
