思考怎么学

[unaheidi]

要学的东西多，怎么下手？这是个很好的问题

[unaheidi]

不好理解：什么叫“声明式地描述“”？

[unaheidi]

Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里

[unaheidi]

就是这句话也有讲究哦， 据说 Vue2.x 无法import createApp 这个函数，是从Vue 3.x引入的特性

[unaheidi]

截止到这里，尚不知道根组件应该长什么样子

[unaheidi]

这个倒是可以理解的，没有挂载DOM元素等也没啥意义

[unaheidi]

看完一点印象都没有。

什么资源注册？ 根组件实例、应用实例，都啥区别，长的有啥不同？ 一概不知

[unaheidi]

这个看得也不太明白，DOM 内模板 --- 是指innerHTML 这个吗？

[unaheidi]

创建多个应用的介绍，情不自禁问一：为什么要创建多个应用；多个应用之间怎么交互

[unaheidi]

模板语法：组件的数据绑定到DOM元素上

[unaheidi]

[unaheidi]

[unaheidi]

仅仅看文档，要么看不懂，要么遗忘。快速看个大概就行了，还是得实践+观察+提问

[unaheidi]

1）VSCode里面建手写几个 .vue 文件，点 debug 有效果吗？ 2）想起了 VUE 的工具，利用工具创建一个 vue 工程吧，选好Vue版本+npm版本（用了最新的3.0，要求npm 18以上） 3）vue工程中各目录存放哪类文件，关键的文件有哪些

[unaheidi]

vue.config.js 这个文件有名堂，日后观察怎么用

[unaheidi]

public/index.html
src/App.vue src/main.js

package.json vue.config.js babel.config.js jsconfig.json

[unaheidi]

把 main.js 说说清楚

[unaheidi]

找 vue 进阶资料，要有实例的，发现不容易哦。 再次回到了 vue 官网

[unaheidi]

https://cn.vuejs.org/tutorial/#step-1 互动教程

[unaheidi]

鼠标左键题目会做了，再想想右键清零怎么实现？ --- 这个蛮有意义

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    },
    reset(event) {
      event.preventDefault(); // 阻止默认的上下文菜单弹出
      // 鼠标右键单击事件的处理逻辑
      this.count = 0
    }
  }
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button @click='increment' @contextmenu=reset>count is: {{ count }}</button>
</template>

[unaheidi]

怎么理解这句话：我们可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定

双向绑定：数值变了---组件的视图跟着变化 组件在界面上变化了---数值跟着变化

[unaheidi]

removeTodo(todo) {
  this.todos = this.todos.filter((t) => t !== todo)
}

妙！！！ 请问 filter方法是 vue 提供的，还是 javascript 本身就有的呢？

[unaheidi]

一个 vue 文件里面，包含哪些东西？ 原来 import 也是要放在 里面的

[unaheidi]

找了个目前在用但版本很低的VUE工程，开发环境搭建过程中报错了 npm ERR! gyp verb check python checking for Python executable "python2" in the PATH npm ERR! gyp verb which failed Error: not found: python2

[unaheidi]

想mock后端调用的数据，没经验，一下好像搞不定，怎么办？ 先改代码，把远程调用的改成自己写数据。 写了数据，界面死活出不来预期效果，怎么办？ 只能debug。怎么debug呢？ 找了个方法，chrome来debug。可能有其他调试的方法，以后再收集一下。 浏览器加个插件vue dev tools，服务端用的webpack，npm run dev。

[unaheidi]

拿到一个老项目，不是自己开发的，组件调用关系很重要。

TsBot.vue ----- 组件name是 table ----sidenav/SideNav.vue ----- 组件name是 SideNav ----toolbar/Toolbar.vue

vue dev tools 里面看到有 Dreakdown，可是 TsBot.vue 里面没有把这个作为子组件，那么它在哪里被引入的呢？

咨询【文心一言】 我想问的是：为啥要用这种方式把 Dreakdown 作为 TsBot 的组件呢？为什么不在 TsBot组件中用下面的代码引入Dreakdown呢？ export default { --components: { --Dreakdown } }

Dreakdown.vue ----- 核心组件 ---- Message/Message.vue ---- Tabs/Tabs.vue

从哪里开始一步一步调用到下面语句的？ ------ 我怎么查看一个方法的调用链 bus.$emit('Dreakdown change channel', options)

[unaheidi]

Dreakdown 和 DreakdownTable 啥关系

[unaheidi]

routes/index.js table TsBot/TsBot.vue 组件name是 ---- SideNav SideNav/SideNav.vue 组件name是 SideNav ---- Toolbar Toolbar/Toolbar.vue
---- Dreakdown Dreakdown/Dreakdown.vue ----- routes/index.js 里面根据路由引入子组件
---- Tabs Tabs/Tabs.vue ---- DataTable DreakdownTable/DreakdownTable.vue ---- batchCloseContent BatchCloseContent/BatchCloseContent （暂时不要，先删除） ---- sessionContent SessionContent/SessionContent ---- Message Message/Message.vue

[unaheidi]

router/index.js 没看到哪个代码具体调用了这个index.js，事实是调用了的。想知道怎么实现的

[unaheidi]

created 方法中写了 bus.$on() 代表什么意思呢？

[unaheidi]

Vetur can't find tsconfig.json or jsconfig.json in d:\C-git\5-VUE\vue2024\cts.

为了让 Vetur 生效，即使我们使用了 webpack ，也可以额外增加 jsconfig.json文件

