1 杰~JIE

尚未进行身份认证

我要认证

WEB开发新人一枚,记录日常开发经历

等级
TA的排名 15w+

Visual Event——在页面中通过鼠标浮动来查看元素绑定的Event及代码

在開發 JS 的時候是否常常遇到,某個按鈕或是元件 Bind 一個 Event,但因為 MVC 架構,或是許多不同的 Modules 在同一頁,造成找不到是誰 Bind,甚至會有同一個元件被 Bind 多次的狀況? 其實還挺困擾的! 還好有個很簡單的套件可以幫忙我們。雖然不是 100% 準確,但還是有參考價值喔!步驟找到 Visual Event 的連結由 SpryMedia 出的 Visual Event,其實使用方式非常簡單,只要到這個網頁 http://www.sprymedia.co.u.

2020-06-04 09:08:33

Vue Webpack 打包优化——路由懒加载(按需加载)原理讲解及使用方法说明

因为Vue 是SPA,所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源,造成网站首页打开速度变慢,降低用户体验。为了解决上面问题,我们需要对Vue实现组件懒加载。本文将对懒加载的实现原理以及使用进行讲解。

2020-05-26 17:04:54

浅谈 Vue 插槽

背景:<child></child> //child是一个组件如上,我们都知道组件的引用就跟常规标签一样。但是组件标签并不能进行如下操作:<child> <p>我是一个组件!</p></child>如果在创建组件时没有使用<slot>插槽,‘<p>我是一个组件!</p>’这句将不会渲染。因为默认情况下,父组件在子组件内套的内容,是不显示的。什么是 <slot>插槽?首先

2020-05-23 12:32:32

浅谈Vue 自定义事件——原理及用法

前言在Vue 中,对HTML的原生事件做了支持。例如:click、focus、change等事件。除了原生事件外,Vue 还允许用户自定义事件。什么是事件?什么是自定义事件?在了解自定义事件前,先来了解什么是事件。事件就是用户对窗口上各种组件的操作。使用事件机制可以实现:当类对象的某个状态发生变化时,系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。来自百度百科—— 事件 (计算机术语)事件是指被程序发现的行为或发生的事情

2020-05-12 14:14:49

Vue 组件间通讯之非父子组件间通讯——事件总线(EventBus)

前言:在Vue中,父子组件的通讯有Vue提供的一套操作方法,常用的借助props、ref等来实现。那非父子组件间的通讯如何实现呢?一般的可以使用vuex来实现。但是,vuex一般处理的是全局的组件状态管理。而且,有些项目根本就没有用到vuex。为此,这里提供另一种组件通讯方式:Vue 事件总线—— EventBus。EventBus的简介EventBus 又称事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件。所

2020-05-12 13:51:19

通过 translate 实现垂直居中与 rotate 的冲突——分析与解决方案

最近,自己尝试使用input+ul去模拟实现select。因为,使用原生的select有着诸多不便。而且,模拟实现select看上去也并不是很困难的事情。但是呢!当你信心满满的时候,往往就会打脸之时。确实,功能、效果、样式都很会实现了。可是,下三角的旋转却出现了问题。因为我比较喜欢通过position: absolute去实现垂直居中。这次我也是这么做了。然后我就悲催的发现,下三角的旋转并不是根...

2020-05-05 08:45:29

Vue CLI4.0 webpack配置属性——devServer

