Vue制作Todo List網(wǎng)頁(yè)
更新時(shí)間：2017年04月26日 09:06:38 作者：sansis_wang
這篇文章主要為大家詳細(xì)介紹了Vue制作Todo List網(wǎng)頁(yè)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Vue學(xué)習(xí)完成Todo List網(wǎng)頁(yè)，供大家參考，具體內(nèi)容如下
跟著老師學(xué)習(xí)Vue，我喜歡清爽的界面，就自己改了樣式，看起來(lái)還不錯(cuò)，以后就用來(lái)記錄要做的事情，實(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)模式，通過(guò)數(shù)據(jù)的改變來(lái)控制DOM的變化。什么意思呢？我們會(huì)在接下去的學(xué)習(xí)中慢慢實(shí)踐。
Todo List這個(gè)網(wǎng)頁(yè)用到了很多Vue的指令，在這里我貼出一部分代碼，全部代碼請(qǐng)戳我的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">還沒(méi)有添加任何任務(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í)候就不需要用花括號(hào)。
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ì)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js實(shí)例todoList項(xiàng)目
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- vue2的todolist入門(mén)小項(xiàng)目的詳細(xì)解析
- 基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
- vue實(shí)現(xiàn)todolist單頁(yè)面應(yīng)用
- vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
- 利用vue寫(xiě)todolist單頁(yè)應(yīng)用
- Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList 前期準(zhǔn)備（一）
- 用vue的雙向綁定簡(jiǎn)單實(shí)現(xiàn)一個(gè)todo-list的示例代碼
相關(guān)文章
vue使用Office?Web實(shí)現(xiàn)線上文件預(yù)覽
這篇文章主要為大家介紹了vue使用微軟的開(kāi)發(fā)接口Office?Web,實(shí)現(xiàn)線上文件預(yù)覽,預(yù)覽word，excel，pptx，pdf文件,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章給大家講述了vue中關(guān)閉eslint的方法內(nèi)容，有需要的讀者們可以參考學(xué)習(xí)下。2018-08-08
淺談VueUse中useAsyncState的實(shí)現(xiàn)原理
useAsyncState?是 VueUse 庫(kù)中提供的一個(gè)實(shí)用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實(shí)現(xiàn)及其原理,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
我們現(xiàn)在可以了解一下vue的過(guò)渡，vue在插入、更新以及移除DOM元素的時(shí)候，提供了很多不同方式過(guò)渡的效果，如果在css過(guò)渡自動(dòng)應(yīng)用class，在過(guò)渡鉤子函數(shù)中使用JavaScript直接操作DOM就可以了2022-08-08
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁(yè)面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
Vue+SSM實(shí)現(xiàn)圖片上傳預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了Vue+SSM實(shí)現(xiàn)圖片上傳預(yù)覽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié)
這篇文章主要介紹了Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié),在這篇文章中,我會(huì)帶你了解命令式組件的基本概念,并通過(guò)一些簡(jiǎn)單的示例來(lái)展示它們是如何工作的,需要的朋友可以參考下2024-03-03
Vue組件之極簡(jiǎn)的地址選擇器的實(shí)現(xiàn)
這篇文章主要介紹了Vue組件之極簡(jiǎn)的地址選擇器的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05