介绍 Vue的优点 <李> & lt; template>
& lt; p 类=皌odo"祝辞
& lt; header>
& lt; input 类型=皌ext",占位符=笆淙搿?v模型=発eyword", @keydown.enter=癶andleList"比;
基于网络& lt;/header>
& lt; !——,正在进行,——比;
& lt; h5>正在进行…{{dolistNumber}} & lt;/h5>
& lt; template v=?项目,,指数),拷贝dolist",:关键=癷ndex"比;
& lt; p 类=癲olist", v=? item.checked"比;
& lt; label :=癷ndex + & # 39; l # 39;“比;
& lt; input 类型=癱heckbox", v模型=癷tem.checked",: id=癷ndex + & # 39; l # 39;“, @change=癶andleChecked"比;
{{项目。标题}}& lt;/label>
& lt; span @click=癱ancalDo(索引)“祝辞X
& lt;/p>
& lt;/template>
& lt; !——,已经完成,——比;
& lt; h5>已经完成…{{dolist.length 作用;dolistNumber}} & lt;/h5>
& lt; template v=?项目,,指数),拷贝dolist",:关键=癷ndex"比;
& lt; p 类=癲olist", v=癷tem.checked"比;
& lt; label :=癷ndex + & # 39;你# 39;“比;
& lt; input 类型=癱heckbox", v模型=癷tem.checked",: id=癷ndex + & # 39;你# 39;“,,@change=癶andleChecked"比;
{{项目。标题}}& lt;/label>
& lt; span @click=癱ancalDo(索引)“祝辞X
& lt;/p>
& lt;/template>
& lt;/p> & lt;/template> & lt; script>
import storage 得到& # 39;. ./storage.js& # 39;;
export default {
名称:,“todoList",
数据(),{
return {
关键字:““,,//,,输入的选项
dolist: [],
}
},
计算:{
dolistNumber () {
return this.dolist.filter (item =祝辞,item.checked ===, false) . length;
}
},
方法:,{
handleChecked () {//,,当更改状态之后,重新刷新
storage.set (& # 39; dolist& # 39;,, this.dolist);
},
handleList (), {
if (this.keyword !==,““), {
this.dolist.push ({
标题:,this.keyword,
检查:假的,
});
时间=this.keyword “,“;
storage.set (& # 39; dolist& # 39;,, this.dolist);
}
},
cancalDo(索引),{//,删除这个
this.dolist.splice(指数,1);
storage.set (& # 39; dolist& # 39;,, this.dolist);
}
},
安装(){
let dolist =, storage.get (& # 39; dolist& # 39;);
如果(dolist) {
时间=this.dolist dolist;
}
},
}& lt;/script> & lt; style>
.todo {
保证金:400年,px 汽车;
最小高度:300 px;
宽度:800 px;
background - color: # eee;
}
.todo header {
位置:,相对;
text-align:中心;
高度:60 px;
行高:60 px;
字体大小:20 px;
边界底部:2 px solid # fff;
}
.todo header input {
位置:绝对的;
左:,40像素;
前:50%;
变换:translateY (-50%);
大纲:没有;
行高:30 px;
border - radius: 15 px;
padding-left: 30 px;
边界:1 px solid # 999;
字体大小:16 px;
宽度:100 px;
过渡:all .6s 线性;
}
.todo header 输入:focus {
宽度:200 px;
}
.dolist {
填充:20 px;
字体大小:16 px;
}
.dolist label {
光标:指针;
}
.dolist input {
margin-right: 10 px;
}
.dolist 跨度:last-child {
浮:正确的;
边界:1 px solid 灰色;
background - color: # 999;
null
null
null
null
null
null
null
null
null
这篇文章主要介绍Vue怎么封装一个基于网络,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
<李>
前提:一般我们定义的变量,或者用Vuex保存的数据,当浏览器进行了一个刷新那么这个数据就会丢失,这样就做不出历史记录的效果了,但是,使用浏览器缓存就可以帮助我们解决这个问题…
浏览器缓存分为二种sessionStorage和localStorage,二种原型链分别如下:
<李>
localStorage作用于本地缓存,时间是持久的,除非手动去删除,或者清空,不然一直都存在浏览器中
<李>sessionStorage作用与会话缓存,生命周期只存在于本次打开浏览器会话,当完成的关闭浏览器,那么信息就会丢失,而仅仅刷新页面,数据仍然保存。
本次实例,使用的是sessionStorage,并对此进行了一次小封装。
const , storage =, {
集(键,值){
window.sessionStorage.setItem(关键,JSON.stringify(值));
},
(关键){
return JSON.parse (window.sessionStorage.getItem(键));
},
删除(关键){
window.sessionStorage.removeItem(关键);
}}export default 存储; 
