- 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick... 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick...
- 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出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:...
- 在Vue中，应用watch来响应数据的变化，示例代码如下， 一、第一种方式<input type="text" v-model="userName"/> //监听当userName值发生变化时触发watch: { userName (newName, oldName) { console.log(newName) }}第一种方式有一个缺点： 就是当值第一次绑定的时候不会执行监听函数，只有... 在Vue中，应用watch来响应数据的变化，示例代码如下， 一、第一种方式<input type="text" v-model="userName"/> //监听当userName值发生变化时触发watch: { userName (newName, oldName) { console.log(newName) }}第一种方式有一个缺点： 就是当值第一次绑定的时候不会执行监听函数，只有...
- 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有... 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有...
- 一、前言由于数据更改导致的虚拟 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...
- 一、介绍这是一个可以快速回到页面顶部的组件，当系统用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> ... 一、介绍这是一个可以快速回到页面顶部的组件，当系统用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> ...
- Vue 是一个流行的 JavaScript 框架，提供了丰富的功能和工具，用于构建现代化的 Web 应用程序。而网络请求是前端开发中一个非常重要的方面。本文将介绍 Vue 组合式编程中如何使用 Axios 进行网络请求，并结合实例详细说明其使用方法和最佳实践。 1. 简介1.1 AxiosAxios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中进... Vue 是一个流行的 JavaScript 框架，提供了丰富的功能和工具，用于构建现代化的 Web 应用程序。而网络请求是前端开发中一个非常重要的方面。本文将介绍 Vue 组合式编程中如何使用 Axios 进行网络请求，并结合实例详细说明其使用方法和最佳实践。 1. 简介1.1 AxiosAxios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中进...
- 一、跨域通信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...
- 一、Vue 定时器在vue中，有两种定时器，一是浏览器API，window对象上的；另一种就是vue/nodejs封装的，需要引入。import { setInterval, clearInterval } from 'timers'建议使用window对象自带的，因为不容易错。如果一不小心只引入一个，就怎么也清不掉了。import { setInterval } from 'timers... 一、Vue 定时器在vue中，有两种定时器，一是浏览器API，window对象上的；另一种就是vue/nodejs封装的，需要引入。import { setInterval, clearInterval } from 'timers'建议使用window对象自带的，因为不容易错。如果一不小心只引入一个，就怎么也清不掉了。import { setInterval } from 'timers...
- 一、实例介绍有一个div，默认用了v-if隐藏，点击按钮之后，改变v-if的值让他显示出来，并且取到div中的值:<div id=app> <div id="div" v-if="showDiv">我是显示文本</div> <button @click="showAndGetText">获取内容</button ></div><script>var app = new Vue({ e... 一、实例介绍有一个div，默认用了v-if隐藏，点击按钮之后，改变v-if的值让他显示出来，并且取到div中的值:<div id=app> <div id="div" v-if="showDiv">我是显示文本</div> <button @click="showAndGetText">获取内容</button ></div><script>var app = new Vue({ e...
- 一、场景描述在项目开发过程中，应用iframe实现外系统页面嵌套的时候，发现引入其他页面后，页面内容并未刷新加载，经过一番研究，解决方案如下：vm.iframeSrc = iframeSRCif (document.getElementById('iframe')) { setTimeout(() => { document.getElementById(iframeid).conten... 一、场景描述在项目开发过程中，应用iframe实现外系统页面嵌套的时候，发现引入其他页面后，页面内容并未刷新加载，经过一番研究，解决方案如下：vm.iframeSrc = iframeSRCif (document.getElementById('iframe')) { setTimeout(() => { document.getElementById(iframeid).conten...
- 1. 引言Vue.js是一种流行的JavaScript框架，它采用了数据驱动视图的方式进行开发，其中的核心概念之一就是数据双向绑定。数据双向绑定允许开发者通过修改数据状态来自动更新视图，并通过用户输入来更新数据。本文将详细解析Vue数据双向绑定的原理，帮助你更好地理解Vue框架的工作原理。 2. 数据劫持与观察者模式Vue实现数据双向绑定的关键在于数据劫持和观察者模式。 2.1 数据劫持数... 1. 引言Vue.js是一种流行的JavaScript框架，它采用了数据驱动视图的方式进行开发，其中的核心概念之一就是数据双向绑定。数据双向绑定允许开发者通过修改数据状态来自动更新视图，并通过用户输入来更新数据。本文将详细解析Vue数据双向绑定的原理，帮助你更好地理解Vue框架的工作原理。 2. 数据劫持与观察者模式Vue实现数据双向绑定的关键在于数据劫持和观察者模式。 2.1 数据劫持数...
- 前言博主在为 VuePress1.0 博客添加数学公式支持过程中遇到如下问题 问题一在配置诸如 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3 这些插件后遇到Error: Dynamic require of "XXX" is not supported 问题二配置插件 vuepress-plugin-mathjax 成... 前言博主在为 VuePress1.0 博客添加数学公式支持过程中遇到如下问题 问题一在配置诸如 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3 这些插件后遇到Error: Dynamic require of "XXX" is not supported 问题二配置插件 vuepress-plugin-mathjax 成...
上滑加载中
推荐直播
-
华为云码道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 · 零代码、有产出、能带走、可炫耀 · 每课人人动手实操
回顾中
热门标签