devServerType: Object作用通过devServer,可以在NodeJs架设起临时的服务器用于项目的运行与调试。用法module.exports = { // webpack-dev-server 相关配置 devServer: { open: true, inline: true, host: '0.0.0.0', // 允许外部ip...

2020-04-30 16:35:17

Vue CLI 4.0 webpack属性讲解以及创建vue.config.js

为什么要了解Vue CLI 4.0 webpack配置?使用Vue.js 必然需要使用Vue CLI;使用Vue CLI,不可避免的会涉及到webpack的使用。而webpack最关键的地方就是配置了。Vue CLI 是基于webpack构建起来的Vue手脚架。俗话说得好,磨刀不误砍柴工。想要提高在Vue上的编码速度,必然需要一个好的Vue CLI;想要拥有一个好的Vue CLI,肯定离不开好的...

2020-04-29 14:16:10

Vue CLI4.0 webpack配置属性——productionSourceMap

productionSourceMapType: booleanDefault: true用途:设置生产环境的 source map 开启与关闭。用法:module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 assetsDir: './assets', indexPath: ...

2020-04-29 09:21:05

Vue CLI4.0 webpack配置属性——css.sourceMap

css.sourceMapType: booleanDefault: false用途设置是否开启 css 的 sourse map功能。css 的 sourse map作用类似与 js 的 sourse map。注意:开启可能会影响构建性能。用法module.exports = { publicPath: './', // 基本路径 outputDir: 'dist' /...

2020-04-29 09:11:51

Vue CLI4.0 webpack配置属性——css.extract

css.extractType: boolean | ObjectDefault: 生产环境下是 true,开发环境下是 false官方文档说明是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shado...

2020-04-29 09:04:44

Vue CLI4.0 webpack配置属性——css.requireModuleExtension、css.loaderOptions

文章目录css.requireModuleExtension用途用法css.loaderOptions用途用法css.requireModuleExtensionType: booleanDefault: true用途用于设定,是否只有 *.module.[ext] 结尾的文件才会被视作CSS Modules 模块。默认情况下,只有文件名中含有.modules的CSS相关文件还能使...

2020-04-29 09:00:33

Vue CLI4.0 webpack配置属性——crossorigin

crossoriginType: stringDefault: undefined用途官方文档:设置生成的 HTML 中 <script> 和 <link rel="stylesheet"> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/ind...

2020-04-29 08:51:48

Vue CLI4.0 webpack配置属性——lintOnSave、configureWebpack、chainWebpack、parallel

目录lintOnSave用途用法configureWebpack官方文档说明:用途用法chainWebpack用途用法lintOnSaveType: boolean | 'warning' | 'default' | 'error'Default: true用途设置是否在开发环境下每次保存代码时都启用 eslint验证。value:false:关闭每次保存都进行检测true:...

2020-04-29 08:49:22

Vue CLI4.0 webpack配置属性——filenameHashing

filenameHashingType: booleanDefault: true用途设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。用法module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 assetsDir: './assets', index...

2020-04-28 17:57:49

Vue CLI4.0 webpack配置属性——outputDir、assetsDir、indexPath

outputDirType: stringDefault: dist作用:设置项目打包生成的文件的存储目录,可以是静态路径也可以是相对路径。注意:相对路径是相对于项目文件当前的根路径。写法:module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录}...

2020-04-28 17:40:00

Vue CLI4.0 webpack配置属性——publicPath

publicPathType: stringDefault: '/'官方文档说明:部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默认情况下,Vue CLI 会假设你...

2020-04-28 17:35:45

浅谈CSS Modules以及CSS Modules在Vue.js上的使用

前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules。那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末。本文将从什么是CSS Modules、CSS Modules诞生的原因、怎样使用CSS Modules这三个角度去讲解CSS Modules。另外,如果你觉的本文写得不够好,我在文末也附上了前辈大佬们对CSS ...

2020-04-28 09:44:18

VSCode 前端常用开发插件--推荐

插件名用处Auto Close Tag自动添加HTML/XML 闭合标签Auto Rename Tag自动同步重命名开始标签和闭合标签Beautify代码格式化工具Bootstrap 3 Snippets可快速生成 Boostrap3 代码片段Bracket Pair Colorizer根据不同缩进给括号上色Browser Preview...

2020-04-26 10:53:50

浅谈Vue的style scoped

style scoped的作用在使用Vue-Cli 开发时,我们都知道,在组件的<style></style>加上 scoped属性,可以让<style></style>里的样式只在当前组件生效。那,这是如何实现的呢?Vue 对 scoped的渲染规则对于所有的 Vue 组件,只要设置了<style scoped></st...

2020-04-24 17:27:22

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 技术圈认证
    技术圈认证
    用户完成年度认证,即可获得
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 分享达人
    分享达人
    成功上传6个资源即可获取