今天是2022年7月5日,是我学习vue的第十五天
啊，昨天是周一，又没学，看了看layui框架
webStorage
- 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
- 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
- 相关API：
xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。xxxxxStorage.getItem('person');
该方法接受一个键名作为参数，返回键名对应的值。xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。xxxxxStorage.clear()
该方法会清空存储中的所有数据。
- 备注：
SessionStorage存储的内容会随着浏览器窗口关闭而消失。LocalStorage存储的内容，需要手动清除才会消失。xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。JSON.parse(null)的结果依然是null。
sessionStorage.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.0"> <title>Document</title> </head> <body> <h2>sessionStorage</h2> <button onclick="saveData()">点我保存一个数据</button> <button onclick="readData()">点我读取一个数据</button> <button onclick="delData()">点我删除一个数据</button> <button onclick="delAllData()">点我清除数据</button> <!-- 本地存储，游览器关闭也不会消失 --> </body> <script> let p={name:'giao',age:19} function saveData(){ //保存数据 window.sessionStorage.setItem('msg','hello') window.sessionStorage.setItem('msg2',666)//tostring window.sessionStorage.setItem('person',JSON.stringify(p)) } function readData(){ //读取数据 //读一个没有的数据则为null console.log(window.sessionStorage.getItem('msg')); console.log(window.sessionStorage.getItem('msg2')); const p=sessionStorage.getItem('person') console.log(JSON.parse(p));//parse() 将JSON数据转换为js对象 } function delData(){ //删除数据 window.sessionStorage.removeItem('msg2') } function delAllData(){ //清除所有数据 window.sessionStorage.clear() } </script> </html>
localStorage.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.0"> <title>Document</title> </head> <body> <h2>localStorage</h2> <button onclick="saveData()">点我保存一个数据</button> <button onclick="readData()">点我读取一个数据</button> <button onclick="delData()">点我删除一个数据</button> <button onclick="delAllData()">点我清除数据</button> <!-- 本地存储，游览器关闭也不会消失 --> </body> <script> let p={name:'giao',age:19} function saveData(){ //保存数据 window.localStorage.setItem('msg','hello') window.localStorage.setItem('msg2',666)//tostring window.localStorage.setItem('person',JSON.stringify(p)) } function readData(){ //读取数据 //读一个没有的数据则为null console.log(window.localStorage.getItem('msg')); console.log(window.localStorage.getItem('msg2')); const p=localStorage.getItem('person') console.log(JSON.parse(p));//parse() 将JSON数据转换为js对象 } function delData(){ //删除数据 window.localStorage.removeItem('msg2') } function delAllData(){ //清除所有数据 window.localStorage.clear() } </script> </html>
对案例中的数据本地存储
App.vue
<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <!-- 用props传输addTodo函数 --> <MyHeader :addTodo="addTodo"/> <!-- 给List传todos对象 --> <MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></MyList> <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></MyFooter> </div> </div> </div> </template> <script> //引入组件 import MyHeader from "./components/MyHeader.vue"; import MyList from "./components/MyList.vue"; import MyFooter from "./components/MyFooter.vue"; export default { name: "App", components: { MyHeader, MyList, MyFooter, }, data() { return { // todos: [ // { id: '001', title: '吃饭', done: true }, // { id: '002', title: '睡觉', done: false }, // { id: '003', title: '打豆豆', done: true } // ]//写死了的数据 todos:JSON.parse(localStorage.getItem('todos')) || [] }; }, methods: { //给Header组件传递addTodo函数，再通过函数调用获取函数的参数也就是todos对象数据 addTodo(todoObj) {//添加一个todo // console.log('我是App组件，我收到了数据'); this.todos.unshift(todoObj) // console.log('123'); }, //勾选或取消勾选todo checkTodo(id){ this.todos.forEach((todo) => { if(todo.id === id) todo.done =! todo.done }) }, //删除一个todo deleteTodo(id) { this.todos = this.todos.filter(todo => { return todo.id != id }) }, //全选或取消全选 checkAllTodo(done) { this.todos.forEach((todo)=> { todo.done=done }) }, //清除所有已经完成的todo clearAllTodo() { this.todos=this.todos.filter((todo) => { return !todo.done }) } }, watch: { todos: { deep: true,//深度监视 handler(value) { //每次修改将硬盘数据进行更新 window.localStorage.setItem('todos', JSON.stringify(value)); } } } }; </script> <style> /*base*/ body { background: #fff; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f; } .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn:focus { outline: none; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>
组件的自定义事件
- 一种组件间通信的方式，适用于：子组件 ===> 父组件
- 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
- 绑定自定义事件：
- 第一种方式，在父组件中：
<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> - 第二种方式，在父组件中：
<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }
- 若想让自定义事件只能触发一次，可以使用
once修饰符，或$once方法。
- 触发自定义事件：
this.$emit('atguigu',数据) - 解绑自定义事件
this.$off('atguigu') - 组件上也可以绑定原生DOM事件，需要使用
native修饰符。 - 注意：通过
this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
