- 一、拓展阅读在前端应用中,窗口间通信应用场景很多,比如弹出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...
- 一、钩子函数钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。 二、Vue 中的钩子函数对于前端来说,钩子函数就是指在所有函数执行前,优先执行了的函数,即 钩住 感兴趣的函数,只要它执行,函数就先执行。export default ... 一、钩子函数钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。 二、Vue 中的钩子函数对于前端来说,钩子函数就是指在所有函数执行前,优先执行了的函数,即 钩住 感兴趣的函数,只要它执行,函数就先执行。export default ...
- 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ... 一、 前言vue使用watch来响应数据变化。下面代码是watch的一种简单用法:<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... ...
- 一、前言computed区别于method的两个点:computed是属性调用,而methods是函数调用;computed带有缓存功能,而methods不是;下面看一个具体例子:<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te... 一、前言computed区别于method的两个点:computed是属性调用,而methods是函数调用;computed带有缓存功能,而methods不是;下面看一个具体例子:<!--HTML部分--><div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="te...
- 一、前言Vuex提供了state状态统一管理树,开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然,也可以在接收原值的基础上对这个值做出一些改造,如:computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是,如果其他组件也要使用这种改造方式去改变这个... 一、前言Vuex提供了state状态统一管理树,开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然,也可以在接收原值的基础上对这个值做出一些改造,如:computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }}但是,如果其他组件也要使用这种改造方式去改变这个...
- 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is,可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分:新建 vue 实例 “app”,这个实例的 components 里面,有3个组件,这些组件都有各自的模板。分别是 acomp,bcomp,ccomphtml 代码部分:使用vue 内置组件... 一、前言<component>元素是vue 里面的内置组件。在<component>里面使用 :is,可以实现动态组件的效果。 二、示例解析下面例子创建一个包含多子组件的 vue 实例。vue代码部分:新建 vue 实例 “app”,这个实例的 components 里面,有3个组件,这些组件都有各自的模板。分别是 acomp,bcomp,ccomphtml 代码部分:使用vue 内置组件...
上滑加载中
推荐直播
-
华为云码道Skill实战与极速交付,智能开发全链路实战2026/07/22 周三 19:00-21:00
王一男-华为云码道产品规划专家;李炎-华为云码道产品专家;姜浩-华为云HCDG核心组成员
直播深度解读华为云码道6月产品新特性,从Skill市场安装专家技能,带你零距离体验从需求,开发,审查,重构全链路闭环的开发过程。从零构建并交付一个完整项目,让您体验从代码提交到服务上线的“极速”之旅。
回顾中 -
聚开发者之力,创具身新未来2026/07/23 周四 15:00-17:00
张豪杰/程文/王军/刘新春/黄钦开 /张晓天
本次华为云具身智能开发平台CloudRobo培训面向具身智能开发者,带您全流程体验机器人本体R2C小时级接入、环境重建与轨迹生成仿真数据生产、PB级数据管理、数据评测、模型训推、强化学习和Benchmark一键评测等功能,并体验业界主流具身模型应用。
回顾中 -
用码道,让你的AI作品三步上朋友圈2026/08/04 周二 19:00-20:00
林华鼎-华为云AI开发者运营负责人
从入门 · 到做AI应用 · 到企业级开发。不教编程,只教用AI · 零代码、有产出、能带走、可炫耀 · 每课人人动手实操
回顾中
热门标签