- 博客(21)
- 收藏
- 关注
RSS订阅
原创 Vue生命周期函数详解
前言：相信很多前端的小伙伴们接触到了Vue都是先学会使用再去理解的吧，想要更好的理解 Vue，那么Vue的生命周期函数一定要理解！下图是我对Vue生命周期函数图解的详细解释，应该很通俗易懂了吧，不懂也没关系，下面我会附上代码帮助小伙伴们更好地理解。首先我们要知道，Vue生命周期函数分为三个阶段：创建阶段运行阶段销毁阶段1.创建阶段：创建Vue的实例对象，初始化。这时候该对象只有默认的一些周期函数和默认事件，其他东西还未创建。实例初始化阶段主要有两个函数：beforeCreate
2021-09-28 01:58:45
13826
原创 Axure动态面板实现轮播图
Axure中不乏许多的高级功能，其中轮播图是我们在页面中常见的一个高级功能，今天就让我们来学习一下Axure中轮播图的使用吧。一、基础用法1.首先老规矩我们从元件库中拖拽元件进入我们的设计区域，今天我们使用的是动态面板。2.我们双击动态面板进入编辑状态。3.我们点击顶部的状态区，并添加我们的状态。（这里我添加了四个，并双击命名为img1234）4.设置后之后，我们再把图片元件拉入动态面板里，每个状态放不同你需要的图片，并调整大小。这里要注意不要推出编辑面板..
2021-08-01 22:35:37
9082
3
原创 Axure的安装与简单使用
前言： 实训如期而至，经过老师简单地对大前端的介绍后，今天学习了第一个知识点——Axure。Axure简单介绍：Axure即为原型（prototype），这个词来自拉丁文的词proto，意谓“最初的”，意义是形式或模型。那么Axure有什么用呢？Axure RP是一款专业的快速原型设计工具。通俗易解地讲就是帮助使用者可以快速的构造出我们需要的网页示意图、流程图、演示的网页文件等，可以在我们做项目前为我们大概地演示大体的框架页面，方便我们后面有序的设计出项目。Axure这个软件功能强大，可
2021-07-28 15:47:03
7779
原创 stopPropagation()与stopImmediatePropagation()的区别
相信很多小伙伴都知道如何阻止“事件冒泡”，使用event.stopPropagation()或者使用event.stopImmediatePropagation()又或者两者一起使用，但是你知道他们之间的区别吗？首先我们先看看MDN官网对两者的定义浅浅了解一下:stopPropagationEvent 接口的 stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见 pre
2022-04-06 10:52:17
1392
转载 VueX（Vue状态管理模式)
一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.
2021-10-28 12:14:47
151
转载 Vue - 路由守卫
路由守卫是什么？官方解释：“导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。类似于组件生命周期钩子函数路由守卫分类【1】全局守卫：是指路由实例上直接操作的钩子函数，特点是所
2021-10-28 12:02:20
541
原创 双向数据绑定原理
初了解：实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数实现一个Watcher，作为连接Observ
2021-10-27 11:46:27
223
转载 HTTP协议格式（请求格式、响应格式）
超文本传输协议(Hypertext Transfer Protocol，简称HTTP)是应用层协议。HTTP 是一种请求/响应式的协议，即一个客户端与服务器建立连接后，向服务器发送一个请求;服务器接到请求后，给予相应的响应信息。HTTP 请求报文HTTP 请求报文由请求行、请求头部、空行 和 请求包体 4 个部分组成，如下图所示：下面对请求报文格式进行简单的分析： 请求行：请求行由方法字段、URL 字段 和HTTP 协议版本字段 3 个部分组成，他们之间使用空格隔开。常用的 HTTP 请求方.
2021-10-25 12:51:16
3227
转载 JavaScript事件循环机制
前言众所周知，JavaScript 是一门单线程语言，虽然在 html5 中提出了 Web-Worker ，但这并未改变 JavaScript 是单线程这一核心。可看HTML规范中的这段话：To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are
2021-10-25 11:37:25
66
原创 ES6面试题（测试题）
1.简述vue生命周期？从vue实例被创建开始到该实例最终被销毁个过程叫做vue的生命周期。在这个周期内大致发生一下几件事，我们从vue实例被创建开始，首先vue实例被创建，之后开始数据的初始化，编译模板，挂载dom，渲染dom，更新对象属性，渲染dom，解绑销毁。2.什么是插槽？你用过哪些插槽？它是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。3.vu
2021-10-13 02:04:11
1704
原创 JS测试题（部分HTML+CSS）
1、linux中 vim有几种模式？如何进行这几种模式的切换命令模式、输入模式、底线命令模式。一打开vim进去就是命令模式，i进入输入模式，：进入底线命令模式2、css3中animation与transition表示什么意思？animation动画 由@keyframes来描述每一帧的样式transition允许css的属性值在一定的时间区间内平滑地过渡3、css中verticle-align规则有什么作用设置元素内容的垂直对齐方式4、相对定位、绝对定位、固定定位、粘滞定位、静态定位有什么区
2021-09-15 19:25:19
606
原创 jQuery的基本使用
1.介绍jQuery 是一个 JavaScript 函数库。jQuery 极大地简化了 JavaScript 编程。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities2.安装 1.本地下载引用 <script src="jquery.js"></script> 2.CDN载入 1) Google
2021-09-10 17:04:57
249
原创 数组中改变原值与没有改变原值的方法
一、在原值上进行修改的：1.push()向数组的末尾添加一个或多个元素，并返回新的长度。 pop()删除数组的最后一个元素并返回删除的元素。2.shift()把数组的第一个元素从其中删除，并返回第一个元素的值 unshift()向数组的开头添加一个或更多元素，并返回新的长度。3.splice()向/从数组中添加/删除元素，然后返回被删除的元素。 sort()对数组的元素进行排序。4.reverse()用于颠倒数组中元素的顺序。二、没有对原值进行修改的：1.indexOf()返回数组
2021-09-08 20:16:58
442
原创 JavaScript-数组方法重构
前言：数组API的调用使得我们在js的使用中更加方便和快捷，而今天我们要探索数组API方法的底层原理，接下来和大家一起学习数组中的一些方法重构。我们主要学习一下，栈与队列方法、迭代方法两种数组API重构。一、栈与队列方法myPush()myPop()myUnshift()myshift()1.myPush()重写push方法()可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度.//1.在原型中添加自写的pushArray.prototype.myPush = f
2021-08-31 15:45:41
240
原创 HTML+CSS测试题
前言近日对HTML与CSS的学习已经告一段落了，htm和css说难不难说易不易，难于记得东西很多，易于操作，而且在布局方面比较锻炼你的斯维逻辑。但是相对于后面js的学习还是算简单了，前两天我们也进行了一次阶段考试，我整理了一下考试的题目与答案详解，考后答案里面我会习惯性的将相关知识一起注解上去，方便复习学习。下面试卷奉上：一、选择题第九题选择题详解：1.定义和用法enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 “application/x-ww
2021-08-20 11:29:04
2234
原创 HTML-动画实现Animation
前言在没有接触js之前，大家使用HTML和CSS做出来的页面都是静态页面，久而久之，静态页面显得非常的无趣，已经无法满足大家的需求了，就会开始有很多新鲜的idea，比如我想让hover鼠标悬停事件变得更有趣，我想让图片动起来，我想做一个会动的页面，那么不使用js可不可以做呢？答案是必须的~那么今天为大家带来的是动画animationn，可以满足大家一些简单的动态要求。简单介绍Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需
2021-08-18 20:33:34
3257
1
原创 HTML-flex布局
flex布局背景布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，也称为伸缩盒子。用来为盒状模型提供最大的灵活性。flex布局是前端h
2021-08-17 20:34:43
1000
原创 HTML的简单介绍与使用。
前言： 上个文章我们简单的介绍了HTML与CSS，那么本文章我们将简单的使用HTML。这里我选择了VSCode软件进行操作 。1、了解HTML导入的框架含义。许多小伙伴使用HTML的框架都是直接导入或者复制过去的，却不知道HTML导入的框架是什么意思，今天我们一起学习一下导入的框架是什么含义吧。我将讲解都在代码块里注解了。<!DOCTYPE html><html lang="en"><!-- 属性lang是单词langua...
2021-08-02 21:58:20
316
原创 HTML与CSS的定义与初理解。
前言：今天是学习HTML的第一天，在此之前我也有接触HTML，甚至做过一些简单的前端项目，但是今天对HTML定义的重新学习，刷新了我对HTML的认识。想要学好HTML,那么就要搞清楚什么是HTML。接下来分享一下老师的课堂笔记。1、什么是HTML？HTML不是一种编程语言，可能很多小伙伴都误以为HTML是一直编程语言，与C语言，JAVA语言和Python语言同视为编程语言。HTML是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组...
2021-08-02 20:10:00
480
原创 Axure的中级功能
前言：今天是学习Axure的第二天，今天学习的内容是Axure中一些高级的功能，有助于我们对网页设计页面更好的优化和添加功能。下面我们一起来看看吧。一、自适应： 每个电脑、手机和浏览器打开的网页都会随着设备的不同而改变网页页面的大小尺寸，也许在设计者的电脑浏览器上打开是一个整齐有序的页面布局，但是可能在其他的浏览器打开就会打乱布局了，这时候我们就需要使用页面自适应，让我们的页面可以自动去适应不同的电脑、浏览器和手机。1、拖拽元件进行我们自适应视图的使用2、首先我们需要在.
2021-07-29 22:01:28
341
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人