版本01(初始)
<template>
<!-- vue 的模板里面,所有的内容要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo"/> <!-- 双向绑定了 'todo'-->
<button @click="doAdd()">+ 增加</button>
<br>
<hr>
<br>
<ul>
<li v-for="(item,key) in list">
{{item}} ------- <button @click="deleteDate(key)">- 删除</button><!--通过取得索引值来完成此功能。此key为实参,数组下标-->
</li>
</ul>
</div>
</template>
<script>
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字,可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
this.list.push(this.todo); //将todo push到list中
this.todo=''; // 再将它为空
},
deleteDate(key){ //此key为形参
// alert(key)
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
}
}
}
</script>
<style>
</style>
01版本的代码中有双向绑定数据,定义/执行方法以及循环渲染数据等相关操作,部分地方也都做好了注释。但目前的页面样式较为简陋:
版本02(基本功能)
<template>
<!-- vue 的模板里面,所有的内容要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo" /> <!-- 双向绑定了 'todo'-->
<button @click="doAdd()">+ 增加</button>
<br>
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.check">
<input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!-- 加一个 v-if语句,item.check=false false去反为true将在“进行中”里 ,再将item-check作为一个model放入input中 -->
</li>
</ul>
<!-- 添加了一个双向绑定,同时也实现了:在勾选checkbox时,会自动进入所对应的"进行中"和"完成中" -->
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.check">
<input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!--同样也是 加一个 v-if语句,item.check=true 将在“进行中”里 ,再将item-check作为一个model放入input中 -->
</li>
</ul>
</div>
</template>
<script>
/*
['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态
而下面这样模拟数据的话,很清晰的分清了它的状态
[
{
title:gym是个404,
check:true
},
{
title:yjl是个500,
check:false
}
]
*/
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字,可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[
{
title:'gym是个404',
check:true
}, //这两个数据为默认数据
{
title:'yjl是个500',
check:false
}
],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
if(this.todo != ''){
this.list.push({
title:this.todo,
check:false, //状态默认为false
});
//将todo push到list中
this.todo=''
} // 添加完数据之后,输入框为空
},
deleteDate(key){ //此key为形参
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
}
}
}
</script>
<style>
</style>
02版本的代码提升了一个层次,实现了基本功能,注释做的也很详细。多处用到了双向绑定。但页面样式没做编写。效果如下:
样式可自行添加,Vue todolist小实例基本完成。
版本03(保存搜索的历史记录)
在前两个版本中,没有实现可保存记录,也就是当页面刷新时原有的记录就没了,消失了。那么下面这个版本就完成了这个功能。
<template>
<!-- vue 的模板里面,所有的内容要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo" /> <!-- 双向绑定了 'todo'-->
<button @click="doAdd()">+ 增加</button>
<br>
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.check">
<input type="checkbox" v-model="item.check" @change="saveList()"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!-- 加一个 v-if语句,item.check=false 将在“进行中”里 ,再将item-check作为一个model放入input中 -->
</li>
</ul>
<!-- 添加了一个双向绑定,同时也实现了:在勾选checkbox时,会自动进入所对应的"进行中"和"完成中" -->
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.check">
<input type="checkbox" v-model="item.check" @change="saveList()"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!--同样也是 加一个 v-if语句,item.check=true 将在“进行中”里 ,再将item-check作为一个model放入input中 -->
</li>
</ul>
</div>
</template>
<script>
/*
['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态
而下面这样模拟数据的话,很清晰的分清了它的状态
[
{
title:gym是个404,
check:true
},
{
title:yjl是个500,
check:false
}
]
*/
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字,可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[
{
title:'gym是个404',
check:true
}, //这两个数据为默认数据
{
title:'yjl是个500',
check:false
}
],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
if(this.todo != ''){
this.list.push({
title:this.todo,
check:false, //状态默认为false
});
//将todo push到list中
this.todo=''
} // 添加完数据之后,输入框为空
localStorage.setItem('list',JSON.stringify(this.list)) //保存记录,页面刷新纪录仍然存在。
//使用的是HTML的语法
},
deleteDate(key){ //此key为形参
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
localStorage.setItem('list',JSON.stringify(this.list)) //保存记录,页面刷新纪录仍然存在。
//使用的是HTML的语法
},
saveList(){
localStorage.setItem('list',JSON.stringify(this.list)) //使复选框也保存记录,对应上面代码的第15行和24行
}
},
mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/
var list=JSON.parse(localStorage.getItem('list')); //得到保存的记录
if(list){ /*注意判断*/
this.list=list;
}
}
}
</script>
<style>
</style>
添加的主要代码在第15行、24行、77行、89行、92行和 第96到第103行
版本04(再次提升,使用模块化以及封装Storage组件)
我们发现频繁使用storage有点麻烦,那不如封装storage这个组件,然后直接调用。
- 在src下面新建一个文件夹为model ,新建文件storage.js
- 编写storage.js ,代码如下:
//封装操作localstorage本地存储的方法 模块化的文件
// nodejs 基础
var storage={
set(key,value){
localStorage.setItem(key, JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key);
}
}
export default storage;//将组件暴露出去
- 在App.vue 中改动的代码(主要是在script中有改动,怕读者产生视觉疲劳,这里就只发改动的代码)
import storage from './model/storage.js'; //导入这个文件
//console.log(storage);
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字,可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[
{
title:'gym是个404',
check:true
}, //这两个数据为默认数据
{
title:'yjl是个500',
check:false
}
],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
if(this.todo != ''){
this.list.push({
title:this.todo,
check:false, //状态默认为false
});
//将todo push到list中
this.todo='' // 添加完数据之后,输入框为空
}
storage.set('list',this.list) //封装了storage这个组件
},
deleteDate(key){ //此key为形参
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
storage.set('list',this.list); //封装了storage这个组件
},
saveList(){
storage.set('list',this.list); //封装了storage这个组件
}
},
mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/
var list=storage.get('list'); //得到保存的记录
if(list){ /*注意判断*/
this.list=list;
}
}
}
</script>
这样一来,就方便很多了。
Vue todolist小实例的版本就先改动到这里,还会有后续版本,希望对大家会有帮助。若有任何疑问或是不解,请在下方评论,谢谢。