[unaheidi]

在项目代码中实在没有发现哪里哪里还用了.native，于是乎，暂时先在 main.js 加入下面的代码，把错误屏蔽掉。

Vue.config.warnHandler = function(msg) { if (msg !== "The .native modifier for v-on is only valid on components but it was used on \<tr>.") { // eslint-disable-next-line console.error(msg) }
}

https://stackoverflow.com/questions/74884971/the-native-modifier-for-v-on-is-only-valid-on-components-but-it-was-used-on-a

[unaheidi]

上面提到，用了个最戳的办法做了个 mock 数据，是直接修改了源代码，getData 方法里面手写返回值搞定的。

这么做的原因是想快点看到这个前端展示的样子，然后理解这个项目各组件的关系。

既然组件关系已经搞清楚了，其次顺带还把工程里面不要的内容，有把握删的都清理了。 是时候了解 “到底应该怎么mock” 这个内容了。

[unaheidi]

访问 http://localhost:8080/api/whoami 这个请求会转发到 http://localhost:3000/api/whoami 是怎么做到的呢？

startup.js
dev-server.js
config/index.js
src/router/Api.js

[unaheidi]

vue2.0 webpack proxyTable 怎么mock后端的服务？ 先是想着 localhost:8080/api 就mock，但没成功。 然后想着 mock localhost:3000/ 这个后端服务。遇到了 json-server 不支持 --routes 参数的问题 https://github.com/typicode/json-server/issues/1512

[unaheidi]

json-server --watch --routes .\src\mocks\routes.json .\src\mocks\db.json --port 3000

哎呀，命令行的参数一定要搞对，否则参数错了不会有报错，但结果不是预期的 我就曾经把 --routes 写成了 --route

[unaheidi]

怪了，怪了，json-server 如果没有特殊的 routes.json 文件，为啥 http://localhost:3000/api/api/sessionList 与 http://localhost:3000/sessionList 一样，总能返回mock的数据？

看着应该是个bug

[unaheidi]

今天终于mock成功了，纪念一下。 对于线上运行的服务利用开发者工具加个断点，查看http.sessionList(params).then((res) 发现，mock的数据不对，请求的返回应该有content、success 这些字段。

[unaheidi]

发现mock还留了一个问题，对于url请求路径带参数的，不知道应该怎么mock。目前http.sessionList().then((res) 这样不带params的mock 已成功。如果sessionList()改为sessionList(params)，mock又失败了

[unaheidi]

搜json-server资料的时候，发现qunar开源的 yapi

[unaheidi]

终于mock成功了，

1）写一个很简单的web服务A，端口 3000 ，里面用 http-proxy-middleware 转发到 3001 2）写一个mock的web服务B，端口 3001，用 json-server 命令行启动服务。

服务A 用来处理url带params的请求。 服务B 用来mock各种返回的数据。

成功后发现如此简单，可是在成功前，虽然从文心一言获得了代码，因为没理解各项配置的作用，改成自己所需的东西时，就出岔子了。我评估着方法肯定行，就是哪里配置错了，在第三个晚上终于搞定了！！！ 第一个晚上查资料花了2小时，第二个晚上头疼，坐在电脑前花了2小时无进展。第三个晚上就40分钟就搞定了

[unaheidi]

mock好了，新问题又来了，下一步，先把 vue 内部运行机制搞清楚

[unaheidi]

记住InkRipple这个词 InkRipple是一个用于实现涟漪效果的库，通常用于Web开发中的按钮、链接或其他可交互元素上。当用户点击或触摸这些元素时，InkRipple会在点击位置产生一个扩散的涟漪效果，给用户一种视觉上的反馈。

[unaheidi]

为什么vue文件中是  <md-tabs这个，但是 devtools里面看到的是<MdTabs

[unaheidi]

vue的template里面我看到了 md-tabs，但并没有看到 md-whiteFrame 和 md-ink-ripple，为什么 devtools 能看到 MdWhiteFrame 和 MdInkRipple

[unaheidi]

终于把数据呈现的核心流程搞懂了：

1）tabs组件的created钩子函数，执行getData：从后端获得缺省时段的所有会话；formatData；updateTabData。 formatData 乖乖，res.content内容增加了新的字段 updateTabData
handle utils/tabData 这个文件不好理解，大概的意思是获得各个tab的数据。 另外，理解vue工作原理与 updateTabData 没啥关系，这个方法里面的逻辑可以放一边

[unaheidi]

今天是比较“苦”的。。。。。。

[unaheidi]

从调用堆栈来看，updateTabData 反而是非常关键的，收回我上面的话

[unaheidi]

在 Tabs.vue 里面的 tabIndex ，在 DreakDownTable.vue 里面对应 tabType

[unaheidi]

具体选择了哪个tab，是从父组件传递给子组件的，也就是从 Tabs 到 DreakDownTable :tabKey="t.id" :tabType="tabIndex" 然后 DreakDownTable 有 两个和 tab 有关的变量：tabKey 和 tabType，这个tabKey也从父组件传给子组件

当我们在界面切换tab的时候，tabIndex 会随着变化。

[unaheidi]

最底部过滤器 1）输入过滤条件，点击回车后，onUpdateData
2）bus.$emit("data change", data) 。。。。

恍然大悟，核心在 pageData 上，不是组件的data里面任何数据的变化都会触发页面重新渲染的，template里面需要显示的元素，数据变了才会重新渲染。