项目二：黑马头条（黑马前端课程）

import Vue from 'vue' import dayjs from 'dayjs' import 'dayjs/locale/zh-cn' // 加载中文语言包 dayjs.locale(

注意：watch里面 监听写法： 普通写法： toutiao-m: views search index.vue 2.正式写法 handler函数 普通写法

通过v-if判断组件是否展示：实现组件内容实时更新 点击取消，组件不展示 跟这个文档的第四个问题一样：https://juejin.cn/post/7000028985480445959 vant 导

解构赋值的写法：不能有下划线，所以可以这样重命名的写出来就可以 在{{}} 也可以写三元表达式 最后写成这样了 动态绑定点赞图标的样式 文章评论点赞 更新视图 vant组件 失败提示 vant组件 提

问题 file-input 如果选了同一个文件 不会触发 chang 事件 解决办法就是每次使用完毕 把他的 value 清空 上传头像请求参数传递：接口要求Content-Type 为 multip

1. 父组件 index.vue 给所有子组件传参，采用vue中边界处理情况的 依赖注入 2. 子组件 这样来接收并使用，如果不接收 是无法使用的 使用的时候 要进行判断一下，不然如果参数不存在 就报

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09c9415d339344519c2b6f692fa54250~tplv

1. 解决 页面一上来就真实 评论数量的问题 ，默认是要加载到评论列表才展示的 2. 因为解决了问题 1 引出 问题 2：在评论的回复列表中，有重复的回复，也就是说 4条数据，展示 8条，这里没有截图

传参疑问（父传子这个type为啥不用冒号？） 百思不得其解：后来发现：可以给子组件传入一个静态的值??为啥用v-bind或冒号 报错？半知半解 解决问题： 文章id会超出安全整数范围，要用toStri

第一： 在回复这个里的页面comment-item.vue，绑定点击自定义事件，并把参数传递到 上一层 子组件 第二：在上comment-list.vue 子组件 监听 第一个绑定的事件：replay

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97b795b005254e28910353a8a2ae2b87~tplv

通过 子传父事件： 让父组件处理 关闭弹窗，发布内容展示在最顶部，清空文本 一 关闭弹层：3 步 二 发布内容展示在最顶部 看起来是 父传子，实际上是 子传父

自定义组件父子组件传参 和 传递事件 用了语法糖v-module 一 传统的传参写法：父传子 和 子传父 二 使用语法糖 传参简单写法：在组件上使用 v-model 三 语法糖的 最终使用写法 ：方便

文章正文 第三方css github-markdown-css 文章详情：图片预览功能，重点：数据驱动视图 这件事不是立即的也可以看这：https://juejin.cn/post/699957152

完整代码在这： 以下是图片预览功能涉及到的代码： 图片预览功能：重点：数据驱动视图 这件事不是立即的 图片预览功能vant组件 https://youzan.github.io/vant/#/zh-C

.markdown-body .octicon { display: inline-block; fill: currentColor; vertical-align: text-bottom; }

src/views/search/index.vue 1、在 data 中添加数据用来控制搜索结果的显示状态 2、在模板中绑定条件渲染

通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始

之所以请求文章详情返回 404 是因为我们请求发送的文章 ID （article.art_id）不正确。 JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这

基本思路 ： 1.在 Vue 中如何渲染带有 HTML 标签的字符串？ 如何把字符串中指定字符统一替换为高亮（包裹了 HTML）的字符？ 前端完整代码：