Vue全家桶--06 ToDoMVC
Vue全家桶--06 ToDoMVC
6.1 项目介绍与演示
6.2 需求说明
6.3 下载与导入模板
6.4 初始化项目
6.5 数据列表渲染
6.5.1 功能分析
6.5.2 有数据列表功能实现
app.js声明一个存储任务数据的数组items，并初始化一些数据，注意ES6的写法
(function (Vue) {//表示依赖了全局的 Vue, 其实不加也可以，只是更加明确点 //const 表示申明的变量是不可变得，ES6
const items=[
{
id:1,
content:'Vue/js',
completed:false
},
{
id:2,
content:'java',
completed:false
},
{
id:3,
content:'C#',
completed:true
}
]
new Vue({
el:'#todoapp',
data:{
title:'Hello,todos',
items // 对象属性简写，等价于items: items
}
});
})(Vue);
修改html页面
<ul class="todo-list"><!--
三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
-->
<!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
<li v-for='(item,index) in items' :class="{completed:item.completed}">
<div class="view">
<!-- 修改：1.v-model绑定状态值是否选中 -->
<input class="toggle" type="checkbox" v-model="item.completed">
<!-- 修改：1.{{content}}显示内容 -->
<label>{{item.content}}</label>
<!-- 修改：1. :value 绑定id删除 -->
<button class="destroy" :value="item.id"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
6.5.3 无数据列表功能实现
**原标签直接添加 v-show 方式
<!-- item.length 当值为0时，表示false,则不显示 --><section class="main" v-show="items.length">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!--
三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
-->
<!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
<li v-for='(item,index) in items' :class="{completed:item.completed}">
<div class="view">
<!-- 修改：1.v-model绑定状态值是否选中 -->
<input class="toggle" type="checkbox" v-model="item.completed">
<!-- 修改：1.{{content}}显示内容 -->
<label>{{item.content}}</label>
<!-- 修改：1. :value 绑定id删除 -->
<button class="destroy" :value="item.id"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<!-- item.length 当值为0时，表示false,则不显示 -->
<footer class="footer" v-show="items.length">
**添加一个div标签 再加上v-show 方式
<!-- item.length 当值为0时，表示false,则不显示 --><div v-show="items.length">
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!--
三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
-->
<!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
<li v-for='(item,index) in items' :class="{completed:item.completed}">
<div class="view">
<!-- 修改：1.v-model绑定状态值是否选中 -->
<input class="toggle" type="checkbox" v-model="item.completed">
<!-- 修改：1.{{content}}显示内容 -->
<label>{{item.content}}</label>
<!-- 修改：1. :value 绑定id删除 -->
<button class="destroy" :value="item.id"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><span>0</span> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</div>
**template 与 v-if 结合使用的方式
<!-- template元素，页面渲染之后这个template元素就不会有，需要使用 v-if 与 template搭配，如果使用 v-show 是不行的 -->
<template v-if="items.length">
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
<!--
三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
-->
<!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
<li v-for='(item,index) in items' :class="{completed:item.completed}">
<div class="view">
<!-- 修改：1.v-model绑定状态值是否选中 -->
<input class="toggle" type="checkbox" v-model="item.completed">
<!-- 修改：1.{{content}}显示内容 -->
<label>{{item.content}}</label>
<!-- 修改：1. :value 绑定id删除 -->
<button class="destroy" :value="item.id"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><span>0</span> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</template>
6.6 添加任务
文本框中可添加新的任务；内容不能为空；enter添加，添加完清空文本框
<!-- 添加任务，keyup.enter 回车键监听 --><input class="new-todo" @keyup.enter="addItem" placeholder="What needs to be done?" autofocus>
new Vue({ el: '#todoapp',
data: {
title: 'Hello,todos',
items // 对象属性简写，等价于items: items
},
methods: {
addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
const content = event.target.value.trim();//获取文本框输入的数据,去除空格
const id = this.items.length;//生成id
if (content.length > 0) {//输入框不为空添加到数组中
this.items.push({
id,//ES6 等价于id:id
content,
completed: false
});
} else { return; }
event.target.value='';//清空文本
}
}
});
6.7 显示所有未完成任务数
计算属性来完成
<span class="todo-count"><span>{{remaining}}</span> item{{remaining === 1?'':'s'}} left</span>new Vue({ el: '#todoapp',
data: {
title: 'Hello,todos',
items // 对象属性简写，等价于items: items
},
computed: {
remaining() {
const unItems =
this.items.filter(item => {
return !item.completed;
});
//console.log(unItems);
return unItems.length;
}
},
methods: {
addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
const content = event.target.value.trim();//获取文本框输入的数据,去除空格
const id = this.items.length;//生成id
if (content.length > 0) {//输入框不为空添加到数组中
this.items.push({
id,//ES6 等价于id:id
content,
completed: false
});
} else { return; }
event.target.value = '';//清空文本
}
}
});
6.8 切换所有任务状态
计算属性--toggleAll
双向绑定计算属性
<input id="toggle-all" v-model="toggleAll" class="toggle-all" type="checkbox">
toggleAll: { //当任务列表 中的状态发生变化之后，则更新复选框的状态
get() {
return this.remaining === 0;
},
//当复选框的状态更新之后，则将任务列表中的状态更新
set(newValue) { //newValue 当计算属性toggleAll改变时，newValue获取改变后的值
//当点击复选框之后，复选框的值会发生改变，就会触发set方法调用
//将迭代出数组中的所有任务项，然后将当前复选框的状态值赋值给每一个任务的状态值
this.items.forEach(item => {
item.completed = newValue;
});
}
}
6.9 移除任务项
removeItem函数
<button class="destroy" :value="item.id" @click="removeItem(index)"></button>
//移除任务项removeItem(index) {
console.log(index);
this.items.splice(index, 1);
}
6.10 清楚所有已完成的任务
添加一个 removecompleted 函数绑定到 清楚已完成任务按钮上，并且添加v-show标签
<button v-show="items.length > remaining" @click="removecompleted" class="clear-completed">Clear completed</button>
removecompleted(){ this.items = this.items.filter( item => !item.completed);
}
6.11 编辑任务项
6.12 路由状态切换(过滤不同状态数据)
6.13 数据持久化
以上是 Vue全家桶--06 ToDoMVC 的全部内容， 来源链接： utcz.com/z/380918.html
