Vue3学习笔记-09
一、浏览器的本地存储
1. localStorage
localStorage:只有主动清除才会丢失
浏览器的本地存储,是js本身就已经存在的,不是Vue所带的。
主要是用于保存浏览的一些数据,例如在未登录的时候,把用户在该网站下的搜索记录进行保存。
最大的特点就是,把浏览器关闭之后,其数据还存在
<!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>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点击我保存一个数据</button>
<button onclick="readData()">点击我读取一个数据</button>
<button onclick="deleteData()">点击我删除一个数据</button>
<button onclick="deleteAllData()">点击我清空一个数据</button>
<script>
let person = {name:'Tom',age:18}
function saveData(){
window.localStorage.setItem('name','张三')
window.localStorage.setItem('person',JSON.stringify(person))//一json的格式(String类型)保存;保存结果是:{"name":"Tom","age":18}
window.localStorage.setItem('person2',person)//直接使用toString方法来存,但是person.toString()的结果就是[Object,Object]; 保存结果为: [Object,Object]
}
function readData(){
// window.localStorage.getItem('name')
const result = localStorage.getItem('person')
console.log(JSON.parse(result))
console.log(localStorage.getItem('name'))
console.log(localStorage.getItem('person2'))
}
function deleteData(){
localStorage.removeItem('person')
}
function deleteAllData(){
//直接删除所有数据
localStorage.clear()
}
</script>
</body>
</html>
2. sessionStorage
浏览器一关闭之后,其中的数据就不会存在,使用的方式与localStorage一样:
<!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>sessionStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点击我保存一个数据</button>
<button onclick="readData()">点击我读取一个数据</button>
<button onclick="deleteData()">点击我删除一个数据</button>
<button onclick="deleteAllData()">点击我清空一个数据</button>
<script>
let person = {name:'Tom',age:18}
function saveData(){
window.sessionStorage.setItem('name','张三')
window.sessionStorage.setItem('person',JSON.stringify(person))//一json的格式(String类型)保存;保存结果是:{"name":"Tom","age":18}
window.sessionStorage.setItem('person2',person)//直接使用toString方法来存,但是person.toString()的结果就是[Object,Object]; 保存结果为: [Object,Object]
}
function readData(){
// window.sessionStorage.getItem('name')
const result = sessionStorage.getItem('person')
console.log(JSON.parse(result))
console.log(sessionStorage.getItem('name'))
console.log(sessionStorage.getItem('person2'))
}
function deleteData(){
sessionStorage.removeItem('person')
}
function deleteAllData(){
//直接删除所有数据
sessionStorage.clear()
}
</script>
</body>
</html>
二、自定义事件
1.绑定自定义事件
自定义事件主要是为组件服务的。
子组件向父组件传递值:
实现方式:
1.通过父组件给子组件传递函数类型的props实现:子给父传递数据,要求是父组件要定义一个函数,把函数通过传递给子组件,子组件通过props进行接收函数名,之后子组件调用函数,把值作为该函数的返回值即可
例子:
<div id="app">
<MyStudent :getStudentName="getStudentName"></MyStudent>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
components:{Student},
methods:{
getStudentName(name,...params){
console.log('Student的name值为:',name,params)//当Studen组件放回多个值后,会把它放到params数组中
}
}
}
</script>
<div id="school">
<button @click="sendStudentName">把名字给App</button>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
props:['getStudentName'],
data(){
return {
name:'张三',
age:18
}
}
methods:{
sendStudentName(){
this.getStudentName(this.name,600,300,230)
}
}
}
</script>
2. 绑定自定义事件,用于做回调。都需要在父组件中定义一个函数来接收值
<div id="app">
<MyStudent v-on:getNameClick="demo"></MyStudent>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
components:{Student},
methods:{
demo(name){
console.log('Student的name值为:',name)
}
}
}
</script>
给谁绑定的事件,就去找谁触发
<div id="school">
<button @click="sendStudentName">把名字给App</button>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
props:['getStudentName'],
data(){
return {
name:'张三',
age:18
}
}
methods:{
sendStudentName(){
//触发Student组件实例(vc)上的getNameClick事件
this.$emit('getNameClick',this.name)
}
}
}
</script>
3.通过ref进行自定义事件绑定
<div id="app">
<MyStudent ref="student"></MyStudent>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
components:{Student},
methods:{
demo(name){
console.log('Student的name值为:',name)
}
},
mounted(){
//通过this.refs.student获取到Student组件的实例对象VC
this.$refs.student.$on('demo',this.getStudentName)
//触发一次就不在触发
//this.$refs.student.$once('demo',this.getStudentName)
}
}
</script>
2.解绑自定义事件
<div id="school">
<button @click="sendStudentName">把名字给App</button>
<button @click="unbind">解绑自定义事件</button>
</div>
<script>
import MyStudent from './components/Student'
export defaule {
name:'App',
props:['getStudentName'],
data(){
return {
name:'张三',
age:18
}
}
methods:{
sendStudentName(){
//触发Student组件实例(vc)上的getNameClick事件
this.$emit('getNameClick',this.name)
},
unbind(){
this.$off('getNameCilck')//解绑一个自定义事件
// this.$off(['getNameClick','demo2']) // 解绑多个自定义事件。off如果没有参数,则表示解除所有的绑定时间
}
}
}
</script>
3.销毁一个组件的实例对象
销毁后,所有vc实例的自定义事件全都无效
<div id="school"> <button @click="death">销毁当前组件的实例对象</button></div><script> import MyStudent from './components/Student' export defaule { name:'App', props:['getStudentName'], data(){ return { name:'张三', age:18 } } methods:{ death(){ this.$destroy() // 销毁当前组件的实例对象 } } }</script>
4.组件绑定原生自定义事件
需要使用native
修饰符
<div id="app"> <MyStudent ref="student" @click.native="show"></MyStudent></div><script> import MyStudent from './components/Student' export defaule { name:'App', components:{Student}, methods:{ show(){ alert('123456') } }, mounted(){} }</script>