- 博客(87)
- 资源 (3)
- 收藏
- 关注
原创 JavaScript中的this
3.apply/call,改变this指向。2.预编译函数this,指向window。4.构造函数的this,指向实例对象。1.全局this,指向window。
2024-08-19 17:41:23
110
原创 HTML浏览器缓存(Browser Cache)
介绍:浏览器缓存是Web缓存中最直接、最常见的一种形式。当浏览器首次请求某个资源时,如果服务器响应中包含了缓存控制指令(如Cache-Control、Expires等),浏览器就会将这些资源存储在本地缓存中。后续请求相同资源时,如果缓存未过期,浏览器将直接从缓存中加载资源,而无需再次向服务器发起请求。浏览器缓存分为两种:强制缓存和协商缓存。
2024-08-14 15:06:27
331
原创 JavaScript中的Truthy & Falsy值以及等号判断
obj.b==null相当于obj.b === null || obj.b ===undefined的简写。
2024-08-10 12:06:06
162
原创 JavaScript之typeof运算符与instanceof运算符
代码解释:这里的空数组[]、空对象{} ,为啥他们在使用 typeof 时,返回值也是 object呢?因为这里的 返回结果object指的是引用数据类型。空数组、空对象都是引用数据类型 Object。备注 1:为啥 typeof null的返回值也是 object 呢?因为 null 代表的是空对象。备注 2:typeof NaN的返回值是 number,上一篇文章中讲过,NaN 是一个特殊的数字。typeof()表示“获取变量的数据类型”,返回的是类型值,该值是字符串类型。
2024-07-30 19:53:35
232
原创 && 与 ||
使用 || ,如果第一个条件为false,则继续往下走,判断后面的条件,直到为true或最后一个值为止,返回当前值。使用&& ,如果第一个条件为true,则继续往下走,判断后面的条件,直到为false或最后一个值为止,返回当前值。
2024-07-27 11:31:04
208
原创 Vue3 中的几个坑,你都见过吗?
异步组件以前是通过将它们包含在方法中来声明的。Vue3 中需要使用 defineAsyncComponent 来声明异步组件。每个框架都有学习曲线,Vue3 相对 Vue2 更加陡峭,在框架切换之间也会有一定的学习成本。但 Vue3 组合式 API 相对 Vue2 选项式 API 确实更加简洁易用。如果您在使用过程中有什么疑问,也欢迎留言交流。
2023-09-11 15:33:51
294
转载 程序员提高效率的 10 个方法
想想我们在白天工作的时候,其实有很多时间都是被无效浪费的,如果我们给自己强制设定下班时间,创新、改变工作方式,高效率、高质量、高密度的完成工作,那是否就可以减少加班,让我们有更多的自由时间去学习新的知识技术,进而又提高我们的工作效率,形成一个正向循环。因为早晨是大脑的黄金时间,经过一晚上的睡眠,大脑经过整理、记录、休息,此时的状态是最饱满的,适合专注度高的工作,比如编程、学习外语等,如果把时间浪费在开会、刷手机等低专注度的事情上,那么就会白白浪费早上的价值。
2023-09-05 10:20:21
121
转载 npm 设置和取消代理的方法
设置代理 npm config set proxy=http://127.0.0.1:8087 npm config set registry=http://registry.npmjs.org关于http经过上面设置使用了http开头的源,因此不需要设http_proxy了,否则还要加一句 npm config set https-proxy http://server:port代理用户名和密码 npm config set proxy http://username:password@
2022-05-21 16:34:31
1043
原创 解构的应用
解构的作用:可以让以下这三行代码变成一行:let arr = ['Ilya', 'Kantor']let firstName = arr[0]let surname = arr[1]变成:let [firstName, surname] = ['Ilya', 'Kantor']Array Destructuring1.可以跳过赋值元素// second element is not neededlet [firstName, , title] = ["Julius", "Caesar
2020-09-13 18:29:25
320
1
转载 简单的 VSCode 插件离线安装方法
一、引言最近想要使用 VSCode 来进行项目的开发工作,无奈工作机上无法上网。这就涉及到了相关插件的离线安装的问题。在参考了 VSCode 插件离线安装 这篇博客的方法之后,我成功离线安装了插件。可是令我惊奇的事情是:可能是 VSCode 社区了解到了我们离线安装插件的需求,现在在插件的页面上,已经有了下载链接了,也就是不用我们再去手动组下载链接了。那么我们离线安装 VSCode 插件的步骤将会大大减少。二、离线安装 VSCode 插件接下来,我来总结下 VSCode 插件离线安装的步骤:
2020-09-06 15:25:50
831
原创 slice,splice,split区别和作用
slice(start,[end])slice(start,[end])方法:该方法是对数组进行部分截取,该方法返回一个新数组,参数start是截取的开始数组索引,end参数等于你要取的最后一个字符的位置值加上1(可选)。包含了源函数从start到 end 所指定的元素,但是不包括end元素,比如a.slice(0,3);如果出现负数就把负数与长度相加后再划分。slice中的负数的绝对值若大于数组长度就会显示所有数组若参数只有一个,并且参数大于length,则为空。如果结束位置小于起始位置,则返
2020-08-30 14:29:25
616
原创 js使用protobuf——支持web端交互使用
ProtoBuf简介Protocol Buffer的简称。Google旗下的一款平台无关,语言无关,可扩展的序列化结构数据格式,适合用于数据存储,作为不同应用、语言之间相互通信的数据交换格式,序列化后的数据为二进制数据(pb格式的数据),类比XML、JSON。protobuf最先支持C++ C# Go JAVA Python PHP语言,最近发布的代码包又支持了JavaScript,今天就来谈下,js怎么使用protobuf。官网地址:https://developers.google.com/pro
2020-08-28 20:59:37
4603
原创 Vue CLI配置指南(6)构建目标 vue-cli-service build & 部署
当你运行 vue-cli-service build 时,你可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件1.应用2.库Vue vs. JS/TS 入口文件3.Web Components 组件...
2020-08-26 18:35:59
3815
原创 Vue CLI配置指南(5)环境变量和模式
你可以替换你的项目根目录中的下列文件来指定环境变量:.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入,但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略一个环境文件只包含环境变量的“键=值”对:FOO=barVUE_APP_SECRET=secret被载入的变量将会对 vue-cli-s
2020-08-26 18:28:32
856
原创 Vue CLI配置指南(4)webpack 相关
修改webpack有两种方式1.简单的配置方式警告2.链式操作 (高级)修改 Loader 选项添加一个新的 Loader替换一个规则里的 Loader修改插件选项3.审查项目的 webpack 配置4.以一个文件的方式使用解析好的配置1.简单的配置方式调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象:// vue.config.jsmodule.exports = { configureWebpack: {
2020-08-26 18:10:13
1050
原创 Vue CLI配置指南(3)CSS 相关
引用静态资源所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。预处理器你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成
2020-08-26 17:48:08
989
原创 Vue CLI配置指南(2)HTML 和静态资源
HTMLIndex 文件public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中,资源链接会被自动注入。另外,Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。Preload<link rel=“preload”> 是一种 resource hint,用
2020-08-26 17:35:36
864
原创 Vue CLI配置指南(1)
一、何为CLICLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。二、何为CLI 服务CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev
2020-08-25 22:23:13
1541
原创 Webpack(7)HMR模块热替换
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。HMR 不适用于生产环境,这意味着它应当只在开发环境使用。启用 HMR启用此功能实际上相当简单。而我们要做的,就是更新 webpack-dev-server 的配置,和使用 webpack 内置的 HMR 插件。const path = require('path'); const HtmlWebpackPlugin = requ
2020-08-23 22:39:13
156
1
原创 Webpack(6)Plugins插件
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上!插件目的在于解决 loader 无法实现的其他事。想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一
2020-08-23 22:16:30
161
1
原创 Webpack(5)loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。示例例如,你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转
2020-08-23 21:54:04
668
1
原创 Webpack(4)Mode模式
告知 webpack 使用相应模式的内置优化,值有两个:development 或 production 之中的一个在配置中提供 mode 选项:module.exports = { mode: 'production'};或者从 CLI 参数中传递:webpack --mode=production支持以下字符串值:选项描述developmentright-aligned 会将 process.env.NODE_ENV 的值设为 development。启用 N
2020-08-23 21:31:23
448
1
原创 Webpack(3)Output输出
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程。注意,即使可以存在多个入口起点,但只指定一个输出配置。在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:filename 用于输出文件的文件名。目标输出目录 path 的绝对路径。单入口
2020-08-23 21:20:12
464
1
原创 Webpack(2)Entry入口
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src对象语法const config = { entry: { app: './src/app.js', vendor
2020-08-23 21:02:31
526
1
原创 Webpack 打包(1)总览
五个核心概念:入口(entry)输出(output)loader插件(plugins)模式(mode)一个完整的webpack.config.js 示例:const path = require('path');module.exports = { mode: "production", // "production" | "development" | "none" mode: "production", // enable many optimizations for pr
2020-08-20 14:47:46
219
1
原创 Vue可复用性(4)插件 Plugin
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router使用插件通过全局方法 Vue.use() 使用插件。它
2020-08-19 19:05:45
305
1
原创 Vue可复用性(3)过滤器Filter
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>局部过滤器你可以在一个组件的选项中定义
2020-08-19 18:58:53
401
1
原创 Vue可复用性(2)自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中
2020-08-19 18:47:27
240
1
原创 Vue可复用性(1)mixins
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。例子:// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件var Comp.
2020-08-19 17:20:41
207
1
转载 vue组件通信方式之父子、隔代、兄弟组件通信($emit/$on)
Bus,通过一个空的 Vue 实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。注意:记得销毁自定义事件,否则容易造成内存泄露。基本使用具体实现方式:var Bus = new Vue();Bus.$emit("add-todo", { text: this.newTodoText });Bus.$on("add-todo", this.addTodo);Bus.$off("add-todo", this.addTodo);
2020-08-17 19:07:17
712
1
原创 Vue程序化的事件侦听器
你已经知道了 $emit 的用法,它可以被 v-on 侦听,但是 Vue 实例同时在其事件接口中提供了其它的方法。你通常不会用到这些,但是当你需要在一个组件实例上手动侦听事件时,它们是派得上用场的。通过 $ on(eventName, eventHandler) :监听当前实例上的自定义事件。事件可以由 vm.$ emit 触发。回调函数会接收所有传入事件触发函数的额外参数。通过 $once(eventName,eventHandler) :监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会
2020-08-17 18:41:38
566
1
原创 Vue访问元素 & 组件的简单粗暴方式以及依赖注入
为何称其为简单粗暴方式呢?因为根据官方文档指示:在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。访问根实例在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问。// Vue 根实例new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function ().
2020-08-17 18:04:41
477
1
原创 height:calc(100% - 10px)的用法 - 布局篇
下图demo所示,如何让一个侧边栏垂直方向全尺寸拉伸?代码如下:height:calc(100% - 10px)
2020-07-22 21:20:23
8767
1
原创 Vue组件(二):自定义事件
我们推荐你始终使用 kebab-case 的事件名,即my-event形式。自定义组件的 v-model一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突:Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change'
2020-07-16 17:12:36
318
原创 vue 父子组件间的传值(一)——子传父
子组件通过this.$emit()的方式将值传递给父组件,注意:这里的func是父组件中绑定的函数名子组件代码:<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div></template><script>export default { data () {
2020-07-16 13:59:58
136
原创 vue 父子组件间的传值(一)——父传子
一、父组件向子组件传值父组件向子组件传值,子组件只要使用props接收即可。<style scope> .hide{ display:none; }</style>/*父组件*/<template><div class="parent"> <span v-for="(item,index) in message" @click="clickHandle(index)">{{item.value}}
2020-07-16 13:49:43
373
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人