vue3 综合案例-todolist
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li> <span>学习html</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del">删除</a> </li> <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> </ul> </div> </body> </html>
列出所有计划
<!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"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="item in item_list"> <span>{{item}}</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del">删除</a> </li> </ul> </div> </body> <script> var vm = Vue.createApp({ data(){ return { text:"", item_list: [ "学习html", "学习css", "学习javascript", ], } }, methods: { } }).mount("#todolist") </script> </html>
添加计划
<!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"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add_item"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="item in item_list"> <span>{{item}}</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del">删除</a> </li> </ul> </div> </body> <script> var vm = Vue.createApp({ data(){ return { text:"", item_list: [ "学习html", "学习css", "学习javascript", ], } }, methods: { add_item(){ // 添加计划 this.item_list.splice(0,0,this.text); this.text = ""; } } }).mount("#todolist") </script> </html>
删除计划
<!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"> <title>Title</title> <script src="../js/vue.global.prod.3.2.20.js"></script> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add_item"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="(item,key) in item_list"> <span>{{item}}</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del" @click.stop.prevent="remove_item(key)">删除</a> </li> </ul> </div> </body> <script> var vm = Vue.createApp({ data(){ return { text:"", item_list: [ "学习html", "学习css", "学习javascript", ], } }, methods: { add_item(){ // 添加计划 this.item_list.splice(0,0,this.text); this.text = ""; }, remove_item(key){ //删除计划 this.item_list.splice(key,1); } } }).mount("#todolist") </script> </html>
移动计划
<!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"> <title>Title</title> <script src="../js/vue.global.3.2.20.js"></script> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add_item"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="(item,key) in item_list"> <span>{{item}}</span> <a href="" class="up" @click.stop.prevent="up_item(key)"> ↑ </a> <a href="" class="down" @click.stop.prevent="down_item(key)"> ↓ </a> <a href="javascript:;" class="del" @click.stop.prevent="remove_item(key)">删除</a> </li> </ul> </div> </body> <script> var vm = Vue.createApp({ data(){ return { text:"", item_list: [ "学习html", "学习css", "学习javascript", ], } }, methods: { add_item(){ // 添加计划 this.item_list.splice(0,0,this.text); this.text = ""; }, remove_item(key){ //删除计划 this.item_list.splice(key,1); }, up_item(key){ // 计划向上移动 if(key===0)return; // 如果当前计划已经在最上方，则不能继续向上移动 let del_list= this.item_list.splice(key,1); console.log(del_list); this.item_list.splice(key-1,0,del_list[0]); }, down_item(key){ //计划向下移动 let del_list= this.item_list.splice(key,1); console.log(del_list); this.item_list.splice(key+1,0,del_list[0]); } } }).mount("#todolist") </script> </html>
webStorage是HTML5提供的用于在本地实现离线存储的一种技术方案。HTML5中提供了2个全局对象用于保存数据到本地浏览器或者移动端的webapp中，分别是：localStorage和sessionStorage。这2个对象，使用方式一致，区别仅仅是存储数据的有效期不同。
localStorage 永久存储，不主动删除，会一直保存在本地。
sessionStorage 会话存储，当浏览器重启以后，数据则会丢失。
这个对象保存数据时，都是域名进行区分保存的，不同的域名保存在本地存储的相互之间是互不干扰，互不影响的。
// 保存一个数据
localStorage.setItem("变量名", "变量值");
// localStorage.变量名="变量值"
// 获取一个数据
localStorage.getItem("变量名"); // 返回值：变量值
// 变量值 = localStorage.变量名
// 删除一个数据
localStorage.removeItem("变量名");
// 清空当前域名下所有的数据
localStorage.clear();
sessionStorage 的用法：
// 保存一个数据 sessionStorage.setItem("变量名", "变量值"); // sessionStorage.变量名="变量值" // 获取一个数据 sessionStorage.getItem("变量名"); // 返回值：变量值 // 变量值 = sessionStorage.变量名 // 删除一个数据 sessionStorage.removeItem("变量名"); // 清空当前域名下所有的数据 sessionStorage.clear();
基于本地存储实现前端页面的离线数据保存
<!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"> <title>Title</title> <script src="../js/vue.global.3.2.20.js"></script> <style> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> </head> <body> <div class="list_con" id="todolist"> <h2>To do list</h2> <input type="text" v-model="text" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add_item"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li v-for="(item,key) in item_list"> <span>{{item}}</span> <a href="" class="up" @click.stop.prevent="up_item(key)"> ↑ </a> <a href="" class="down" @click.stop.prevent="down_item(key)"> ↓ </a> <a href="javascript:;" class="del" @click.stop.prevent="remove_item(key)">删除</a> </li> </ul> </div> </body> <script> var vm = Vue.createApp({ data(){ return { text:"", item_list: [ "学习html", "学习css", "学习javascript", ], } }, methods: { add_item(){ // 添加计划 this.item_list.splice(0,0,this.text); this.text = ""; }, remove_item(key){ //删除计划 this.item_list.splice(key,1); }, up_item(key){ // 计划向上移动 if(key===0)return; // 如果当前计划已经在最上方，则不能继续向上移动 let del_list= this.item_list.splice(key,1); console.log(del_list); this.item_list.splice(key-1,0,del_list[0]); }, down_item(key){ //计划向下移动 let del_list= this.item_list.splice(key,1); console.log(del_list); this.item_list.splice(key+1,0,del_list[0]); }, save_data(){ //保存数据 let content = JSON.stringify(this.item_list); localStorage.setItem("todolist",content); }, load_data(){ //加载数据 let content = localStorage.getItem("todolist"); try{ this.item_list = JSON.parse(content); }catch (e){ console.log("转换json数据出错！") } } }, created(){ this.load_data(); }, updated() { console.log("修改数据"); this.save_data(); } }).mount("#todolist") </script> </html>
浙公网安备 33010602011771号