<!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>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
一、webStorage浏览器的本地存储
1.对象的存储与读取
1>.sessionStorage.setItem('person',JSON.stringify(p))、
2>.const result = JSON.parse(sessionStorage.getItem('person'))
2. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
3. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
4. 相关API:
1>. ```xxxxxStorage.setItem('key', 'value');```
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
2>. ```xxxxxStorage.getItem('person');```
该方法接受一个键名作为参数,返回键名对应的值。
3>. ```xxxxxStorage.removeItem('key');```
该方法接受一个键名作为参数,并把该键名从存储中删除。
4>. ``` xxxxxStorage.clear()```
该方法会清空存储中的所有数据。
二、TodoList_本地存储(深度监听的使用)
1.注意:可以在定义变量的时候进行空数组判断
data() {
return {
todos: JSON.parse(localStorage.getItem("todos")) || [],
};
},
2.注意:如果需要改变数据中的其他变量,可以开启深度监听
watch: {
todos:{
deep: true, //开启深度监测
handler(value){
localStorage.setItem("todos", JSON.stringify(value));
},
},
三、组件的自定义事件
1. 一种组件间通信的方式,适用于:<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(<span style="color:red">事件的回调在A中</span>)。
3. 绑定自定义事件:
1>. 第一种方式,在父组件中:```<Demo @atguigu="test"/>``` 或 ```<Demo v-on:atguigu="test"/>```
2>. 第二种方式,在父组件中:
```js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
```
3>. 若想让自定义事件只能触发一次,可以使用```once```修饰符,或```$once```方法。
4. 触发自定义事件:```this.$emit('atguigu',数据)```
5. 解绑自定义事件```this.$off('atguigu')```
6. 组件上也可以绑定原生DOM事件,需要使用```native```修饰符。
7. 注意:通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时,回调<span style="color:red">要么配置在methods中</span>,<span style="color:red">
要么用箭头函数</span>,否则this指向会出问题!
四、TodoList_自定义事件应用
1.父组件 @checkAllTodo="checkAllTodo"或this.$refs.myheader.$on('atguigu',this.addTodo)
2.子组件this.$emit('checkAllTodo',todoObj)
五、 全局事件总线(GlobalEventBus)
1. 一种组件间通信的方式,适用于<span style="color:red">任意组件间通信</span>。
2. 安装全局事件总线:
```js
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
```
3. 使用事件总线:
1>. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
```
2>. 提供数据:```this.$bus.$emit('xxxx',数据)```
4. 最好在beforeDestroy钩子中,用$off去解绑<span style="color:red">当前组件所用到的</span>事件。
六、全局事件总线在TodoList应用
1.注意:绑定和解绑要写在父组件中
mounted() {
this.$bus.$on('checkTodo',this.checkTodo) //绑定自定义事件
this.$bus.$on('delTodo',this.delTodo) //绑定自定义事件
},
beforeDestroy() {
this.$bus.$off('checkTodo')
this.$bus.$off('delTodo')
},
2.使用: this.$bus.$emit('delTodo',id)
七、消息订阅与发布
1.需要数据的人要订阅消息
消息订阅与发布(pubsub)
2.一种组件间通信的方式,适用于<span style="color:red">任意组件间通信</span>。
3. 使用步骤:
1>. 安装pubsub:```npm i pubsub-js```
2>. 引入: ```import pubsub from 'pubsub-js'```
3>. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的<span style="color:red">回调留在A组件自身。</span>
```js
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
```
4. 提供数据:```pubsub.publish('xxx',数据)```
5. 最好在beforeDestroy钩子中,用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>
八、TodoList案例_pubsub(消息订阅)
1.插件的位置摆放,要放最前面
2.PubSub.unsubscribe(pid)删除的时候pid是像定时器一样的意思
3.插件,子组件和父组件都要局部引用
九、TodoList案例_编辑
1.this.$refs.inputTitle.focus()获取焦点,注意获取的时候,因为inputDOM标签在执行这个代码的时候,还没有显示出来,所以加定时器,但是官网推荐这个$nextTick
2.this.$bus.$emit('blurPrice',todo.id,e.target.value)推荐修改原数据,尽量在父文件中修改数据
3.if(todo.hasOwnProperty('edit')){//完美解决-重复调用问题-判断我的身上有没有这样一个属性
4.
十、nextTick
1. 语法:```this.$nextTick(回调函数)```
2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
十一、Vue封装的过度与动画
安装:
npm install animate.css --save
1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
2. 图示:<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
3. 写法:
1>. 准备好样式:
- 元素进入的样式:
1. v-enter:进入的起点
2. v-enter-active:进入过程中
3. v-enter-to:进入的终点
- 元素离开的样式:
1. v-leave:离开的起点
2. v-leave-active:离开过程中
3. v-leave-to:离开的终点
2>. 使用```<transition>```包裹要过度的元素,并配置name属性:
```vue
<transition name="hello">
<h1 v-show="isShow">你好啊!</h1>
</transition>
```
3>. 备注:若有多个元素需要过度,则需要使用:```<transition-group>```,且每个元素都要指定```key```值。
-->
<div id="root">
<p>{{name}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//阻止 vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data(){
return{
name:"ss"
}
},
})
</script>
</body>
</html>
Vue基础第四天之“本地存储、组件的自定义事件、全局事件总线、消息订阅与发布、nextTick、Vue封装的过度与动画”
于 2022-03-03 22:13:47 首次发布