如初的博客🥝

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

前言什么是组件组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。模块化和组件化的区别模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用全局组件的定义和注册组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。全局组件的定义和注册有三种方式，我们接下来讲一讲。写法一写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。代码举例： 123456789101112131415161718192021222324252627282930313233<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l ...

04-运算符

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

本文首发于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。我们在本文件夹的第二篇里讲到了JS中变量的概念，本篇文章讲一下运算符和表达式。前言比如说+、*、/、( 都是运算符，而（3+5）/2则是表达式。运算符的定义和分类运算符也叫操作符。通过运算符可以对一个或多个值进行运算，并获取运算结果。比如：typeof 就是运算符，可以来获得一个值的类型。它会将该值的类型以字符串的形式返回：number string boolean undefined object。注：运算符都是会返回结果的，而typeof这个运算符返回的结果就是变量的类型。那返回的结果的类型是什么呢？是字符串。运算符有很多分类，比如：算数运算符自增运算符逻辑运算符赋值运算符关系运算符三元运算符（条件运算符）算数运算符常见的算数运算符有以下几种：求余的举例：假设用户输入345，怎么分别得到3、4、5这三个数呢？答案： 12345得到3的方法：345 除以100，得到3.45然后取整，得到3。即：parseI ...

05-CSS样式表的继承性和层叠性

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

本文重点 CSS的继承性 CSS的层叠性计算权重权重问题大总结 CSS样式表的冲突的总结权重问题深入同一个标签，携带了多个类名 !important标记 CSS的继承性我们来看下面这样的代码，来引入继承性：上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论：有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。继承性是从自己开始，直到最小的元素。但是呢，如果再给上方的代码加一条属性：上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。关于盒子、定位、布局的属性，都不能继承。以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。 CSS的层叠性很多公司如果要笔试，那么一定会考 ...

05-流程控制语句：选择结构（if和switch）

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

本文首发于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。代码块用{}包围起来的代码，就是代码块。 JS中的代码块，只具有分组的作用，没有其他的用途。代码块中的内容，在外部是完全可见的。举例： 1234567{ var a = 2; alert("smyhvae"); console.log("永不止步");}console.log("a = " + a); 打印结果：（可以看出，虽然变量 a 是定义在代码块中的，但是在外部依然可以访问） 12永不止步a = 2 流程控制语句在一个程序执行的过程中，各条语句的执行顺序对程序的结果是有直接影响的。所以，我们必须清楚每条语句的执行流程。而且，很多时候我们要通过控制语句的执行顺序来实现我们要完成的功能。流程控制语句分类顺序结构选择结构：if语句、switch语句循环结构：while语句、for语句顺序结构按照代码的先后顺序，依次执行。结构 ...

05-CSS3属性详解：动画详解

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

前言本文主要内容：过渡：transition 2D 转换 transform 3D 转换 transform 动画：animation 过渡：transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。参考链接：补间动画基础 transition 包括以下属性： transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 transition-duration: 1s; 过渡的持续时间。 transition-timing-function: linear; 运动曲线。属性值可以是： linear 线性 ease 减速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 transition-delay: 1s; 过渡 ...

06-CSS盒模型详解

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

盒子模型前言盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。盒子模型的示意图：代码演示：上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。标准盒模型和IE盒模型我们目前所学习的知识中，以标准盒子模型为准。标准盒子模型： IE盒子模型：上图显示：在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height：内容的宽度、高度（不是盒子的宽度、 ...

06-CSS3属性详解：flex布局

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

多列布局类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。格式举例： 123456789101112131415161718192021.wrapper{ /* 分成几列 */ -webkit-column-count: 3; /* 每列之间，用分割线隔开 */ -webkit-column-rule: 1px dashed red; /* 设置列之间的间距 */ -webkit-column-gap: 60px; /* 设置每一列的宽度 */ /* -webkit-column-width: 400px; */ /*-webkit- -moz- -ms- -o-*/}h4{ /* 设置跨列：让h4这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/ -webkit-column-span: all; text-align: center;} 备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。 flex：伸缩布局 CSS3在布局方面做了非 ...

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

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

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

06-Vue组件之间的传值

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

父组件向子组件传值我们可以这样理解：Vue实例就是一个父组件，而我们自定义的组件（包括全局组件、私有组件）就是子组件。【重点】需要注意的是，子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值。父组件向子组件传值的代码举例 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...

07-Vue-router路由

发表于 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 ...

06-chrome浏览器

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

控制台的使用控制台查看源码控制台的Sources标签可以查看源码。按住快捷键「cmd + P」，可以根据文件名查找源码文件。其他 show user agent shadow DOM 把上图中的红框部分打钩。

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 ...