本篇内容主要讲解“怎么使用Vue制作Todo List网页”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Vue制作Todo List网页”吧!
以下是HTML部分
计算
安全
数据库
网络和加速
企业服务
<div class="main">
<h4 class="big-title">添加任务：</h4>
<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是代理数据，在DOM的内容中如果要用到代理数据就用{{xxx}}表示，比如{{list}}，{{visibility}}，而当data中的代理数据出现在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中要绑定这些数据，Vue也提供了一套指令：
v-bind绑定一个或多个特性，一般用于绑定class和style， v-on 绑定事件， v-show，v-if都是根据条件渲染元素，v-for是渲染列表…等等。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
到此，相信大家对“怎么使用Vue制作Todo List网页”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
