自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(290)
  • 收藏
  • 关注

原创 SVG 径向渐变

上一节我们讲的是线性渐变,本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心,颜色值沿半径方向进行渐变。如何创建径向渐变我们可以通过 <radialGradient> 元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多,也是嵌套在 <defs> 元素中使用,在使用时需要定义一个唯一的 id 名称,然后通过 fill 属性引用。示例:定义一个径向渐变的圆:<!DOCTYPE html><html> <head&g

2021-01-21 11:03:18 5

原创 SVG 线性渐变

本节我们学习 SVG 中的渐变。首先我们需要弄清楚什么是渐变,SVG 中的渐变可以理解为一种颜色到另外一种颜色的过渡,而这种颜色的过渡又分为两种形式,即线性渐变和径向渐变。本节我们会先学习线性渐变。什么是线性渐变我们先来看线性渐变,线性渐变就是直线的渐变,例如将不同的颜色从左向右进行渐变。我们可以使用 <linearGradient> 元素来定义线性渐变,这个元素必须嵌套在 <defs> 元素内部,<defs> 元素可以对渐变这类元素进行定义。示例:我们先来看一个

2021-01-18 13:35:25 14

原创 SVG 路径

本节我们学习 SVG 中路径,在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大,既可以创建基本的图形,也可以创建更复杂的形状。<path> 路径是由一些命令来控制的,每个命令对应一个字母,字母区分大小写。SVG中的path命令<path> 元素可以用于定义路径,元素中有一个 d 属性,这个 d 属性是一系列命令的集合。<path> 元素中支持下列命令,如果是大写命令表示绝对定位,小写则表示相对定位:

2021-01-14 11:43:33 14

原创 SVG 绘制多边形

本节我们来学习如何在 SVG 中绘制多边形,多边形就是由三条或三条以上的线段首尾顺次连接所组成的平面图形。如何绘制多边形绘制多边形可以使用 SVG 中的 <polygon> 元素,通过元素中的 points 属性确定各个点的位置,和 <polyline> 元素差不多。示例:例如绘制一个六边形:<!DOCTYPE html><html> <head> <meta charset="utf-8">

2021-01-12 10:49:39 10

原创 SVG 绘制曲折线

本节我们来学习如何在 SVG 中绘制曲折线,绘制曲折线可以使用 <polyline> 元素来实现。如何绘制曲折线曲折线就是通过一系列的直线连接多个点,然后组合成任意形状。曲折线可以通过 SVG 中的 <polyline> 元素来绘制。<polyline> 元素中的 points 属性用于定义绘制折线所需的点列表,即 x 和 y 坐标对。x 坐标和 y 坐标之间使用逗号分隔,坐标对之间使用空格分隔。语法格式:<polyline points="x1,y1 x2

2021-01-06 13:08:17 17

原创 SVG 绘制直线

本节我们来学习如何在 SVG 中绘制直线,要绘制直线可以使用 <line> 元素来实现。如何绘制直线我们可以使用 <line> 元素在 SVG 图像内部来绘制线条,要绘制直线,首先要确定直线起点与重点的位置。可以通过元素中的属性来绘制水平直线、垂直直线、斜角直线等。绘制直线时需要用到四个属性,如下所示:x1: 定义线条在 x 轴的起始坐标。x2: 定义线条在 x 轴的结束坐标。y1: 定义线条在 y 轴的开始坐标。y2: 定义线条在 y 轴的结束坐标。示例:例如

2021-01-04 11:20:48 24

原创 SVG 绘制椭圆

本节我们来学习如何在 SVG 中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆 x 轴和 y 轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时, 可以通过 cx 和 cy 属性确定椭圆的圆心,rx 设置椭圆的 x 轴的半径,ry 设置 y 轴的半径。示例:例如下面这个例子:<!DOCTYPE html><html> <head> <meta charset="utf-8">

2020-12-30 11:11:31 14

原创 SVG 绘制圆形

