Vue制作Todo List網頁
更新時間：2017年04月26日 09:06:38 作者：sansis_wang
這篇文章主要為大家詳細介紹了Vue制作Todo List網頁的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Vue學習完成Todo List網頁，供大家參考，具體內容如下
跟著老師學習Vue，我喜歡清爽的界面，就自己改了樣式，看起來還不錯，以后就用來記錄要做的事情，實用性還蠻強。
Vue非常容易上手，運用到了雙向綁定機制，即HTML里的DOM元素與JS里的Vue實例進行雙向綁定，只要Vue實例中的代理數(shù)據(jù)改變，HTML中的實際數(shù)據(jù)就會跟著變，這和原生的Js的命令驅動模式不同，它是數(shù)據(jù)驅動模式，通過數(shù)據(jù)的改變來控制DOM的變化。什么意思呢？我們會在接下去的學習中慢慢實踐。
Todo List這個網頁用到了很多Vue的指令，在這里我貼出一部分代碼，全部代碼請戳我的Github
以下是HTML部分
<div class="main">
<h3 class="big-title">添加任務：</h3>
<input
placeholder="在此添加任務"
class="task-input"
type="text"
v-model="things"
@keyup.enter="addTodo"
/>
<ul class="task-count" v-show="list.length">
<li>
{{unCheckedLength}}個任務未完成</li>
<li class="action">
<a :class="{active: visibility == 'all'}" href="#all" rel="external nofollow" >所有任務</a>
<a :class="{active: visibility == 'unfinished'}"href="#unfinished" rel="external nofollow" >未完成任務</a>
<a :class="{active: visibility == 'finished'}"href="#finished" rel="external nofollow" >完成任務</a>
</li>
</ul>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">還沒有添加任何任務</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實例部分
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()
}
}
}
}
});
這是一個基本的Vue實例，el是和DOM元素連接的掛載點，data是代理數(shù)據(jù)，在DOM的內容中如果要用到代理數(shù)據(jù)就用{{xxx}}表示，比如{{list}}，{{visibility}}，而當data中的代理數(shù)據(jù)出現(xiàn)在DOM標簽里的時候就不需要用花括號。
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 = ""
}
}
還有計算屬性
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綁定一個或多個特性，一般用于綁定class和style， v-on 綁定事件， v-show，v-if都是根據(jù)條件渲染元素，v-for是渲染列表…等等，我就不一一贅述了?？梢匀?a rel="nofollow" target="_blank" >Vue中文官網看，講的很詳細。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了vue3清空reactive的四種方式,包含使用?Object.assign,使用?Object.keys?和?for...in?循環(huán),使用?delete?操作符和重新賦值4種,感興趣的可以了解一下2024-03-03
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點播播放器,?使用簡單,?功能強大，下面大家就跟隨小編一起學習一下它的具體使用吧2023-08-08
vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內部命令),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Iview Table組件中各種組件擴展的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
vue實現(xiàn)element表格里表頭信息提示功能(推薦)
小編最近接了這樣一個需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)砹嘶趘ue實現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧2019-11-11
vue3編譯報錯ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報錯ESLint:defineProps is not defined no-undef的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue高性能列表GridList組件及實現(xiàn)思路詳解
這篇文章主要為大家介紹了Vue高性能列表GridList組件及實現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了vue中數(shù)據(jù)請求axios的封裝和使用，Axios?是一個基于?promise?的?HTTP?庫，下面文章圍繞主題的相關資料展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
封裝組件相信對大家來說都不陌生了,下面這篇文章主要給大家介紹了關于用VUE封裝一個文本滾動組件的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
ant design vue 清空upload組件圖片緩存的問題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10