生活随笔
收集整理的这篇文章主要介绍了
基于Vue的记事本todos效果展示及源码分享
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
前些天做了个使用vuex制作的记事本todos，这次使用vue做一个todos记事本
show code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="./todos.css">
</head><body><div id="app"><section><header class="header"><h1>记事本
</h1><input v-model="inputValue" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" @keyup.enter="add"></header><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list" :key="item.index"><div class="view"><span class="index">{{ index+1 }}.
</span><label>{{ item }}
</label><button class="destroy" @click="remove(index)"></button></div></li></ul></section><footer class="footer"><span class="todo-count" v-show="list.length!=0"><strong>{{ list.length }}
</strong> items left
</span><button v-show="list.length!=0" class="clear-completed" @click="clear">Clear
</button></footer></section><footer class="info"></footer></div><script>var app = new Vue({el: '#app',data: {list: ["写代码", "吃饭", "睡觉"],inputValue: '好好学习'},methods: {add() {this.list.push(this.inputValue)},remove(index) {this.list.splice(index, 1)},clear() {this.list = []}}})</script>
</body></html>
js代码相较于vuex自然少了点简洁一些，当然vuex体现的是数据管理功能
余下的是css样式
html,
body {margin: 0
;padding: 0
;
}body {background: #fff
;
}button {margin: 0
;padding: 0
;border: 0
;background: none
;font-size: 100%
;vertical-align: baseline
;font-family: inherit
;font-weight: inherit
;color: inherit
;-webkit-appearance: none
;appearance: none
;-webkit-font-smoothing: antialiased
;-moz-osx-font-smoothing: grayscale
;
}body {font: 14px
"Helvetica Neue", Helvetica, Arial, sans-serif
;line-height: 1.4em
;background: #f5f5f5
;color: #4d4d4d
;min-width: 230px
;max-width: 550px
;margin: 0 auto
;-webkit-font-smoothing: antialiased
;-moz-osx-font-smoothing: grayscale
;font-weight: 300
;
}:focus {outline: 0
;
}.hidden {display: none
;
}#todoapp {background: #fff
;margin: 180px 0 40px 0
;position: relative
;box-shadow: 0 2px 4px 0
rgba(0, 0, 0, 0.2
), 0 25px 50px 0
rgba(0, 0, 0, 0.1
);
}#todoapp input::-webkit-input-placeholder {font-style: italic
;font-weight: 300
;color: #e6e6e6
;
}#todoapp input::-moz-placeholder {font-style: italic
;font-weight: 300
;color: #e6e6e6
;
}#todoapp input::input-placeholder {font-style: italic
;font-weight: 300
;color: gray
;
}#todoapp h1 {position: absolute
;top: -160px
;width: 100%
;font-size: 60px
;font-weight: 100
;text-align: center
;color: rgba(175, 47, 47, .8
);-webkit-text-rendering: optimizeLegibility
;-moz-text-rendering: optimizeLegibility
;text-rendering: optimizeLegibility
;
}.new-todo,
.edit {position: relative
;margin: 0
;width: 100%
;font-size: 24px
;font-family: inherit
;font-weight: inherit
;line-height: 1.4em
;border: 0
;color: inherit
;padding: 6px
;border: 1px solid #999
;box-shadow: inset 0 -1px 5px 0
rgba(0, 0, 0, 0.2
);box-sizing: border-box
;-webkit-font-smoothing: antialiased
;-moz-osx-font-smoothing: grayscale
;
}.new-todo {padding: 16px
;border: none
;background: rgba(0, 0, 0, 0.003
);box-shadow: inset 0 -2px 1px
rgba(0, 0, 0, 0.03
);
}.main {position: relative
;z-index: 2
;border-top: 1px solid #e6e6e6
;
}.toggle-all {width: 1px
;height: 1px
;border: none
;opacity: 0
;position: absolute
;right: 100%
;bottom: 100%
;
}.toggle-all+label {width: 60px
;height: 34px
;font-size: 0
;position: absolute
;top: -52px
;left: -13px
;-webkit-transform: rotate(90deg
);transform: rotate(90deg
);
}.toggle-all+label:before {content: "❯";font-size: 22px
;color: #e6e6e6
;padding: 10px 27px 10px 27px
;
}.toggle-all:checked+label:before {color: #737373
;
}.todo-list {margin: 0
;padding: 0
;list-style: none
;max-height: 420px
;overflow: auto
;
}.todo-list li {position: relative
;font-size: 24px
;border-bottom: 1px solid #ededed
;height: 60px
;box-sizing: border-box
;
}.todo-list li:last-child {border-bottom: none
;
}.todo-list .view .index {position: absolute
;color: gray
;left: 10px
;top: 20px
;font-size: 16px
;
}.todo-list li .toggle {text-align: center
;width: 40px
;height: auto
;position: absolute
;top: 0
;bottom: 0
;margin: auto 0
;border: none
;-webkit-appearance: none
;appearance: none
;
}.todo-list li .toggle {opacity: 0
;
}.todo-list li .toggle+label {background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat: no-repeat
;background-position: center left
;
}.todo-list li .toggle:checked+label {background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}.todo-list li label {word-break: break-all
;padding: 15px 15px 15px 60px
;display: block
;line-height: 1.2
;transition: color 0.4s
;
}.todo-list li.completed label {color: #d9d9d9
;text-decoration: line-through
;
}.todo-list li .destroy {display: none
;position: absolute
;top: 0
;right: 10px
;bottom: 0
;width: 40px
;height: 40px
;margin: auto 0
;font-size: 30px
;color: #cc9a9a
;margin-bottom: 11px
;transition: color 0.2s ease-out
;
}.todo-list li .destroy:hover {color: #af5b5e
;
}.todo-list li .destroy:after {content: "×";
}.todo-list li:hover .destroy {display: block
;
}.todo-list li .edit {display: none
;
}.todo-list li.editing:last-child {margin-bottom: -1px
;
}.footer {color: #777
;padding: 10px 15px
;height: 20px
;text-align: center
;border-top: 1px solid #e6e6e6
;
}.footer:before {content: "";position: absolute
;right: 0
;bottom: 0
;left: 0
;height: 50px
;overflow: hidden
;box-shadow: 0 1px 1px
rgba(0, 0, 0, 0.2
), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px
rgba(0, 0, 0, 0.2
), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px
rgba(0, 0, 0, 0.2
);
}.todo-count {float: left
;text-align: left
;
}.todo-count strong {font-weight: 300
;
}.filters {margin: 0
;padding: 0
;list-style: none
;position: absolute
;right: 0
;left: 0
;
}.filters li {display: inline
;
}.filters li a {color: inherit
;margin: 3px
;padding: 3px 7px
;text-decoration: none
;border: 1px solid transparent
;border-radius: 3px
;
}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1
);
}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2
);
}.clear-completed,
html .clear-completed:active {float: right
;position: relative
;line-height: 20px
;text-decoration: none
;cursor: pointer
;
}.clear-completed:hover {text-decoration: underline
;
}.info {margin: 50px auto 0
;color: #bfbfbf
;font-size: 15px
;text-shadow: 0 1px 0
rgba(255, 255, 255, 0.5
);text-align: center
;
}.info p {line-height: 1
;
}.info a {color: inherit
;text-decoration: none
;font-weight: 400
;
}.info a:hover {text-decoration: underline
;
}@media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none
;}.todo-list li .toggle {height: 40px
;}
}@media (max-width: 430px) {.footer {height: 50px
;}.filters {bottom: 10px
;}
}
Done
总结
以上是生活随笔为你收集整理的基于Vue的记事本todos效果展示及源码分享的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
