- 1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面。在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就需要用到前端路由。在Vue.js中，可以使用官方的路由管理器Vue Router。Vue Router需要单独下载，可以使用CDN方式应用Vue Router<script src="h... 1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面。在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就需要用到前端路由。在Vue.js中，可以使用官方的路由管理器Vue Router。Vue Router需要单独下载，可以使用CDN方式应用Vue Router<script src="h...
- 一、应用场景有时候我们会看到如下代码：在我们使用vue进行开发的过程中，可能会遇到这样一种情况：当创建vue实例后，再次给对象赋值时，发现数据并不会自动更新到视图上去； 当我们去阅读vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。data () { return { studen... 一、应用场景有时候我们会看到如下代码：在我们使用vue进行开发的过程中，可能会遇到这样一种情况：当创建vue实例后，再次给对象赋值时，发现数据并不会自动更新到视图上去； 当我们去阅读vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。data () { return { studen...
- 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据... 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据...
- 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick... 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick...
- 为Vue3组件库引入unocss 为Vue3组件库引入unocss
- 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra... 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra...
- 一、前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 二、如何声明自定义指令？正如vue全局组件和局部组件一样，vue指令也分全局自定义指令和局部自定义指令。// demoDirective.jslet Opt = { bind:function(el,bind... 一、前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 二、如何声明自定义指令？正如vue全局组件和局部组件一样，vue指令也分全局自定义指令和局部自定义指令。// demoDirective.jslet Opt = { bind:function(el,bind...
- 一、前言Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:... 一、前言Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:...
- 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。 二、Watch当你需要在数据变化... 一、Computed可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性，具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。例如，当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下直接从缓存中读取。 二、Watch当你需要在数据变化...
- 一、前言由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子函数。无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。有个值得注意的地方，举例说明：例子<template> <div> <div v-for="(item, in... 一、前言由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子函数。无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。有个值得注意的地方，举例说明：例子<template> <div> <div v-for="(item, in...
- 一、跨域通信1.子向父通信parent.html// 页面销毁前，务必去除监听器，否则会造成资源泄露！beforeDestory () { window.removeEventListener('message', this.listenerFun)}mounted() { window.addEventListener('message',this.listenerFun)}method... 一、跨域通信1.子向父通信parent.html// 页面销毁前，务必去除监听器，否则会造成资源泄露！beforeDestory () { window.removeEventListener('message', this.listenerFun)}mounted() { window.addEventListener('message',this.listenerFun)}method...
- 实例在控制台上输出信息：console.info("Hello Runoob!");定义和用法console.info() 方法用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。语法console.info(message)浏览器支持表格中的数字表示支持该方法的第一个浏览器版本号。方法console.i... 实例在控制台上输出信息：console.info("Hello Runoob!");定义和用法console.info() 方法用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。语法console.info(message)浏览器支持表格中的数字表示支持该方法的第一个浏览器版本号。方法console.i...
- 一、前言karma.conf.js 配置文件是 npm run unit 命令的入口配置文件，主要用于单元测试。这条命令的内容如下cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run这条命令中的 cross-env 是跨平台设置环境变量，在命令行中设置环境变量加上这句话就是了。karma star... 一、前言karma.conf.js 配置文件是 npm run unit 命令的入口配置文件，主要用于单元测试。这条命令的内容如下cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run这条命令中的 cross-env 是跨平台设置环境变量，在命令行中设置环境变量加上这句话就是了。karma star...
- 原文链接 代码介绍前端代码：https://github.com/Snowstorm0/token-login-vue后端代码：https://github.com/Snowstorm0/token-login-spring使用 Spring+Vue 实现 token 登录、退出、访问拦截等功能。 1 部署后端 1.1 生成 jar 包使用 Idea 的 maven 进行打包。先双击 cle... 原文链接 代码介绍前端代码：https://github.com/Snowstorm0/token-login-vue后端代码：https://github.com/Snowstorm0/token-login-spring使用 Spring+Vue 实现 token 登录、退出、访问拦截等功能。 1 部署后端 1.1 生成 jar 包使用 Idea 的 maven 进行打包。先双击 cle...
- 原文链接代码地址：https://github.com/Snowstorm0/vue-login-mock 创建项目打开cmd，输入ui命令：vue ui若没有反应，可能是版本太低，需要卸载后重装：npm uninstall vue-cli -g #卸载npm install @vue/cli -g #安装执行ui命令成功后，会出现提示：🚀 Starting GUI…🌠 R... 原文链接代码地址：https://github.com/Snowstorm0/vue-login-mock 创建项目打开cmd，输入ui命令：vue ui若没有反应，可能是版本太低，需要卸载后重装：npm uninstall vue-cli -g #卸载npm install @vue/cli -g #安装执行ui命令成功后，会出现提示：🚀 Starting GUI…🌠 R...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签