Vue學(xué)習(xí)完成Todo List網(wǎng)頁，供大家參考，具體內(nèi)容如下
跟著老師學(xué)習(xí)Vue，我喜歡清爽的界面，就自己改了樣式，看起來還不錯(cuò)，以后就用來記錄要做的事情，實(shí)用性還蠻強(qiáng)。
Vue非常容易上手，運(yùn)用到了雙向綁定機(jī)制，即HTML里的DOM元素與JS里的Vue實(shí)例進(jìn)行雙向綁定，只要Vue實(shí)例中的代理數(shù)據(jù)改變，HTML中的實(shí)際數(shù)據(jù)就會(huì)跟著變，這和原生的Js的命令驅(qū)動(dòng)模式不同，它是數(shù)據(jù)驅(qū)動(dòng)模式，通過數(shù)據(jù)的改變來控制DOM的變化。什么意思呢？我們會(huì)在接下去的學(xué)習(xí)中慢慢實(shí)踐。
Todo List這個(gè)網(wǎng)頁用到了很多Vue的指令，在這里我貼出一部分代碼，全部代碼請戳我的Github
以下是HTML部分
<div class="main"> <h3 class="big-title">添加任務(wù)：</h3> <input placeholder="在此添加任務(wù)" class="task-input" type="text" v-model="things" @keyup.enter="addTodo" /> <ul class="task-count" v-show="list.length"> <li> {{unCheckedLength}}個(gè)任務(wù)未完成</li> <li class="action"> <a :class="{active: visibility == 'all'}" href="#all" rel="external nofollow" >所有任務(wù)</a> <a :class="{active: visibility == 'unfinished'}"href="#unfinished" rel="external nofollow" >未完成任務(wù)</a> <a :class="{active: visibility == 'finished'}"href="#finished" rel="external nofollow" >完成任務(wù)</a> </li> </ul> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">還沒有添加任何任務(wù)</span> <ul class="todo-list"> <li class="todo" v-for="item in filteredList" :class="{completed: item.isChecked,editing:item === editItem}" > <div class="view"> <div class="word"> <input class="toggle" type="checkbox" v-model="item.isChecked" > <label @dblclick="editTodo(item)">{{item.title}}</label> </div> <button class="destroy" type="text" @click="deleteTodo(item)">×</button> </div> <input v-focus="editItem === item" class="edit" type="text" v-model="item.title" @blur="edited" @keyup.enter="edited" @keyup.esc="cancel(item)" /> </li> </ul> </div></div>Vue實(shí)例部分
var vm = new Vue({ el: ".main", data: { list:list, things:"", editItem:"", beforeTitle:"", visibility:"all", inputId:"", }, watch:{ list:{ handler:function(){ store.save("todolist",this.list) }, deep:true } }, computed:{ unCheckedLength(){ return this.list.filter(function(item){ return item.isChecked == false }).length }, filteredList(){ return filter[this.visibility] ? filter[this.visibility](this.list) : list } }, methods: { addTodo(ev){ if(this.things !== ""){ var item = { title:this.things, isChecked:false, } this.list.push(item) } this.things = ""; }, deleteTodo(item){ var index = this.list.indexOf(item); this.list.splice(index,1); }, editTodo(item){ this.beforeTitle = item.title; this.editItem = item }, edited(item){ this.editItem = "" }, cancel(item){ item.title = this.beforeTitle; this.editItem = ""; this.beforeTitle = "" } }, directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus() } } } }});這是一個(gè)基本的Vue實(shí)例，el是和DOM元素連接的掛載點(diǎn)，data是代理數(shù)據(jù)，在DOM的內(nèi)容中如果要用到代理數(shù)據(jù)就用{{xxx}}表示，比如{{list}}，{{visibility}}，而當(dāng)data中的代理數(shù)據(jù)出現(xiàn)在DOM標(biāo)簽里的時(shí)候就不需要用花括號。
new Vue({ el: ".main", data: { list:list, things:"", editItem:"", beforeTitle:"", visibility:"all", inputId:"", }}）Vue要用大的方法都放在methods部分
methods: { addTodo(ev){ if(this.things !== ""){ var item = { title:this.things, isChecked:false, } this.list.push(item) } this.things = ""; }, deleteTodo(item){ var index = this.list.indexOf(item); this.list.splice(index,1); }, editTodo(item){ this.beforeTitle = item.title; this.editItem = item }, edited(item){ this.editItem = "" }, cancel(item){ item.title = this.beforeTitle; this.editItem = ""; this.beforeTitle = "" } }還有計(jì)算屬性
computed:{ unCheckedLength(){ return this.list.filter(function(item){ return item.isChecked == false }).length }, filteredList(){ return filter[this.visibility] ? filter[this.visibility](this.list) : list }}觀察屬性
watch:{ list:{ handler:function(){ store.save("todolist",this.list) }, deep:true }}自定義屬性
directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus() } } }}在HTML中要綁定這些數(shù)據(jù)，Vue也提供了一套指令：
v-bind綁定一個(gè)或多個(gè)特性，一般用于綁定class和style， v-on 綁定事件， v-show，v-if都是根據(jù)條件渲染元素，v-for是渲染列表…等等，我就不一一贅述了。可以去Vue中文官網(wǎng)看，講的很詳細(xì)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
