- 一、前言除了核心功能默认内置的指令 (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 成...
- 前言博主此前是将博客部署在 Github Pages（基于 Github Action）和 Vercel 上的，但是这两种部署方式对于国内用户很不友好，访问速度堪忧。因此将博客迁移到自己的云服务器上，并且基于 Jenkins（一款开源持续集成工具）实现本地推送代码后，自动化集成部署环境云服务器：CentOS 7，OracleJDK 11本地主机：Windows 11 安装配置 Jenkin... 前言博主此前是将博客部署在 Github Pages（基于 Github Action）和 Vercel 上的，但是这两种部署方式对于国内用户很不友好，访问速度堪忧。因此将博客迁移到自己的云服务器上，并且基于 Jenkins（一款开源持续集成工具）实现本地推送代码后，自动化集成部署环境云服务器：CentOS 7，OracleJDK 11本地主机：Windows 11 安装配置 Jenkin...
- 一、前言build.js配置文件是npm run build 命令的入口配置文件，主要用于生产环境。由于这是一个系统配置文件，将涉及很多模块和插件，所以这部分内容我将分多个文章讲解，请关注博主其他文章。// 此文件运行在node环境中，使用webpack的nodejsAPI实现自定义构建和开发流程// npm和node版本检查，请看我的check-versions配置文件相关文章requi... 一、前言build.js配置文件是npm run build 命令的入口配置文件，主要用于生产环境。由于这是一个系统配置文件，将涉及很多模块和插件，所以这部分内容我将分多个文章讲解，请关注博主其他文章。// 此文件运行在node环境中，使用webpack的nodejsAPI实现自定义构建和开发流程// npm和node版本检查，请看我的check-versions配置文件相关文章requi...
上滑加载中
推荐直播
-
华为云IoT开源专家实践分享：开源让物联网平台更开放、易用2024/05/14 周二 16:30-18:00
张俭 华为云IoT DTSE技术布道师
开源，意味着开放、共享、互助、共赢。作为万物上云及各行业数字化的物联网底座，华为云IoT积极拥抱开源，借助行业开源的最佳实践，构建可靠、易用的物联网平台，并通过开放南北向SDK，助力开发者快速构建物联网应用。本期直播，华为云IoT开源专家、物联网平台资深“程序猿”张俭，带你了解华为云IoT的开源生态，并手把手教你玩转开源社区！
去报名 -
企业级数仓迁移工具助您轻松上云2024/05/21 周二 16:30-18:00
Nick 华为云数仓GaussDB(DWS)研发专家
随着云时代的到来，传统数仓已无法满足企业的需求，越来越多的企业选择从传统数仓迁移到云数据仓库，云数仓为企业提供了更低的成本、更灵活极致的体验。本期直播将为您带来企业级数仓搬迁的解决方案，带您一览华为云数仓GaussDB(DWS)提供了哪些迁移方案助力用户实现数据迁移，如何保障迁移后数据的一致性。
去报名 -
华为云开发者日·广州站2024/05/23 周四 14:30-17:30
华为云专家团
华为云开发者日HDC.Cloud Day是面向全球开发者的旗舰活动，汇聚来自千行百业、高校及科研院所的开发人员。致力于打造开发者专属的技术盛宴，全方位服务与赋能开发者围绕华为云生态“知、学、用、创、商”的成长路径。通过前沿的技术分享、场景化的动手体验、优秀的应用创新推介，为开发者提供沉浸式学习与交流平台。开放创新，与开发者共创、共享、共赢未来。
去报名
热门标签