Vue3学习笔记-09

最新推荐文章于 2023-09-01 03:09:16 发布

JZYCLL

最新推荐文章于 2023-09-01 03:09:16 发布

阅读量205

点赞数

分类专栏：浏览器的本地存储学习笔记 vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/JZYCLL/article/details/119150813

版权

学习笔记同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue学习笔记

7 篇文章 0 订阅

订阅专栏

浏览器的本地存储

1 篇文章 0 订阅

订阅专栏

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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbalWJlL-1627382782785)(C:\Users\20901\AppData\Roaming\Typora\typora-user-images\image-20210726135009926.png)]$

JZYCLL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3学习笔记-09

Vue3学习笔记-09一、浏览器的本地存储1. localStoragelocalStorage：只有主动清除才会丢失浏览器的本地存储，是js本身就已经存在的，不是Vue所带的。主要是用于保存浏览的一些数据，例如在未登录的时候，把用户在该网站下的搜索记录进行保存。最大的特点就是，把浏览器关闭之后，其数据还存在<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