如初的博客🥝

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

什么是路由后端路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。当前端输入url请求资源时，服务器会监听到是什么url地址，那后端会返回什么样的资源呢？后端这个处理的过程就是通过路由来分发的。总结：后端路由，就是把所有url地址都对应到服务器的资源，这个对应关系就是路由。前端路由对于单页面应用程序来说，主要通过URL中的hash（url地址中的#号）来实现不同页面之间的切换。同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中的页面跳转主要用hash实现。总结：在单页应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。安装Vue-router的两种方式官方文档：https://router.vuejs.org/zh/ 方式一：直接下载文件下载网址：https://unpkg.com/vue-router/dist/vue-router.js 下载之后，放进项目工程，然后我们在引入vue.js之后，再引入vue-router.js即可： 12<scrip ...

07-对象简介和对象的基本操作

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

面向对象简介对象的作用是：封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。对象具有特征（属性）和行为（方法）。面向对象：可以创建自定义的类型，很好的支持继承和多态。面向对象的特征：封装、继承、多态。对象简介基本数据类型和引用数据类型的对比基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。引用数据类型（引用类型）：Object 对象。基本数据类型：基本数据类型的值直接保存在栈内存中，值与值之间是独立存在，修改一个变量不会影响其他的变量。对象：只要不是那五种基本数据类型，就全都是对象。如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址（对象的引用）。换而言之，对象的值是保存在堆内存中的，而对象的引用（即变量）是保存在栈内存中的。如果两个变量保存的是同一个 ...

08-CSS属性：定位属性

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

相对定位相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。我们之前学习的背景属性中，是通过如下格式： 1background-position:向右偏移量向下偏移量; 但这回的定位属性，是通过如下格式： 123position: relative;left: 50px;top: 50px; 相对定位的举例： 123456789101112131415161718192021222324252627282930313233343536373839404142<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name=&q ...

08-HTML5举例：简单的视频播放器

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 index.html的代码如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851 ...

08-基本数据类型vs引用数据类型

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言在之前的javascript基础文章中（编号02、编号07），我们介绍过，变量有以下数据类型：基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。引用数据类型（引用类型）：Object 对象。本文，我们针对这两种类型，做个详细介绍。我们先来看个例子。基本数据类型举例： 1234567var a = 23;var b = a;a++;console.log(a); // 打印结果：24console.log(b); // 打印结果：23 上面的代码中：a 和 b 都是基本数据类型，让 b 等于 a，然后改变 a 的值之后，发现 b 的值并没有被改变。但是在引用数据类型中，就不同了，我们来看一看。引用数据类型举例： 1234567891011var obj1 = new Object();obj1.name = 'smyh';// 让 obj2 等于 obj1var obj2 = obj1;// 修改 obj1 的 name 属性obj1.name = &#x ...

09-HTML5详解（二）

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

本文主要内容拖拽历史地理位置全屏拖拽如上图所示，我们可以拖拽博客园网站里的图片和超链接。在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 1、拖拽元素页面中设置了 draggable="true" 属性的元素。举例如下： 1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> .box1{ w ...

10-HTML5详解（三）

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 H5 中有两种存储的方式 1、window.sessionStorage 会话存储：保存在内存中。生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。在同一个窗口下数据可以共享。 2、window.localStorage 本地存储：有可能保存在浏览器内存里，有可能在硬盘里。永久生效，除非手动删除（比如清理垃圾的时候）。可以多窗口共享。 Web 存储的特性（1）设置、读取方便。（2）容量较大，sessionStorage 约5M、localStorage 约20M。（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。常见 API 设置存储内容： 1setItem(key, value); PS：可以新增一 ...

10-作用域

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

作用域、变量提升的知识点，面试时会经常遇到。作用域（Scope）的概念作用域指一个变量的作用范围。在js中，一共有两种作用域：全局作用域函数作用域全局作用域直接编写在script标签中的JS代码，都在全局作用域。全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。在全局作用域中：创建的变量都会作为window对象的属性保存。创建的函数都会作为window对象的方法保存。全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到。变量的声明提前（变量提升）使用var关键字声明的变量（比如 var a = 1），会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写a = 1），则变量不会被声明提前。举例1： 12console.log(a);var a = 123; 打印结果：undefined。（说明变量 a 被被提前声明了，只是尚未被赋值）举例2： 12console. ...

11-Sass入门

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

Sass简介大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。面对返些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版，可以自定义发量，可以有 if 语句，还可以嵌套等等，很神奇吧！那下面我们就来介绍返个神奇的 Sass。 Sass比Less的功能更强大，也更复杂。 Sass 的定义 Sass：英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。官网是：https://sass-lang.com/ Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。 Sass专注的是怎样创建优雅的样式表，而不是内容。 Sass、Compass与CSS 关系： Less/Sass是语法、Compass是框架、CSS是目标。 Sass&Compass的好处：写出更优秀的CSS。解决CSS编写过程中的痛点问题，比如精灵图 ...

11-Zepto入门

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | jQuery

Zepto 的介绍什么是 Zepto zepto是轻量级的JavaScript库，专门为移动端定制的框架。与jquery有着类似的API，俗称：会jquery就会用zepto zepto的特点针对移动端轻量级，压缩版本只有8kb左右响应，执行快语法、API大部分同jquery一样，学习难度低，上手快。目前API完善的框架中体积最小的一个相关网址官网：http://zeptojs.com/ GitHub：https://github.com/madrobby/zepto Zepto 与 jQuery 的前世今生相同点都是优秀的js函数库语法、API大部分都一样（zepto是按照jquery的思路来设计的） Zepto 相当于 jQuery 的子集同jQuery一样，都是以$符号为核心函数。不同点 Zepto 的初体验（1）Zepto 库的下载：我们去官网下载 Zepto的开发版本zepto.js：官网里，还有这样一张图：上图的意思是：最前面打钩的那五个api，已经包含在zepto.js ...

11-this

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

this 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。根据函数的调用方式的不同，this会指向不同的对象：【重要】 1.以函数的形式调用时，this永远都是window。比如fun();相当于window.fun(); 2.以方法的形式调用时，this是调用方法的那个对象 3.以构造函数的形式调用时，this是新创建的那个对象 4.使用call和apply调用时，this是指定的那个对象针对第1条的举例： 12345678910111213141516171819function fun() { console.log(this); console.log(this.name);}var obj1 = { name: "smyh", sayName: fun};var obj2 = { name: "vae", sayName: fu ...

10-CSS的一些小知识

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

隐藏盒子的几种方式隐藏盒子，有以下几种方式：（1）方式一： 1overflow：hidden; //隐藏盒子超出的部分（2）方式二： 1display: none; 隐藏盒子，而且不占位置(用的最多) 比如，点击X，关闭京东首页上方的广告栏。（3）方式三： 123visibility: hidden; //隐藏盒子，占位置。visibility: visible; //让盒子重新显示（4）方式四： 1pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置（4）方式五： 1Position/top/left/...-999px //把盒子移得远远的，占位置。（5）方式六： 1margin-left: 1000px; 设置盒子的半透明方式一：pacity: 0.4。优点是方便。缺点是：里面的内容也会半透明方式二：css3的技术来解决半透明。如下： background: rgba(0,0,0,0.3); background: rgba(0,0,0,.3); 备注：a指的是alpha透明度。给标签的形 ...