Vue官網todoMVC示例
這個示例是模仿官網示例樣式和功能用我本身的方式寫的，基本上沒有看官網的源碼，只參考自定義指令。讓咱們一步步來探討一下。官網demojavascript
要實現的功能
- 單條添加todo
- 單條刪除todo
- 雙擊編輯todo
- 單條todo已完成相應樣式狀態改變
- 所有todo是已完成相應樣式狀態改變
- 清除所有已完成todos
- 待辦todos數量顯示
- 全部todos，已完成todos，未完成todos篩選
單條添加todo
<input type="text" class="todos_add" placeholder="What needs to be done?" @keyup.enter="addTodo($event.target)" //綁定enter事件 ref="currentInput">//操做input元素使enter一下以後清空輸入框內容
複製代碼
data() {//一些初始化數據
return {
todolists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
複製代碼
addTodo(e) { //添加todo
var val = e.value
if (val === "") {return} //若是輸入內容爲空則當即返回
this.todoLists = this.todoLists.concat({//使用concat這個api添加todo
value: val, //輸入內容
isEditing: false, //是否在編輯狀態
isActive: false, //刪除X圖標是否激活
isChecked: false //是否已完成
})
this.$refs.currentInput.value = "" //按下enter添加todo以後把輸入框value清零
window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲數據
},
複製代碼
把每條todo的對應狀態都存在同一個對象當中，在操做改變todo狀態的時候不會被統一處理，使得每條todo都有單獨的狀態。css
單條刪除todo
<li class="content_todoList"
v-for="(list,index) in todoLists"
@mouseover="list.isActive = true" //鼠標移入todo改變對應todo的isActive狀態
@mouseleave="list.isActive=false" //鼠標移出todo改變對應todo的isActive狀態
<span class="el-icon-close content_todoList_delete"
:class="{show: list.isActive}" //動態綁定class使鼠標移動到某一todo顯示X圖標
@click="deleteTodo(index)"> //綁定刪除單條todo事件
</span>
</li>
複製代碼
deleteTodo(index) { //刪除單條todo
this.todoLists.splice(index, 1)//使用splice的api
window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲數據//localStorage存儲數據
},
複製代碼
在每一個li元素上綁定了鼠標移入和移除的事件來動態的改變每一個todo的isActive，而後再使用isActive動態顯示class。html
雙擊編輯todo&&單條todo已完成
<input type="checkbox" class="checkBox" v-model="list.isChecked">//雙向綁定isChecked
<div class="content_todoList_main" @dblclick="toEdit(list)" //雙擊事件 v-show="!list.isEditing" //切換元素 :class="{deleted:list.isChecked}"> //動態綁定class該表已完成todo樣式
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input" v-model="list.value" //雙向綁定可輸入value v-show="list.isEditing" //切換元素 v-todo-focus="list.value" //自定義指令，雙擊以後自動focus對焦 @blur="unEdit(list)"> //綁定blur失去焦點事件
複製代碼
methods: {
toEdit(obj) { //使添加的todothing可編輯
obj.isEditing = true
},
unEdit(obj) { //使添加的todothing不可編輯
obj.isEditing = false
},
}
directives: { //自定義focus指令,須要一個binding參數作判斷
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
}
複製代碼
經過每一個todo裏的isEditing屬性控制show和是否可編輯兩個狀態，雙擊div以後改變當前todo的isEditing爲true，從而顯示爲input，input失去焦點以後再經過blur事件改成false。 經過todo的idChecked來控制是否已完成，從而動態改變樣式。vue
所有todos已完成
<span class="icon-down el-icon-arrow-down" //使用element庫作向下箭頭icon v-show="todoLists.length>0" //經過todoLists控制是否顯示向下箭頭icon @click="selectAllTodos"></span> //所有已完成事件
複製代碼
selectAllTodos() { //設置全部todo爲已完成,使用map的api經過todo的isChecked屬性操做
this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}
複製代碼
待辦todos數量顯示
<div class="data_times" v-show="times === 0"> //times爲0顯示item，大於0顯示items，細節註定成敗
<span>{{times}}</span>  item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>  items left</div>
複製代碼
computed: {
times() { //使用計算屬性計算待辦todos的次數
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {
if (todoArr[i].isChecked === false) {
times++
}
}
return times
}
},
複製代碼
使用了計算屬性對todoLists計算，用for循環刷選出idChecked爲true的累加，最後返回times。java
清除所有已完成todos
<div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length"> //若是待辦事件次數小於總todoLists長度就顯示「clear completed」
<a href="#">clear completed</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length"> //若是待辦事件次數等於總todoLists長度就顯示「clear completed」
<a href="#"></a>
</div>
複製代碼
clearTodos() { //清空已完成的todoLists，使用filter的api進行篩選
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲數據
},
複製代碼
若是待辦todos的times小於todoLists長度，就證實有已完成的todo，就能夠顯示「clear completed」，若是相等就說明沒有已完成的todo。web
三種狀態篩選
全部todos，已完成todos，未完成todos篩選json
<li class="content_todoList" v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<div class="data_status">
<a href="#" :class="{active: index === dataStatusIndex}" //動態class實現tab切換 v-for="(item ,index) in dataStatus" v-for循環 @click="switchStatus(index)" //切換不一樣tab顯示內容 :key="index">
{{item}}
</a>
</div>
複製代碼
switchStatus(index) { //經過if條件判斷操做
this.dataStatusIndex = index
if (this.dataStatus[index] === "Active") {
this.defaultShow = false
this.whichShow = false
} else if (this.dataStatus[index] === "Completed") {
this.defaultShow = false
this.whichShow = true
} else if (this.dataStatus[index] === "All") {
this.defaultShow = true
}
},
複製代碼
我這裏是同時if條件句判斷操做，有點麻煩，目前尚未想出來其餘方案。在li元素使用三元運算符和或運算符進行操做顯示不一樣狀態的todos。api
完整代碼
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
input {
outline: none;
}
ul,
li,
ol {
list-style: none;
}
#app {
width: 800px;
height: 900px;
margin: 0 auto;
text-align: center;
background-color: rgb(245, 245, 245);
padding: 24px 0;
}
#app .header {
font-size: 48px;
}
.content {
width: 72%;
margin: 0 auto;
box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);
position: relative;
}
.icon-down {
position: absolute;
font-size: 24px;
top: 16px;
left: 16px;
cursor: pointer;
}
#app .content .todos_add {
width: 100%;
height: 56px;
padding: 16px 56px;
font-size: 24px;
border: 1px solid transparent;
}
.content_todoLists {
position: relative;
z-index: 3;
}
.content_todoList {
display: flex;
flex-direction: row;
border-top: 1px solid #ccc;
font-size: 24px;
padding: 8px;
background-color: white;
align-items: center;
}
.checkBox {
width: 20px;
height: 20px;
margin-left: 10px;
}
.content_todoList_main {
flex: 1;
text-align: left;
margin-left: 16px;
font-size: 20px;
padding: 6px 0;
}
.main_input {
position: relative;
z-index: 1;
}
.content_todoList_delete {
position: absolute;
right: 16px;
color: rgb(252, 55, 55);
font-weight: 500;
display: none;
cursor: pointer;
}
.show {
display: block;
}
.deleted {
text-decoration-line: line-through;
color: #bbb;
}
.show:hover {
color: rgb(255, 0, 0);
font-weight: 700;
}
::-moz-placeholder {
color: rgb(221, 218, 218);
}
::-webkit-input-placeholder {
color: rgb(221, 218, 218);
}
:-ms-input-placeholder {
color: rgb(221, 218, 218);
}
.data {
display: flex;
justify-content: space-between;
padding: 8px;
font-size: 14px;
font-weight: 300;
color: rgb(145, 145, 145);
}
a {
text-decoration: none;
color: rgb(145, 145, 145);
}
.data_times {
width: 73px;
}
.data_clearTodos {
width: 142px;
}
.data_status a {
display: inline-block;
border: 1px solid transparent;
border-radius: 2px;
padding: 1px 4px;
margin: 0 2px;
}
.data_status a:hover {
border-color: #bbb;
}
.data_clearTodos a:hover {
text-decoration-line: underline;
}
.active {
box-shadow: 0 0 1px black;
}
</style>
複製代碼
<body>
<div id="app">
<header class="header">todos</header>
<div class="content">
<span class="icon-down el-icon-arrow-down" v-show="todoLists.length>0" @click="selectAllTodos">
</span>
<input type="text" class="todos_add" placeholder="What needs to be done?" @keyup.enter="addTodo($event.target)" ref="currentInput">
<ul class="content_todoLists">
<li v-for="(list,index) in todoLists" class="content_todoList" @mouseover="list.isActive = true" @mouseleave="list.isActive=false" v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
<input type="checkbox" class="checkBox" v-model="list.isChecked">
<div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">
{{list.value}}
</div>
<input type="text" class="content_todoList_main main_input" v-model="list.value" v-show="list.isEditing" v-todo-focus="list.value" @blur="unEdit(list)">
<span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>
</li>
</ul>
<div class="data" v-show="todoLists.length>0">
<div class="data_times" v-show="times === 0">
<span>{{times}}</span> item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span> items left
</div>
<div class="data_status">
<a href="#" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">
{{item}}
</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">
<a href="#">clear completed</a>
</div>
<div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">
<a href="#"></a>
</div>
</div>
</div>
</div>
</body>
複製代碼
<script>
let vm = new Vue({
el: "#app",
data() {
return {
todoLists: [],
dataStatus: ["All", "Active", "Completed"],
dataStatusIndex: 0,
whichShow: true,
defaultShow: true
}
},
computed: {
times() { //使用計算屬性計算待辦todos的次數
let todoArr = this.todoLists
let times = 0
for (let i = 0; i < todoArr.length; i++) {
if (todoArr[i].isChecked === false) {
times++
}
}
return times
}
},
methods: {
toEdit(obj) { //使添加的todo可編輯
obj.isEditing = true
},
unEdit(obj) { //使添加的todo不可編輯
obj.isEditing = false
},
addTodo(e) { //添加todo
var val = e.value
if (val === "") {
return
} //若是輸入內容爲空則當即返回
this.todoLists = this.todoLists.concat({ //使用concat這個api添加todo
value: val, //輸入內容
isEditing: false, //是否在編輯狀態
isActive: false, //刪除X圖標是否激活
isChecked: false //是否已完成
})
this.$refs.currentInput.value = "" //按下enter添加todo以後把輸入框value清零
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //使用localStorage以JSON格式存儲數據
},
deleteTodo(index) { //刪除todo
this.todoLists.splice(index, 1)
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
},
switchStatus(index) { //試下下方三個狀態切換，略麻煩
this.dataStatusIndex = index
if (this.dataStatus[index] === "Active") {
this.defaultShow = false
this.whichShow = false
} else if (this.dataStatus[index] === "Completed") {
this.defaultShow = false
this.whichShow = true
} else if (this.dataStatus[index] === "All") {
this.defaultShow = true
}
},
clearTodos() { //清空已完成的todoLists
this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
},
selectAllTodos() { //設置全部todo爲已完成
this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}
},
directives: { //自定義focus指令
"todo-focus": function (el, binding) {
if (binding.value) {
el.focus()
}
}
},
created() {
let myStorage = window.localStorage.getItem('content')
this.todoLists = JSON.parse(myStorage) || [] //由於todoLists初始值是null,使用或運算符，若是爲null設爲空數組
}
})
</script>
複製代碼
相關文章
- 1. Vue官網todoMVC示例
- 2. redux 官方示例 todomvc 中的 todoList 過濾事件解析
- 3. redux 官方示例 todomvc 兩個警告修復
- 4. mongodb 官網示例
- 5. NGUI官網示例--講解
- 6. spark sql 官網示例
- 7. vue-router-官網
- 8. Behavior Designer官網示例設計圖
- 9. Kibana 官方示例
- 10. [ActionScript 3.0] AS3 ServerSocket示例（官方示例）
- 更多相關文章...
- • Thymeleaf+SpringMVC5示例 - Thymeleaf 教程
- • Thymeleaf Servlet Hellow World示例 - Thymeleaf 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
