明天也要努力的博客_JavaScript,Html/CSS,其他Web开发,Vue 2.x,uni-app,jQuery(4)

Vue中 Vue.prototype 详解及使用

我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。1. 基本示例在main.js中添加一个变量到 Vue.prototypeVue.prototype.$appName = 'My App'这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以new Vue({ beforeCreate: function () { console.log(this.$appName)

Vue 2.x

前端

es6

vue.js

Vue.js

原创 2021-07-13 15:58:29 854 阅读

Vue中 Vue.use() 原理及使用

相信很多人在用 Vue 使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？因为 axios 没有 install。1. 举例理解在新建的项目中创建两个文件：plugins.js use.js:// plugins.jsconst Plugin1 = { install(a,b){ console.log('Plu

Vue 2.x

前端

vue.js

es6

Vue.js

原创 2021-07-13 15:58:27 210 阅读

Vue中 $nextTick() 与 Vue.nextTick() 原理及使用

Vue.nextTick( [callback, context] )参数： {Function} [callback] {Object} [context]用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。1. 举例说明<template> <div> <div ref="msg">{{msg}}</div> <div v-if="msg1">out $ne

Vue 2.x

vue.js

es6

前端

Vue.js

原创 2021-07-13 15:58:25 481 阅读

Vue中引入使用 Lodash

1. 简介 Lodash 中文网Lodash 是一个著名的 javascript 原生库，不需要引入其他第三方依赖，是一个意在提高开发者效率,提高 JS 原生方法性能的JS 库。简单的说就是，很多方法 lodash 已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash 使用了一个简单的 _ 符号，就像 Jquery 的 $ 一样，十分简洁。类似的还有 Un

Vue 2.x

vue.js

前端

原创 2021-07-13 15:57:42 2400 阅读

Element-ui 表格 (Table) 组件中动态合并单元格

1. 效果图展示 2. 具体实现（以合并行为例） 2.1 实现思路在 table 组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是 row , rowIndex , column , columIndex; 这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。2.2 完整代码 &l

HTML CSS UI

前端

vue.js

原创 2021-07-13 15:56:39 5014 阅读

Vue 2.x 面试题（1）

1、active-class 是哪个组件的属性？嵌套路由怎么定义？ vue-router 模块的 router-link 组件 2、怎么定义 vue-router 的动态路由？怎么获取传过来的动态参数？在router目录下的index.js文件中，对path属性加上/:id。使用 router 对象的 params.id 3、vue-router有哪几种导航钩子？第一种：全局导航钩子：ro

Interview

前端

vue.js

es6

转载 2021-07-13 15:56:21 265 阅读

JavaScript Blob 对象详解

在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob，Binary Large Object 的缩写，代表二进制类型的对象。Blob 的概念在一些数据库中有使用到，例如，MYSQL中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据。通俗点说，Blob对象是二进制数据，但它是类似文件对象

JavaScript

javascript

前端

转载 2021-07-13 15:55:48 751 阅读

使用 SecureCRT 进行端口转发

总共3台机器，我的笔记本，跳转机器，内网服务器：我的笔记本和内网服务器是不能直连的，必须通过跳板机每次都要先登陆跳板机，然后在跳板机上通过SSH的方式登陆至内网服务器进行操作是一件特别麻烦的事，并且，如果我在内网服务器的8080端口启动了一个web服务，该如何访问呢？端口转发的意思是，将所有发送至IP1：port1的请求全部转发至IP2：port2 首先配置至跳板机（150.236.223.

Linux

ssh

转载 2021-07-13 15:55:05 1236 阅读

SVG 入门基础（1）属性

1. 简介 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 是使用 XML 来描述二维图形和绘图程序的语言。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。SVG 是万维网联盟的标准。SVG 参考文档特点：（1）SVG 图像可通过文本编辑器来创建和修改；（2）SVG 图像可被搜索、索引、脚本化或压缩；（3）SVG 是可伸缩的；（4）SVG 图像

Canvas SVG WebGL

svg

前端

数据可视化

原创 2021-07-13 15:54:50 526 阅读

SVG 入门基础（2）形状元素

1. 图形元素 1.1 矩形矩形使用 < rect > < /rect > 标签来进行绘制。 <svg width="200" height="200"> <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect> </svg

Canvas SVG WebGL

前端

svg

数据可视化

原创 2021-07-13 15:54:04 414 阅读

Linux 常用 shell 命令

1. 文件、目录操作 1.1 ls 命令; 功能：显示文件和目录的信息 ls　以默认方式显示当前目录文件列表 ls -a 显示所有文件包括隐藏文件 ls -l 显示文件属性，包括大小，日期，符号连接，是否可读写及是否可执行 ls -lh 显示文件的大小，以容易理解的格式印出文件大小 (例如 1K 234M2G) ls -lt 显示文件，按照修改时间排序 1.2

Linux

linux

ssh

原创 2021-07-13 15:52:56 2067 阅读 1点赞 1收藏

Jquery 分页插件

1. 背景找到一款自认为不错的分页组件，《js版的QuickPager分页控件 V2.0》，想下载完整的资源，js/css等,不过找了一会，没找到，联系博主也没有回复。那直接看了页面引用了js文件，下载下来改写了一下，同时借此机会进一步掌握封装jquery组件。虽说有重复造轮子之嫌，不过只有重复造了轮子，才能更好的掌握。不是曾经有位大神说过，“看再多的框架，不如亲自动手写一个框架。”效果图

jQuery

jquery

前端

html5

转载 2021-07-13 15:52:37 665 阅读

Webpack 面试题

1. webpack 打包原理把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。 2. webpack 的优势（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移；（2）能被模块化的不仅仅是 JS 了；（3）开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转ba

Interview

webpack

前端

转载 2021-07-13 15:52:15 347 阅读

VSCode 配置本地服务器

有时候我们想要把 HTML + CSS + jQuery (js) 编写的项目，以类似三大框架脚手架形式在本地运行，通过安装配置 VSCode 的 Live Server 插件，便可实现这一功能。传送门：Sublime Text3 配置本地服务器 1. 安装 Live Server 2. 开启 Server 服务重新启动 VSCode 后，你会发现在软件的右下角的状态栏中出现了【Go Liv

Tools

visual studio code

原创 2021-07-13 15:51:56 4061 阅读

Sublime Text 3 配置本地服务器

Sublime Text 3 是一个优秀的开发工具，最大的特点莫过于软件轻量，和有丰富的插件可供开发者安装使用。下面讲讲sublime中如何能配置本地服务器，让html代码运行在本地服务器中。传送门：VSCode 配置本地服务器打开 Sublime 使用快捷键【Ctrl + Shift + P】或者点击 “Preferences” => “Package controll” 进入到插件安

Tools

sublime text

转载 2021-07-13 15:51:42 377 阅读

Navicat 入门教程

1. 安装下载完之后，直接解压出来就能用，看一下解压之后的目录：双击打开下面这个文件（可以把它添加一个桌面快捷方式，或者添加到任务栏）：然后会提示你输入注册码：回到navicat的解压出来的文件夹里面，有个叫做key.txt的文件，打开，里面有注册码点击确定就能打开使用了：会显示出来下面的界面 2. 简单使用既然是 mysql 客户端，我们需要连接 mysql 服务端在弹出的界面输入 mys

SQL

navicat

数据库

转载 2021-07-13 15:51:29 800 阅读

前端实现 base64 编码和解码

1. base64简介 Base64：选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的"="，实际是65个字符），其它所有符号都转换成这个字符集中的字符。编码规则：将每三个字节作为一组，一共是24个二进制位。将这24个二进制位分为四组，每个组有6个二进制位。在每组前面加两个00，扩展成32个二进制位，即四个字节。根据下表，得到扩展后的每个字节的对应符号，

Vue 2.x

JavaScript

1024程序员节

前端

vue.js

原创 2021-07-13 15:51:05 1545 阅读

Vue中实现文件流下载

当后台返回的直接是文件流形式，js 在浏览器环境中是不能像其他语言一样对文件进行操作的。由于文件在网络中传输都是以二进制流形式传输的，所以我们要借助一个特殊的对象（Blob），表示一个不可变的, 原始数据的类似文件对象，blob 对象本质上是 js 中的一个对象，里面可以储存大量的二进制编码格式的数据，实际上 file 类也是从 blob 类继承来的。MIME类型是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开axios + blob

Vue 2.x

vue.js

前端

javascript

Vue.js

原创 2021-07-13 15:50:41 1429 阅读

Vue中 Vue.component() 的使用

使用 Vue.component（）全局注册组件新建两个文件：test.vue 、index.js// test.vue 这里定义我们准备多次复用的组件<template> <div> <h3>Hello {{name}}</h3> <button @click="changeName()">changeName</button> </div></templa

Vue 2.x

vue.js

前端

es6

Vue.js

原创 2021-07-13 15:50:39 6225 阅读

Vue中 Vue.extend() 详解及使用

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。1. 官方文档介绍Vue.extend( options ) 参数：{Object} options 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象； data 选项是特例，需要注意

Vue 2.x

vue.js

前端

Vue.js

原创 2021-07-13 15:50:38 2427 阅读

Vue中引入使用 D3.js

推荐几个D3.js学习文档D3.js 中文网D3.js 入门教程

Canvas SVG WebGL

前端

数据可视化

Vue.js

原创 2021-07-13 15:50:37 1760 阅读

Vue中引入使用 vue-json-views

项目开发过程中遇到展示 json 的场景，且 json 文件体积过大，小则几百kb。vue-json-views 即使加载 1M 左右的 json 文时，结合deep 深度限制，也能实现秒开的速度，组件压所过后体积只有15.7kb，开启gzip压缩后只有4.74kb。1. 示例及文档在线示例在线文档git clone https://github.com/zhaoxuhui1122/vue-json-view.gitnpm inpm run dev// 或直接双击index.html2

Vue 2.x

前端

vue.js

html5

Vue.js

原创 2021-07-13 15:50:35 1794 阅读

Vue Router 中实现在新窗口打开页面

1. < router-link > 标签实现新窗口打开官方文档中说 v-link 指令被 < router-link > 组件指令替代，且 < router-link > 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用< a >标签，但事实上vue2版本的 < router-link > 是支持 target="_blank" 属性的 (tag=“a”)。<router-link target="_bla

Vue 2.x

vue.js

前端

Vue.js

原创 2021-07-13 15:50:34 2418 阅读

Vue中 transition 过渡动画的使用 (结合 vue-router、vue-navigation）

本文讨论的 animinate.css 为 v 4.x版本，3.x版本需调整 class 类名animate.css 官网前言 vue中引入使用 animinate.css安装：Install with npm: npm install animate.css --savewith yarn:yarn add animate.css引入main.jsimport animated from "animate.css";Vue.use(animated);组件中使用每个动画

Vue 2.x

前端

vue.js

Vue.js

原创 2021-07-13 15:50:32 2052 阅读

Vue + Echarts + 高德地图实现点击下探图表

效果图：1. 高德地图 Key 申请参考文章传送门2. 引入使用AMapJSAMapJS 是 AMap高德地图API加载器。帮助开发者快速加载高德地图相关API，在模块化应用、异步编程中使用API更加灵活便捷。安装：npm i amap-js -S完整引入：import AMapJS from 'amap-js';本文仅使用AMapUILoader3. Vue 中实现效果图完整代码<template> <div class="app-container"

Canvas SVG WebGL

前端

echarts

Vue.js

原创 2021-07-13 15:50:31 1291 阅读

Vue中使用 calc 计算长度并传参

1. 定义与用法calc() 函数用于动态计算长度值运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用 calc() 函数进行计算；calc() 函数支持 " + ", " - ", " * ", " / " 运算；calc() 函数使用标准的数学运算优先级规则；2. 使用 calc 计算长度并传参需求：根据服务端返回的数组长度，来计算元素的宽度并在屏幕宽度变化时能够兼容，这是我们就可以考虑使用 calc 计算长度并传参。2.1

Vue 2.x

css3

vue.js

前端

Vue.js

原创 2021-07-13 15:50:29 1347 阅读

解决 Element-ui中对话框（Dialog）中含子组件时，使用 refs 调用该子组件为 undefined 的问题

问题：当对话框（Dialog）中包含子组件时，我们使用 this.$refs 试图获取该组件的 dom 并操作时，发现获取的 dom 为 undefined 导致后续的方法报错； <template> <div> <el-dialog :visible.sync="propertyDialog" width="60%" center>

HTML CSS UI

前端

vue.js

elementui

原创 2021-07-13 15:49:49 601 阅读

JavaScript 获取当前URL信息

示例URLhttp://http://127.0.0.1:8080/testdemo/test.html?id=1&name=test// 返回 web 主机的域名，如：http://127.0.0.1:8080/testdemo/test.html?id=1&name=testvar url = window.location.href;// 返回所使用的 web 协议，如：http:var protocol = window.location.protocol;// 返回当

JavaScript

javascript

前端

原创 2021-07-13 15:49:29 355 阅读

JavaScript 获取子节点、父节点、兄弟节点方法总结

<div id="city" class="cities"> 城市 <div id="sh" class="east">上海</div> <div id="gz" class="south">广州</div> <div id="xa" class="west">西安</div> <div id="bj" class="north">北京</div></div&g

JavaScript

javascript

前端

原创 2021-07-13 15:49:28 6230 阅读

JavaScript 数组（array）reduce方法详解

1. 语法arr.reduce(function(prev,cur,index,arr){...}, init);arr ：原数组；prev ：上一次调用回调时的返回值，或者初始值 init;cur ：当前正在处理的数组元素；index ：当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init ：初始值其实常用的参数只有两个：prev 和 cur。2. 常见用法2.1 数组求和var arr = [1,2,3,

JavaScript

javascript

前端

原创 2021-07-13 15:49:27 197 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

明天也要努力

Vue中 Vue.prototype 详解及使用

Vue中 Vue.use() 原理及使用

Vue中 $nextTick() 与 Vue.nextTick() 原理及使用

Vue中引入使用 Lodash

Element-ui 表格 (Table) 组件中动态合并单元格

Vue 2.x 面试题（1）

JavaScript Blob 对象详解

使用 SecureCRT 进行端口转发

SVG 入门基础（1）属性

SVG 入门基础（2）形状元素

Linux 常用 shell 命令

Jquery 分页插件

Webpack 面试题

VSCode 配置本地服务器

Sublime Text 3 配置本地服务器

Navicat 入门教程

前端实现 base64 编码和解码

Vue中实现文件流下载

Vue中 Vue.component() 的使用

Vue中 Vue.extend() 详解及使用

Vue中引入使用 D3.js

Vue中引入使用 vue-json-views

Vue Router 中实现在新窗口打开页面

Vue中 transition 过渡动画的使用 (结合 vue-router、vue-navigation）

Vue + Echarts + 高德地图实现点击下探图表

Vue中使用 calc 计算长度并传参

解决 Element-ui中对话框（Dialog）中含子组件时，使用 refs 调用该子组件为 undefined 的问题

JavaScript 获取当前URL信息

JavaScript 获取子节点、父节点、兄弟节点方法总结

JavaScript 数组（array）reduce方法详解

欢迎