问题大致如下： 为什么浏览器向后端发起请求时，就知道要找的是哪一个接口？采用了什么样的匹配规则呢？ SpringBoot 后端是如何存储 API 接口信息的？又是拿什么数据结构存储的呢？...matches.isEmpty()) { // 这里也取出第一个，当没有多个匹配时，直接使用这个 Match bestMatch = matches.get(0);...检查方法所属的类有没有@RequestMapping注解 将类层次的RequestMapping和方法级别的RequestMapping结合 (createRequestMappingInfo) 当请求到达时...写到这里基本可以回答完文前所说的三个问题了。 他问的是为什么浏览器在向后端发起请求的时候，就知道要找的是哪一个API 接口，你们 SpringBoot 后端框架是如何存储API接口的信息的？...第三个答案:我们之前看到存储信息时,都是 HashMap 相关的类来存储的,那么我们可以知道它底层的数据结构就是 数组+链表+红黑树 三、后语 若不是小伙伴提起那三问，我想我也不会有如此兴致，去一步一步
typescript、css预处理器语法（less、sass）等或者因为浏览器因为版本底不支持新的内置函数，需要将其转换及打包成浏览器支持格式 模块合并打包 代码转换 文件优化 接下来介绍下vue不同版本脚手架...） webpack.base.conf.js （ webpack的基础配置文件，前两者都需要依赖它 ） 针对不同环境的配置，运行不同的配置文件 （1）webpack.base.conf.js 结构...entry - 让 webpack 知道使用哪个模块，来作为构建其内部依赖图的开始 output - 让 webpack 知道在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ....less-loader：处理 less 文件，并将其编译为 css sass-loader：处理 sass、scss 文件，并将其编译为 css postcss-loader：// 解析CSS文件并且添加浏览器前缀到...， 当编译器要求时，将 HTML 最小化 plugins - 通过插件引入来处理，用于转换某种类型的模块，可以处理：打包、压缩、重新定义变量等 webpack官方文档链接
typescript、css预处理器语法（less、sass）等或者因为浏览器因为版本底不支持新的内置函数，需要将其转换及打包成浏览器支持格式 模块合并打包 代码转换 文件优化 接下来介绍下vue不同版本脚手架...entry - 让 webpack 知道使用哪个模块，来作为构建其内部依赖图的开始 output - 让 webpack 知道在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ....less-loader：处理 less 文件，并将其编译为 css sass-loader：处理 sass、scss 文件，并将其编译为 css postcss-loader：// 解析CSS文件并且添加浏览器前缀到...， 当编译器要求时，将 HTML 最小化 复制代码 plugins - 通过插件引入来处理，用于转换某种类型的模块，可以处理：打包、压缩、重新定义变量等 webpack官方文档链接 ?...） pluginOptions - 第三方插件配置 configureWebpack - webpack 配置 通过process.env.NODE_ENV 去区分环境不同执行不同的命令 附上Vue-cli
因为浏览器不知道我们什么时候使用哪个路由.所以我们还需要使用不同的标签,使我们的URL能发生改变 router-link用于显示标签和内容 router-view决定渲染时的位置,用于占位 App.vue...router-link是默认将内容渲染成a标签的 假如我现在将它换一个位置 显示出来的就是这样的 下面是一点细节问题,就是当我们打开页面时,应该自动打开首页,而不是需要我们手动选择...当对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称 在进行高亮显示的导航菜单或者tabbar...时,会使用到该类 但是通常不会修改类的属性,会直接使用默认的router-link-active即可 它的需求可能是这种: 点击了哪个按钮,就给哪个按钮变个颜色 现在给这个类添加样式:...“壹伴编辑器”提供技术支持 路由懒加载 当打包构建应用时,JavaScript包会变得很大,影响页面加载 如果我们能把不同路由对应的组件分割成不同代码块,然后当路由被访问的时候才加载对应组件
一、vue实例 1.创建vue实例 一个vue实例应该通过new Vue来创建根实例，所有的 vue 组件其实都是 vue 实例 var vm = new Vue({ ... }) 当一个实例被创建时...= 2 data.a = 3 // vm.a = 3 当数据改变时，视图也会重新渲染，如果在vue实例被创建后，又添加了一个新的property，则不会被加入到响应式系统中 如果一开始就知道后面会添加一个...dom，更新dom等 在这个过程中会运行一些叫做生命周期的钩子函数，可以在不同阶段添加自己需要的代码 比如created钩子可以用来表示一个实例被创建之后执行的代码 new Vue({ data:...当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v-前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。... 它们看起来可能与普通的 HTML 略有不同，但:与@对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。
这相当于 Chrome 中的 “TypeError：”undefined“isnotafunction” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。...因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。...ReferenceError: event is not defined 当您尝试访问未定义的变量或超出当前作用域的变量时，会引发此错误。 您可以在 Chrome 浏览器中测试。 ?...Vuex 注入 Vue 生命周期的过程（完成） 学习 Vue 源码的必要知识储备（完成） 浅析 Vue 响应式原理（完成） 新老 VNode 进行 patch 的过程 如何开发功能组件并上传 npm 从这几个方面优化你的...Vue 项目 从 Vue-Router 设计讲前端路由发展 在项目中如何正确的使用 Webpack Vue 服务端渲染 Axios 与 Fetch 该如何选择
25.absolute的containing block计算方式跟正常流有什么不同？ 26.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？...62.模拟 localStorage 时如何实现过期时间功能? 63.json格式如何去重，排序? 64.你知道立即执行函数有几种写法? 65.a == ('1'||'2'||'3') ?...95.介绍一下es6的map，set? 96.怎么使css样式只在当前组件中生效? 97.你知道vue2.0兼容IE哪个版本以上吗？ 98.vue组件会在什么时候下被销毁?...132.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？ 133.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？...170.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
，而商品多了以后，肯定要进行分类，并且不同的商品会有不同的品牌信息，我们需要依次去完成：商品分类、品牌、商品的开发。...其中/api是网关前缀，/item是网关的路由映射，真实的路径应该是/category/list请求参数：pid=0，根据tree组件的说明，应该是父节点的id，第一次查询为0，那就是查询一级类目返回结果...根据前面tree组件的用法我们知道，返回的应该是json数组：[ { "id": 74, "name": "手机", "parentId": 0,...：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段...因此以后所有用axios发起的请求，都会以这个地址作为前缀。通过Vue.property.$http = axios，将axios赋值给了 Vue原型中的$http。
这个过程被称为“差异算法” 执行DOM操作，应用差异 当Vue运行重新计算虚拟DOM时，它会得到一组描述如何更新DOM的指令。这些指令告诉Vue应该在哪里插入、删除或修改元素。...独立于平台：虚拟DOM与浏览器无关，也不依赖于任何特定的用户界面库或框架，因此可在不同平台和环境中使用。...当Vue处理一个含有v-for的元素时，Vue会重复使用相同的DOM元素，而不是每次都新建一个DOM元素。...为了避免出现问题，当Vue使用v-for指令渲染列表时，每个渲染出来的DOM元素都需要一个唯一的标识符。当数据发生变化时，Vue通过key来判断哪个元素是新的、哪个元素被删除了、哪个元素被移动了。...设置key属性可以让Vue跟踪哪些元素已经被添加、更新或者删除，从而减少DOM操作的次数。如果没有设置key属性，Vue可能会错误地认为两个不同的元素是相同的，从而导致DOM渲染错误。
Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。...DOM 的操作比 DOM 更快； 总之，一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作 你的知道浏览器的虚拟DOM与真实DOM的区别...Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？...但实际用vue开发时，对于响应式数组，使用push、splice、pop等方法改变数组时，页面会及时体现这种变化，那么vue中是如何实现的呢？...标准有：.get .post .put .delete RESTful架构设计原则(不同公司具体细节可能不同)： 1. 在接口命名时应该用名词，不应该用动词，因为通过接口操作到是资源。
最终我希望 React 受到 Vue.js 所做的这些事情的启发，并且也开始这样做。 不同的理念 Vue.js 和 React 之间的主要区别之一是它们如何称呼自己。...在 React 中，你必须知道这个库的存在，然后安装它。 在 Vue.js 中，这只是另一个内置特性。...来自文档： 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。...指令 v- 是你在 Vue.js 模板中使用的“带有前缀的特殊属性”。...这意味着，如果你曾经用普通JS写过一个表单，你将有更多关于它如何工作的知识，并能够正确地编码它。与Vue.js不同，Vue.js只是将所有用法抽象出来。
，也不会报 404 方案题：不同前端技术栈的项目，如何实现一套通用组件方案？...，window.history 对象在编写时可不使用 window 这个前缀。...时浏览器才会刷新 这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错 3.history.replaceState replaceState...但实际用vue开发时，对于响应式数组，使用push、splice、pop等方法改变数组时，页面会及时体现这种变化，那么vue中是如何实现的呢？...）： 在接口命名时应该用名词，不应该用动词，因为通过接口操作到是资源。
因此当你切换到了不同的上下文时，要确保this 指向一个可用的 component 变量。...* 将组件 this 赋值给变量 component 可用让开发者清楚的知道任何一个被使用的地方，它代表的是组件实例。 HOW?...* 当遇到 props 和 events 难以实现的功能时，通过 this.$refs 来实现。 * 当需要操作 DOM 无法通过指令来做的时候可使用 this.....该模块使用 noUiSlider 来实现夸浏览器和 touch 功能的支持。...如需要自定义 slider 的样式可参考 noUiSlider 文档 提供组件demo 添加 index.html 文件作为组件的 demo 示例，并提供不同配置情况的效果，说明组件是如何使用的 WHY
我们将在需要时介绍几个 Vue.js 概念，并介绍为什么要使用它们。 TL;DR: 这篇文章详细的介绍了如何使用 vue.js 和为什么使用 vue.js 。...然后，打开/src/main.js并调整现有的代码： 最后，添加一些HTML代码到你的Rating.vue文件： 现在看看你的浏览器中的页面，你应该看到列表。...当 star 处于活动状态时，我们需要在 元素上添加 active 类。在我们的项目下，这意味着每个 的索引小于 stars 应该有 active 类。...当你构建一个 Vue.js 组件时，你不应该把它看作是分离的 HTML/CSS/JS，而应该是一个使用多种语言的组件。...当项目在浏览器中开启服务或编译生产时，所有的 HTML 和指令都被编译成普通的 JavaScript。如果您检查已渲染的 HTML，您将看不到您的指令的任何标志，也没有任何 onclick 属性。
当收到变量改变的通知时 • vue会快速遍历虚拟DOM树，找到受影响的元素，调用已经封装好的DOM函数，只更新页面中受影响的元素。不受影响的元素，不会改变 为什么: • 1....• 在CSS中必须添加: [v-cloak] { display: none; } • 用属性选择器找到所有带有v-cloak的元素，让其暂时隐藏 • 当new Vue()加载完成，就会找到页面中所有v-cloak...其实会自动根据当前所在的不同表单元素,切换不同的属性绑定 监视函数: 什么是: 在模型数据发生变化时，自动执行的函数何时: 只要希望在模型数据变化时，立刻执行一项操作时，需要监视函数监控模型变量如何:...DOM元素执行原生的DOM操作 }})强调: 因为指令不是只给一个页面或一个功能添加的,应该是所有Vue的对象都可使用.所以,应该是数组Vue大家庭的.所以创建时,要用Vue.directive()来创建...路由懒加载问题: webpack如果把所有的js文件都打成一个js文件，包会很大，严重影响页面首屏加载速度解决懒加载 把不同路由对应的组件分割成不同的代码块 当路由被访问时，才动态加载对应组件文件 如何
作为一个仅仅使用过 Vue 的开发者，其实我不会去在意 Vue 和 React 哪个好，这种比较没什么意义，重要的是哪个适合自己/团队，能为自己/团队实现价值。...以前我关注的是，Vue 的这个特性是怎么实现的，那现在的关注的是，为了达到这个目的，不同框架，会如何进行设计？...后来我想了想，其实这两个说法，其实应该都是对的，只是角度不同：UI = f(state, UI描述)，是从开发者编码时，开发模式的角度进行描述，说的是，开发者提供 state 和 UI 描述，框架渲染...，知道需要更新哪些元素根据 UI 变化，执行具体宿主（如浏览器）的 API。...例如：js 的对象可以复制、修改、导入导出等，用 js 变量存储的 jsx 内容，无法判断是否为静态内容，因为可能在不知道哪个地方就被修改了，无法做静态标记。
5.实现商品分类查询 商城的核心自然是商品，而商品多了以后，肯定要进行分类，并且不同的商品会有不同的品牌信息，其关系如图所示： ?...当有treeData属性时，就不会触发url加载 远程请求返回的结果格式： [ { "id": 74, "name": "手机", "parentId...handleDelete 当删除节点时触发，isEdit为true时有效 被删除节点的id handleClick 点击某节点时触发 被点击节点的node对象,包含完整的node信息 完整node...其中/api是网关前缀，/item是网关的路由映射，真实的路径应该是/category/list 请求参数：pid=0，根据tree组件的说明，应该是父节点的id，第一次查询为0，那就是查询一级类目...根据前面tree组件的用法我们知道，返回的应该是json数组： [ { "id": 74, "name": "手机", "parentId":
（当元素首次被插入文档DOM时，被调用） -> disconnectedCallback(当 custom element从文档DOM中删除时，被调用) 拓展： 具体demo可以fork下这个仓库： 链接...如下所示 上图的属性配置中name是微应用的名称配置，url是子应用页面地址配置，其他则是各个生命周期函数的定义 资源地址自动补全：我们在基座加载微应用的时候，当微应用涉及图片或其他资源加载时，如果访问路径是相对地址...iframe的感觉，然后该子应用的css样式，都多了一个前缀 micro-app[name=vue2]。...这是利用标签的name属性为每个样式添加前缀，将子应用的样式影响禁锢在当前标签区域，避免各个微应用之间的样式冲突。...: CSS @media 媒体属性查询的规则 CSSRule.SUPPORTS_RULE： CSS @support 可以根据浏览器对CSS特性的支持情况来定义不同的样式的规则 最后将转化成功的style
应该是有一个契机来开始整套流程的，或者某几个流程的。 契机就是当 window.location.href 匹配到 url 时，开始走对应子 App 的这一套生命周期嘛。...个人猜测是因为 single-spa 希望主应用应该就一个空壳子，只需要管内容要放在哪个地方，所有的功能、交互都应该交由 index.html 来统一管理。 当然，这仅仅是一种理念，可以完全不遵循它。...子应用的分类 上面我们说到了，当 url 匹配 activeWhen 参数时，就会执行对应子应用的生命周期。那这样就相当于子应用和 url 绑定在了一起了。...在子应用 mount 时添加子应用的 CSS，在 unmount 时删除子应用的 CSS。...这个包来快速添加前缀 single-spa-leaked-globals 在子应用 mount 时给 window 对象恢复/添加一些全局变量，如 jQuery 的 $ 或者 lodash 的 _，在
ES2021，第 12 版引入了 用于字符串的 replaceAll 方法； Promise.any，一个 Promise 组合器，当输入值被满足时短路； AggregateError，一种新的...为了避免重复，Babel 有一个名称规范化阶段会在加载项目时自动添加这些前缀。...这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。.../babel-plugin-jsx": "^1.0.3", "@vue/babel-preset-jsx": "^1.1.2" } 注意：@vue/babel-preset-app 版本不同，对应的...@babel/preset-env 不同，因此包含的默认规则必然不同。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
