vue part 8

news2024/11/15 19:41:04

浏览器本地存储

application， local storage中

js方法肯定会用很多呀，只是不直接操作dom了但是对对象和数组进行操作还是原先的方法，jq的话想用引入就可以了。我是直接放弃jq了，在框架中用jq包不好

sessionStorage.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage</title>
</head>
<body>
<h2>sessionStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="removeAllData()">清空所有数据</button>
</body>
<script type="text/javascript">
    function saveData(){
        sessionStorage.setItem('msg1', 'panyue,hello');
        //对象转换为字符串
        sessionStorage.setItem('msg2',JSON.stringify({
            name: 'panyue',
            age: '21',
            school: 'wust(WuHan)'
        }))
    }

    function readData(){
        console.log(sessionStorage.getItem('msg1'))
        console.log(JSON.parse(sessionStorage.getItem('msg2')));
        console.log(sessionStorage.getItem('text')); //读不出来就是null Json.parse(null)仍然是null注意
    }

    function deleteData(){
        sessionStorage.removeItem('msg2');
    }

    function removeAllData(){
        sessionStorage.clear();
    }
</script>
</html>

localStorage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
</head>
<body>
  <h2>localstorage</h2>
  <button onclick="saveData()">点我保存一个数据</button>
  <button onclick="readData()">点我读取一个数据</button>
  <button onclick="deleteData()">点我删除一个数据</button>
  <button onclick="removeAllData()">清空所有数据</button>
</body>
<script type="text/javascript">
    function saveData(){
        localStorage.setItem('msg1', 'panyue,hello');
        //对象转换为字符串
        localStorage.setItem('msg2',JSON.stringify({
            name: 'panyue',
            age: '21',
            school: 'wust(WuHan)'
        }))
    }

    function readData(){
        console.log(localStorage.getItem('msg1'))
        console.log(JSON.parse(localStorage.getItem('msg2')));
        console.log(localStorage.getItem('text')); //读不出来就是null Json.parse(null)仍然是null注意
    }

    function deleteData(){
        localStorage.removeItem('msg2');
    }

    function removeAllData(){
       localStorage.clear();
    }
</script>
</html>

不存在返回NULL

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
3.相关API:
1. xxxxxStorage. setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage. getItem('person');
该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
该方法会清空存储中的所有数据。
4.备注：
1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2.LocalStorage存储的内容，需要手动清除才会消失。
3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。
4.JSON.parse(null)的结果依然是null。

ToDoList的本地存储

在methods里面添加updated 实测不行，检测不到深层数据的改变。类似于 watch 中 deep: false真的不行吗？？？

watch来检测深度监视

前台提示，空数组和JSON不能换位置，因为||运算符特点，具体看js基础课程

组件的自定义事件

绑定

v-on给student组件的实例对象vc上绑定了一个atguigu事件，vc（组件实例对象）是由vue.extend生成的

<template>
  <div class=llapp<l>
   <hl>{{msg}}</hl>
   <!--通过父纸件给Nil件传速随敷类电的peps实现：广给父心递数据-->
   <School : get School Name= "get School Name"/>
   <Student v-on:atguigu="demo"/>
  </div>
</template>

在组件上面定义一个事件,而后在组件的template模板中定义一个点击事件,通过点击事件触发函数,在函数中使用this.$emit调用组件定义的函数

绑定自定义事件，直接就把这个函数放在了子组件的VC身上，而props需要接收后才能放在VC上

下面这里很怪，为什么用了ref里面的触发还是atguigu？不是被注释掉了嘛？

<！--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v—on）-->
<Student @atguigu="getstudentName"/>
<！--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref）-->
<Student ref="student"/>

上下两相对照

这里的$on的作用就是把atguigu的事件添加到student的vc上，所以student组件才能$emit调用，vue3中废弃了$on

解绑

vue3中offapi已经废掉了，取而代之的是mitt

$destory在Vue3中被废弃，不让用户自己调用了

是解绑所有子组件自定义事件，school组件能给app传递name，是因为school中的方法是app通过props传递过去的，并不是自定义事件，所以可以使用，就像student中的打印能用一样的道理

main.js

//引入Vue
import Vue from 'vue' //App
import App from './App.vue' //关闭Vue的生产提示
Vue.config.productionTip false //创建vm
new Vue({ el:'#app',
render: h =>h(App), mounted(){
setTimeout(()=>{ this.$destroy() ],3p00)
} )

总结

082_尚硅谷Vue技术_组件自定义事件_总结_哔哩哔哩_bilibili

接下来的内容概括：箭头函数在哪定义，this永远指向父级函数this,且this指向不可改变,即使作为属性添加到另一个对象上也是如此。普通函数作为方法添加到另一个对象上，this指向由调用者决定。作用域与this指向是分开的

用匿名函数直接回调，里面的this指向VC，用已有methds触发，触发的methods里的this肯定是当前组件。当你给组件绑自定义事件的时候回调函数this指向被绑定事件的组件, 当你调用当前组件的函数的时候, 以当前组件函数的this为主, vue规定当前组件函数的this指向当前组件

todolist自定义事件实战

083_尚硅谷Vue技术_TodoList案例_自定义事件_哔哩哔哩_bilibili

全局事件总线

总结：在Vue.prototype里面添加全局事件总线，好了下一节吧

A想要别的数据，

往所有的vuecomponent放你要的x，所有的vc不就都能看见了吗？error，因为不是程序员定义的，是Vue.extent生成的

084_尚硅谷Vue技术_全局事件总线1_哔哩哔哩_bilibili可以看到19.40即可

这有问题吧，相同的组件标签是new的同一个VueComponent吧，每个不同的组件是不同的VueComponent：不是写标签一个新的Vuecomponent吧，是每次调用Vue.extend返回新的Vuecomponent吧

总之就是必须把x放在原型对象上

main.js

//引入Vue
import Vue from 'vue' //App
import App from './App.vue' 
//关闭Vue的生产提示
Vue.config. productionTip false 

Vue.prototype.x {a: 1, b: 2} //创建vm

new Vue({ 
    el: '#app',
    render: h =>h(App), 
])