本节我们来学习如何在 SVG 中绘制圆形,圆形也是 SVG 的基本形状之一,我们可以通过 <circle> 元素来绘制原型。如何绘制一个圆形要绘制圆形可以通过 <circle> 元素来实现,在绘制圆形时,我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性,半径需要用到 r 属性。除此之外,还可以使用 fill 属性圆进行颜色填充,stroke 属性进行描边等。示例:例如我们创建一个圆:<!DOCTYPE html><html&

2020-12-28 11:01:02 36

原创 SVG 绘制矩形

本节我们来学习 SVG 中的矩形。SVG 中设有一些预定义的形状元素,我们可以直接通过这些元素来绘制图形。基本图形有如下几种:元素图形<rect>矩形<circle>圆形<ellipse>椭圆<line>线<polyline>折线<polygon>多边形<path>路径直接在 <svg> 元素内使用上述图形元素,就可以轻松绘制出图形啦

2020-12-23 11:14:53 18

原创 SVG 坐标系统

在开始学习如何绘图之前,我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由 x 轴(水平横向延伸)和 y 轴(垂直纵向延伸)交织组成,交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值,反之为负值,沿 y 轴向上为正值,反之为负值。而 SVG 网格坐标系统的特点如下所示:以左上角为坐标系的原点,即 (0,0)。横向延伸为 X 轴正方向, x 坐标逐渐增大。纵向为 Y 轴正方向

2020-12-21 09:34:45 17

原创 SVG 简介

什么是SVGSVG 是 Scalable Vector Graphics 的首字母缩写,翻译成中文表示可缩放矢量图形。可缩放我们知道,那矢量图形又是什么呀,矢量图也称为面向对象的图像或绘图图像,在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象,每个对象都是一个自成一体的实体,它具有颜色、形状、大小、轮廓、和屏幕位置等属性。SVG 是 W3C 推出的基于 XML 的二维矢量图形标准,也就是一种用于描述二维的矢量图形。SVG 可以提供高质量的矢量图形渲染,同时由于支持 JavaScript 和

2020-12-16 11:18:24 34

原创 Vue路由的配置

Vue 路由的配置什么是路由Vue 路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉 Vue 我们在哪里渲染它们。路由其实就是我们浏览器的一个地址。Vue 路由的优缺点路由的优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户。路由的缺点:不利于 SEO。使用浏览器的前进,后退键的时候会重新发送请求,没有合理利用缓存。单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置。当我们加载一个程序时,

2020-12-14 12:02:01 24

原创 Vue与服务端通讯

Vue.js 本身没有提供与服务端通讯的接口,但是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。与服务器通讯目前与服务器通讯的主流方法:Ajax:在无刷新网页的情况下实现数据的更新,它用起来很方便快捷,但是有一个缺点是在使用时我们需要引入一个 JQuery,引进来之后我们实际上只用了它里面的一个方法,但是却导致引入了两个库,jQuery 太大,因此很少使用。axios,适用于在 ES5 和 ES6 里面的 promise 出现之后才出现的,它返回一个承诺,易于分离。就是允许我

2020-12-09 10:58:14 16

原创 Vue 组件

什么是组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。使用组件的好处:组件是可以复用性的。易于维护。有封装性,易于使用。大型项目中降低组件之间重复性。注册及使用组件注册就是利用 component() 方法,先传入一个自定义组件的名字,然后传入这个组件的配置,语法如下所示:

2020-12-07 11:03:44 4

原创 Vue 循环渲染

v-for指令的使用在 Vue 中,可以使用 v-for 指令绑定数据到数组来渲染一个列表。使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组,item是要在其上进行迭代的数组元素的别名:示例:例如假设有一组关于水果的数据,需要使用列表渲染页面,我们可以在 <li> 标签上绑定 v-for 指令:<!DOCTYPE html><html><head><meta charset="

2020-12-04 11:15:56 16

原创 Vue 条件渲染

v-if 指令的使用在Vue中,v-if 指令可以用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。示例:我们来看下面这段代码,有姓名和年龄这两条信息,现要求只显示姓名,而隐藏年龄:<body> <div id="app"> <p v-if="show">显示姓名:小飞侠</p> <p v-if="hide">隐藏年龄:28</p> </

