Vue2博客项目笔记(完结)

this.$emit('load'): 子组件负责监听,然后告诉父组件,父组件来执行 load 方法

<div ref="scroll" >

ref="scroll"：给元素取引用名，在 JS 中可以通过 this.$refs.scroll 拿到这个元素

<slot></slot> :用于把父组件传入的内容渲染到子组件的指定位置

父组件:

<scroll-page><p>我是父组件传进来的内容</p>
</scroll-page>

子组件:

<!-- ScrollPage.vue -->
<template><div><slot></slot>  <!-- 👈 这里就是“内容占位符” --></div>
</template>

相当于把 p标签的内容插入到 slot 的位置

const that = this作用: 保存当前上下文（即 this）的引用

let curHeight = document.documentElement.scrollTop || document.body.scrollTop

获取页面滚动的高度
document.documentElement.scrollTop 适用于标准模式下的浏览器
document.body.scrollTop 适用于兼容模式或部分老旧浏览器
用或运算符（||）是为了兼容不同浏览器，哪个有值就用哪个

that.articles = that.articles.concat([// 数据对象
]);

作用是将 that.articles 原有的数组与括号内的数组合并，生成一个新的数组，并将其赋值回 that.articles

that.$message({ … })

Element UI 的全局消息提示组件，用来显示弹窗提示

that.$message({type: 'error',             // 提示类型：'success' | 'warning' | 'info' | 'error'message: res.data.message, // 提示的文字内容showClose: true            // 是否显示右上角的关闭按钮
})

res.data.data

后端拿到的数据:

{"success": true,"data": [{ "id": 1, "title": "文章标题1" },{ "id": 2, "title": "文章标题2" }],"message": "成功"
}

• res 是 axios 的响应对象

• res.data 是后端返回的 JSON 对象

• res.data.data 是需要的数据

//to="/" 表示跳转到根路径 /
<router-link to="/" class="me-title"><img src="../assets/img/logo.png" />
</router-link>

router-link 用于 Vue 跳转,不刷新页面

统一请求处理

统一指定请求url:

import axios from 'axios'  const service = axios.create({  baseURL: "http://localhost:8888",  timeout: 10000  
})  export default service

接口的url:

export function getArticles(page) {return request({method: 'post',url: '/articles/findArticlePage',data: page})
}

发起请求的函数

			getArchives(){//发起http请求 请求后端的数据getArchives().then((res)=>{////res.data = Result (success,msg,data)if(res.data.success){this.archives = res.data.data;}else{this.$message.error(res.data.msg);}}).catch((err)=>{this.$message.error("系统错误");}).finally(()=>{})},

第一处是组件内定义的方法
第二处是导入的 API 请求函数:

// api/article.js
export function getHotArticles() {return request({method: 'get',url: '/articles/hot'});
}

监听器（watcher）

监听 $route 的变化: 如果用户从一篇文章跳到另一篇（URL 变了），重新调用 getArticle() 获取新文章内容

watch: {'$route': 'getArticle'
}

this.$store.state.id 是什么？

Vuex 是 Vue 官方的状态管理库，类似全局变量存储中心, $store 是 Vuex 的实例，可以在任何组件里通过 this.$store 访问, state 是 Vuex 里存储数据的地方

Vuex

Vuex： 提供一个全局唯一的状态仓库, 任何组件都可以读取全局数据并修改