Vue(四）——全局事件总线， 消息订阅与发布 ，nextTick_vue4 nexttick

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一种组件间通信的方式，适用于任意组件间通信。

• 安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 

• 使用事件总线：
• 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

• 提供数据：this.$bus.$emit('xxxx',数据)
• 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
 export default {
 name:'School',
 data() {
 return {
 name:'尚硅谷',
 address:'北京',
 }
 },
 methods: {
 demo(data) {
 console.log('我是School组件，收到了数据',data)
 }
 }
 mounted() {
 // console.log('School',this)
 this.$bus.$on('hello',this.demo)
 },
 beforeDestroy() {
 this.$bus.$off('hello')
 },
 }
</script>

<style scoped>
 .school{
 background-color: skyblue;
 padding: 5px;
 }
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
 export default {
 name:'Student',
 data() {
 return {
 name:'张三',
 sex:'男',
 }
 },
 mounted() {
 // console.log('Student',this.x)
 },
 methods: {
 sendStudentName(){
 this.$bus.$emit('hello',this.name)
 }
 },
 }
</script>

<style lang="less" scoped>
 .student{
 background-color: pink;
 padding: 5px;
 margin-top: 30px;
 }
</style>

2.5. 消息订阅与发布

一种组件间通信的方式，适用于任意组件间通信。

• 安装pubsub：npm i pubsub-js
• 引入: import pubsub from 'pubsub-js'
• 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods:{
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

• 提供数据：pubsub.publish('xxx',数据)
• 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
 import pubsub from 'pubsub-js'
 export default {
 name:'School',
 data() {
 return {
 name:'尚硅谷',
 address:'北京',
 }
 },
 mounted() {
 // console.log('School',this)
 /\* this.$bus.$on('hello',(data)=>{
 console.log('我是School组件，收到了数据',data)
 }) \*/
 this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
 console.log(this)
 // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
 })
 },
 beforeDestroy() {
 // this.$bus.$off('hello')
 pubsub.unsubscribe(this.pubId)
 },
 }
</script>

<style scoped>
 .school{
 background-color: skyblue;
 padding: 5px;
 }
</style>

2.6. nextTick

1. this.$nextTick(回调函数)
2. 在下一次 DOM 更新结束后执行其指定的回调。
3. 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

this.$nextTick(function(）{
	this.$refs.inputTitle.focus()
}

2.7. Vue封装的过度与动画

1. 在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

   • 元素进入的样式：
   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属性：

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

896652)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-wDpsCMym-1715827896653)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-yBGBaR9Z-1715827896654)]