2020-12-02 18:22:55 7

原创 Vue 模板语法

模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。文本数据绑定最常见的形式就是两个大括号{{}},大括号中间的内容是data里面的数据,不仅可以是变量还可以是表达式。当绑定的数据对象

2020-11-30 11:07:35 12

原创 Vue 生命周期(钩子函数)

什么是生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程,例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。下图是官网中实例的生命周期示例图:beforeCreate:是第一个生命周期函数,表示实例完全被创建出来之前会执行这个函数。在此函数执行时,data和methods中的属性与方法定义都还没有初始化。created:是第一个生命周期函数,在此函数中,d

2020-11-27 11:07:53 26

原创 Vue中的methods方法

在 methods 中定义方法我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法:var vm = new Vue({ methods:{ // 在此时定义方法,方法之间使用逗号分隔 方法名:function(){}});示例:例如在 methods 中定义一个名为 show 的方法:methods:{ show: function(){ console.log("显示内容") }}在方法中访问属性在 me

2020-11-25 11:03:29 220

原创 Vue的计算属性和监听属性

Vue 中的计算属性使用计算属性(computed)有一个好处在于它有一个缓存机制,因此它不需要每次都重新计算。当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据,而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下,Vue 给我们提供了一个特别好的解决方法,就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去,然后让它动态的计算就可以了

2020-11-23 10:39:07 18

原创 Vue初体验

Vue的引入要使用 Vue,我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件,然后在 HTML 页面中通过 <script> 标签来引入这个文件。下载地址为:https://vuejs.org/js/vue.min.js。引入格式如下所示,其中 path 是文件所在路径:<script src="path/vue.min.js"></script> 或者也可以不下载 vue.min.js 文件,直接引入 Vue 文件地址,例如:&lt

2020-11-18 11:08:50 9

原创 认识Vue

什么是 VueVue.js 是一套用于构建用户界面的渐进式 JavaScript 框架,也是一个创建单页应用的 Web 应用框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还非常容易与第三方库或既有项目整合。相对于 Angular 来说,Vue 更加灵活,它可以让你以期望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则。且它仅是一个视图层,所以你可以将它嵌入一个现有页面,而不一定要做成一个庞大的单页应用。Vue有什

2020-11-16 10:35:23 10

原创 ES6 解构赋值

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。数组的解构赋值ES6 中可以从数组中提取值,对变量进行赋值,这种过程称为解构。示例:例如下面这个例子,从数组中提取值,按照对应位置,对变量赋值:let [x, k, d] = [1, 2, 3];console.log(x); // 输出:1console.log(k); // 输出:2console.log(d); // 输出:3这种写法属于模式匹配,只要等号两边的模式相同,就会将右边的

2020-11-12 11:24:57 53

原创 ES6 新特性之Set

ES6 提供了一个新的数据结构 Set,它和 Array 的结构很类似,但是 Set 中成员的值都是唯一的,没有重复的值。创建SetSet 对象可以存储任何类型的唯一值,无论是原始值或者是对象引用。创建 Set 的实例需要用到 Set 构造函数,并且传入的参数必须只能是可迭代对象,例如数组,字符串示例:创建一个空的 set:let set1 = new Set(); console.log(set1);// 输出: Set {}创建并初始化一个 setlet set2 = new Set

2020-11-09 10:45:03 20

原创 ES6 新特征之Map

ES6 给我们提供了 Map 数据结构,它类似于对象,用于保存键值对。不同的是,Map 中键的范围不限于字符串类型,各种类型的值(包括对象)都可以当作一个键或一个值。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果需要用到“键值对”的数据结构,Map 比 Object 更合适。Map和Object的区别Object 中的键只能是字符串或者 Symbols 类型,但 Map 中的键可以是任意值。Map 中的键值是有序的

2020-11-04 11:19:50 22

原创 ES6 新特征之Symbol

ES6 中除了 JavaScript 中几种基本的数据类型,Number、String、Boolean、Object、null、undefined 以外,还新引入了一种新的原始数据类型 Symbol,表示独一无二的值,属于类字符串数据类型,可以用来定义对象的唯一属性名。基本使用ES5 的对象属性名都是字符串,这容易造成属性名的冲突。而 ES6 中新引入的 Symbol 类型可以解决这个问题。Symbol 值是通过 Symbol 函数来生成的,可以用来定义对象的唯一属性名。属于 Symbol 类型的属性名

2020-11-02 10:46:07 26

原创 ES6 函数的扩展

函数的扩展我们可以从三个方面来了解与认识:参数的默认值箭头函数关于尾调用的优化参数的默认值在 ES6 之前,我们不能直接为函数的参数指定默认值,只能采用变通的方法。而 ES6 中允许我们直接为函数的参数设置默认值,通过等号 = 直接在小括号中给参数赋值。示例:function log(name, age = 18) { console.log(name, age);}console.log('xkd'); // 输出: xkdconsole.log('summ

2020-10-29 11:07:46 8

原创 ES6 对象的扩展

属性的简洁表示法我们知道对象是由键值对组成的,在 ES6 中允许在对象的大括号内直接写入变量和函数,此时属性名是变量名,属性值是变量值。示例:例如我们定义两个变量 name 和 age,将这两个变量赋值给对象 person :const name = "xkd";const age = 3;const person = {name: name,age: age}console.log(person);可以简写为:const person = {name, age}; // 简写然

2020-10-26 11:41:20 11

原创 ES6 数组的扩展

扩展运算符的使用扩展运算符是由三个点组成 ...,可以用于将一个数组转为逗号分隔的一个参数序列。主要作用就是展开当前数组,一般用于复制数组,合并数组,解构,拆分字符串和转换 Iterator 接口的对象。复制数组数组是复合的数据类型,如果我们直接复制一个数组,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。示例:在 ES5 中,我们只能通过方法来复制数组,如下所示:const a = [1, 2, 3];const b = a.concat();console.log(b); /

2020-10-22 11:52:13 13

原创 ES6 字符串的扩展

本节我们来学习 ES6 中字符串类型的扩展,包括一些字符串对象的新增方法的使用等。字符的 Unicode 表示法ES6 加强了对 Unicode 的支持,JavaScript 中可以采用 \uxxx 形式表示一个字符,其中 xxxx 表示字符的码点。例如:console.log("\u0075"); // u但是这种表示法只限于码点在 \u0000~\uFFFF 之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。console.log("\uD842\uDFB7"); // ????

2020-10-20 10:07:49 16

原创 ES6 数值的扩展

本节我们学习 ES6 中的常用数据类型之数值(Number)类型。ES6 中除了 JavaScript 中的六种数据类型之外,还引入了一种新的原始数据类型 Symbol,它是 JavaScript 语言的第七种数据类型:Number (数值)String(字符串)Boolean(布尔值)Object(对象)undefinednullSymbol二进制和八进制表示法ES6 中提供了二进制和八进制数值的新的写法:二进制的新写法可以使用前缀 0b 或者 0B 表示。let a =

2020-10-16 11:27:32 9

原创 ES6 块级作用域

本节我们来学习块级作用域,ES5 中只有全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域,或者循环中的变量泄露为全局变量。示例:函数作用域覆盖全局作用域:var a = 1;function test() { console.log(a); // 由于变量提升,导致内层的a变量覆盖了外层的a变量 if (true) { var a = 10; }}test(); // 输出:undefined循环中的变量泄露为全局变量:for(va

2020-10-12 10:53:30 11

原创 ES6 const命令

本节我们学习 ES6 中的 const 命令,const 也是 ES6 中新增的一个命令。const 声明一个只读常量,一旦声明常量,就必须立即初始化。改变常量的值或者仅声明但不赋初始值都会报错。const声明const 声明一个只读的常量,一旦声明,常量的值就不能改变。实际上,不能改动的不是值,而是变量指向的那个内存地址所保存的数据不得改动。示例:使用 const 命令声明变量其实和 let 的使用方法差不多,例如声明一个常量 a:const a = 1;console.log(a);常量

2020-10-09 11:51:28 9

原创 ES6 let命令

ES6 中新增了 let 命令,可以用于声明变量。下面我们就一起来看一下 let 命令的使用。使用let声明变量let 命令是 ES6 中新增的用于声明变量的一个命令,声明变量时的用法和 JavaScript 中的 var 类似。示例:例如下面我们使用 let 命令来声明变量:let a = 10;let b = 20;let c = 30;let 声明的变量只在代码块内有效let 命令的使用虽然和 var 类似,但是两者还是有区别的,例如使用 let 声明的变量,只在 let 所在的代

2020-09-29 11:02:21 8

原创 ES6 配置运行环境

本节我们来学习配置 ES6 的 JavaScript 运行开发环境,通过 babel 把 ES6 转码为 ES5 。选择一个编辑器首先我们选择一个编辑器,然后在这个编辑器下配置 ES6 的 JavaScript 运行环境。这里我们选择 Visual Studio Code,当然也可以选择其他的编辑器,例如 WebStorm,大家可以根据自己的喜好选择。如果我们要使用 Visual Studio Code,可以到官网下载,地址为:https://code.visualstudio.com/。大家根据需求

2020-09-27 10:29:06 48

原创 ES6 入门简介

本教程我们学习 ES6 的基础知识,ES6 是 ECMAScript6 的简称,是2015年6月正式发布的 JavaScript 语言的标准,正式命名为 ECMAScript 2015,它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只是实现了 ES6 的部分特性和功能。EC

2020-09-24 11:11:19 24

原创 CSS 链接样式

超链接是网页的基本元素之一,几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过,超链接会自带一些默认样式,例如未点击的超链接会显示带下划线的蓝色字体、点击时字体变为红色、点击后字体变为紫色。这种点击前后不一致的样式,其实是超链接的伪类样式,伪类就是不根据名称、属性或者内容,而是根据标签处于某种行为或状态时的特征来修饰样式,也就是说超链接将根据不同的状态显示不同的样式。去掉链接的下划线首先,我们知道超链接本身是带有默认下划线的,但是一般我们在网页中看到的超链接都是没有下划线的,那么要如何去

2020-09-21 14:15:17 47

原创 CSS 背景样式

我们平时看到的网页中会有各式各样的背景样式,例如有用颜色作为背景的,也有图片作为背景的。添加背景样式能够让网页更好看,那么要如何设置页面的背景样式呢,这就是本节我们要学习的内容。背景颜色首先我们来讲如何设置背景颜色,浏览器页面的默认背景颜色为白色,但是很多时候为了页面的美观我们会重新设置一个背景颜色,一般在一个网站中大部分页面都会采用某个统一的背景颜色。我们可以通过CSS 中的 background-color 属性来设置背景颜色 ,这个属性可以接受任何合法的颜色值,像颜色名称、十六进制颜色值、RGB

2020-09-18 14:51:43 25

原创 CSS 文本样式

本节我们讲文本样式,像比如设置文本颜色呀,首行缩进、水平对齐等,可以对网页进行排本设置等。将要学习的文本属性有如下几个:属性描述color设置文本颜色text-index设置首行文本的缩进text-align设置文本水平对齐方式line-height设置文本行高text-decoration设置文本的装饰color首先我们来讲文本颜色设置,前面我们讲过一节关于如何设置颜色,所以想必大家对如何给文本设置颜色不会。示例:例如给下面的 <

2020-09-14 10:51:34 27

原创 CSS 字体样式

本节我们来讲字体样式,之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。接下来我们会给大家介绍下面这几个属性的使用:属性描述font-family设置元素的字体font-size设置字体的大小font-style设置字体的风格font-weight设置字体的粗细font在一个声明中设置所有的字体属性通过学习上述这几个 CSS 属性,我们可以实现给 HTML 中的文

2020-09-11 09:38:33 10

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除