Vue2 - 学习 (viii)
目录
一、浏览器 webStorage
(一)介绍
(二)LocalStorage
1.存储数据
2.查询/读取数据
3.移除数据
4.清空数据
(三)SessionStorage
二、TodoList 案例使用 storage
三、组件的自定义事件
(一)自定义事件 v-on 写法
(二)ref 写法
(四)解绑自定义事件
1.正常解绑
2.销毁实例
(五)总结
一、浏览器 webStorage
(一)介绍
就是比如我们在购物网站 搜索了某个商品信息,然后退出网页再进入购物网站,会发现搜索栏下面有搜索历史,这个记录就存在我们浏览器的本地存储。
进入开发者模式 然后点击 应用栏 就是 application
Storage 下面有两个存储 一个是 localstorage 本地存储 里面就是我们存东西的网站,就是我们访问网站的域名
值是 key value 的形式
(二)LocalStorage
特点:浏览器关闭数据也不会消失 清除缓存数据会消失,或者手动删除
向浏览器中添加数据 使用 Window 上的方法 localStorage.setItem 设置,里面必须都是字符串
如果给的不是字符串形式 它会默认给我们改成字符串形式
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<script>
function saveData() {
localStorage.setItem('msg', 'hello')
}
</script>
</body>
1.存储数据
要存储对象型的数据 我们用 JSON.stringify 把对象转化成字符串即可
localStorage.setItem('person', JSON.stringify(p))
2.查询/读取数据
查询浏览器中数据 使用 Window 上的方法 localStorage.getItem 设即可
如果是对象 再 JSON.parse(得到的字符串) 就能得到原来形式的数据
如果没有该数据 读出的数据是 null
function readData() {
console.log(localStorage.getItem('msg'))
}
3.移除数据
移除浏览器中数据 使用 Window 上的方法 localStorage.removeItem 设即可
function deleteData() {
localStorage.removeItem('msg')
}
4.清空数据
清空浏览器中数据 使用 Window 上的方法 localStorage.clear() 即可
function deleteAllData() {
localStorage.clear()
}
(三)SessionStorage
特点:关闭浏览器时数据清空
api 与上面 localstorage 一致 把名字替换成 sessionStorage 就行
二、TodoList 案例使用 storage
app 更新
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<MyHeader :addTodo="addTodo" />
<MyList
:todos="todos"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
<MyFooter
:todos="todos"
:checkAllTodo="checkAllTodo"
:clearAllTodo="clearAllTodo"
/>
</div>
</div>
</div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";
export default {
name: "app",
components: {
MyHeader,
MyFooter,
MyList,
},
data() {
return {
todos: JSON.parse(localStorage.getItem("todos")) || [],
};
},
methods: {
addTodo(todoObj) {
this.todos.unshift(todoObj);
},
checkTodo(id) {
this.todos.forEach((todo) => {
if (todo.id === id) todo.done = !todo.done;
});
},
deleteTodo(id) {
this.todos = this.todos.filter((todo) => {
return todo.id !== id;
});
},
checkAllTodo(done) {
this.todos.forEach((todo) => {
todo.done = done;
});
},
clearAllTodo() {
this.todos = this.todos.filter((todo) => {
return !todo.done;
});
},
},
watch: {
todos: {
deep: true,
handler(value) {
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>
三、组件的自定义事件
是组件间的一种通信方式 适用于 子组件到父组件
原本写法
原本的子组件给父亲组件传东西
就是父亲先传一个函数给儿子 然后儿子调用 父亲就能得到儿子中的参数
(一)自定义事件 v-on 写法
v-on 可以简写成 @
通过绑定一个自定义事件来实现子给父传递数据 名字叫做 hahaha
<MyStudent v-on:hahaha="getStudentName" />
在 app 编写调用的函数
getStudentName(name){
console.log('demo被调用了',name)
}
在 Student 中写 hahaha 事件,并返回 this.name
就不用props 接收了 方便一点
this.$emit('hahaha',this.name) 传数据的语法
methods: {
sendStudentName(){
this.$emit('hahaha',this.name)
}
},
仅触发一次
<MyStudent v-on:hahaha.once="getStudentName" />
(二)ref 写法
使用 ref 属性 更好一点 如果涉及到延时 触发的时候 我们可以用 ref
<MyStudent ref="student" />
设置延时三秒才有 hahaha 事件
mounted() {
setTimeout(() => {
this.$refs.student.$on("hahaha", this.getStudentName);
}, 3000);
},
只触发一次
this.$refs.student.$once("hahaha", this.getStudentName);
(四)解绑自定义事件
1.正常解绑
在谁里面定义的事件 就在谁里面解绑
我们在 MyStudent 里面写一个 解绑函数
解绑一个事件
unbind(){
this.$off('hahaha')
}
解绑多个事件 我们用 一个数组把我们要解绑的 事件名 放进去
unbind(){
this.$off(['hahaha','demo'])
}
解绑所有事件
unbind(){
this.$off()
}
2.销毁实例
如果销毁 vc 实例,里面的自定义事件也同时被销毁,
如果销毁 vm 实例,所有的子组件也同样被销毁,组件里的自定义事件也被销毁
(五)总结
是组件间的一种通信方式
只能子传父
组件上能绑定原生的 dom 事件 但是得用native 修饰
this.$refs.student.$once("hahaha", this.getStudentName);
中的回调函数如果不写在 methods 里面 还能直接写在这句话里面但是 但是必须用箭头函数否则this 指向会出问题, this 指向调用事件的实例 就是 Student 不是我们要的 this 指向
推荐阅读