前端学习
文章平均质量分 91
今天不想敲代码
感谢你来过
展开
-
Vue3 学习
Vue31. 增加了setup语法糖,用来写组合api2. 支持多个根节点,支持jsx3. 只引入所需要的Api4. 引入了proxy来重写双向绑定proxy与vue2的Object.defineProperty(obj, prop, desc)方式相比有以下优势: 丢掉麻烦的备份数据 省去for in 循环 可以监听数组变化 代码更简化5. 增加了补丁标记用来标记动态原创 2022-11-11 16:26:00 · 2522 阅读 · 0 评论 -
一个逗号引发的惨案
本地打包一直导出失败,云打包一直处于正在编译。后面百度到有可能是条件编译写错了,反正不影响app样式就删了,然后打包成功。一直很不解,明明语法没有错为什么会出错。json文件不能出现多余字符,也就是说打包app时候,条件编译里面的代码不执行,这个时候上一条代码后面就多出来一个逗号原创 2022-11-09 17:05:59 · 341 阅读 · 0 评论 -
前端学习——React路由详解
一. React路由1.1 SPA的理解SPA简而言之就是单页面应用单页Web应用(single page web application,SPA)整个应用只有一个完整的页面点击页面中的链接不会刷新页面, 只会做页面的局部刷新数据都需要通过Ajax请求获取,并在前端异步展现1.2 路由的理解1.2.1 什么是路由一个路由就是一个映射关系(key对应的有value)key为路径,也就是path,并不是url,url和path的区别在于path不包括前面的ip地址和端口号,只专注一后面原创 2021-08-07 15:08:47 · 1063 阅读 · 1 评论 -
前端学习——初识Vue组件
一. Vue组件了解什么是Vue的组件?Vue的组件在我看来是Vue自定义标签的一种形式,就是将Html标签封装到Vue自定义组件里面,然后通过自定义的组件名然后在body中进行调用,用来完成数据交互的,能够提高前端代码的复用性1.1 组件分类1.1.1 全局组件全局组件:Vue.component(‘组件名’,{}),{}内部采用的是vue语法。不需要在vue实例中注册。下面是代码实例Vue.component("zwj",Vue.extend({ template: "<h2原创 2021-05-25 17:41:30 · 190 阅读 · 0 评论 -
前端学习——Vue框架基础入门
一. 了解MVC和MVVM模式1.1 MVC模式相信大家都很清楚MVC的设计模式,其实准确的来说MVC并不能算是一种设计模式,他算是一种框架模式。经典的MVC模式中,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的牡蛎是将业务模型层和用户界面层实现代码分离,使同一个程序可以使用不同的表现形式下面详细的讲一下MVC三个分别代表什么视图层视图层也就是V,就是View,是指用户看到并与之交互的界面,也就是我们常常看见的网页,由Html元素则称的网页界面,或者软件的客户端界面。业务模型原创 2021-05-23 10:02:23 · 597 阅读 · 0 评论 -
前端学习——NodeJs基础篇
一. NodeJs简介1.1 nodeJs的诞生在Netscape设计出JavaScript后的短短几个月,JavaScript事实上已经是前端开发的唯一标准。后来,微软通过IE击败了Netscape后一统桌面,结果几年时间,浏览器毫无进步。没有竞争就没有发展。微软认为IE6浏览器已经非常完善,几乎没有可改进之处,然后解散了IE6开发团队!而Google却认为支持现代Web应用的新一代浏览器才刚刚起步,尤其是浏览器负责运行JavaScript的引擎性能还可提升10倍。先是Mozilla借助已壮烈牺牲原创 2021-05-08 21:27:55 · 1027 阅读 · 0 评论 -
前端学习——ES6新特性
ECMAScript6简介ECMAScript 6.0(简称ES6)是 JavaScript 语言在 2015 年 6 月正式发布的新标准。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ECMAScrip和JavaScript的关系1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(EC原创 2021-05-06 09:53:52 · 247 阅读 · 0 评论 -
原生JavaScript利用面向对象的思想实现贪吃蛇案例
一. 原生JS面向对象思想实现贪吃蛇1.1 功能演示本次给大家带来的是一款网页的小游戏,贪吃蛇的写法,而且本次贪吃蛇是基于JavaScript面向对象的思想来编写的,使用的是原生JS的方式实现下面我就来给大家讲解,怎么运用面向对象的思想来编写这款贪吃蛇小游戏老规矩先来看看运行的gif图片里面包含里几个功能开始功能结束功能重新开始功能模式切换功能碰到边线游戏结束咬到自己游戏结束生成的食物不会出现在蛇身上这个贪吃蛇主要就包含了这几个功能,下面就来讲解一下怎么运用面向对象的思想来编原创 2021-04-19 23:05:21 · 468 阅读 · 0 评论 -
前端学习——JS基础知识点复习
一. JS复习1.1 如何使用JSHTML标签内使用JS,要求写在onclick等事件属性或者href属性中(不推荐使用)页面中的script标签内可以直接写JS代码script标签的src属性可以用来引入第三方JS文件(推荐使用)1.2 变量变量的概念变量就是计算机内存中存储的数据的标识符,根据变量名可以调用到内存中的数据变量的声明方式/*使用var的方式声明和赋值一个变量*/var num = 10;/*使用变量*/console.log(num);/*使用let的原创 2021-04-15 09:07:26 · 466 阅读 · 0 评论 -
前端学习——CSS重要知识点概括
一. CSS复习1.1 CSS的使用方式内联样式:内联样式又称为行内样式,使用标签的style属性来设置,只能设置一个标签的样式,谨慎使用内部样式:内部样式写在head标签中的style标签内,只能设置当前页面的样式,酌情使用外部样式:单独的css文件,使用link标签的href属性引入,只要引入了该文件的页面都可以被设置样式,推荐使用1.2 CSS选择器名称语法描述通配符选择器*{}选择所有标签(谨慎使用)ID选择器#id要求ID的值唯一,如果页面中存在原创 2021-04-12 20:13:41 · 193 阅读 · 0 评论 -
前端学习——HTML重要知识点概括
HTML复习行级标签 行级标签特点,所有行级标签默认在一行内显示,并且该类标签都没有高和宽的概念 <i>字体斜体</i> <em>字体斜体(语义化标签,表示强调)</em> <b>字体加粗</b> <strong>字体加粗(语义化标签,表示着重)</strong> <s>删除线</s> <del>删除线(语义化标签,表示删除原创 2021-04-12 20:03:05 · 97 阅读 · 0 评论 -
前端学习——jQuery动画
一. jQuery内置动画jQuery一共有九种内置动画内置动画一共有两个参数参数一为number类型,单位是毫秒数,默认都是400/String类型的单词表示normal普通速度(400),fast(200),slow(600)参数二是function类型的回调函数,表示在动画执行完毕自动执行的函数1.1 显示这里面涉及到三个函数show 显示基本语法$("#show").click(function () { //控制div显示 $("#main").show原创 2021-04-10 08:46:12 · 268 阅读 · 1 评论 -
前端学习——jQuery入门篇
一. jQuery入门1.1 初步感受jQuery使用jquery简单写个tab切换小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; width: 20原创 2021-04-05 09:28:26 · 250 阅读 · 0 评论 -
前端学习——JavaScript原生实现购物车案例
一. 购物车案例1.1 案例介绍今天我们来写另外一个购物车案例,说实话对于我来说这个是花了将近三个小时的时间然后才做出来的,里面可能还存在一些我没有发现的问题,但是能完成基本的功能,对于一些基本的需求都是可以完成的,下面照旧是案例实现的gif图片根据上图我们可以看到,每个购物车的选项都是互不影响的,每个商店也都是互不影响的,单独运算,每个店的总计也是单独计算的,有一个计算复选框总价的功能,而且这是个通用的模板,不论有多少个店铺,店铺里面的商品有多少个,只要html的结构不变都是可以通用的,那么不多说原创 2021-03-30 09:37:38 · 4114 阅读 · 12 评论 -
前端学习——JavaScript抽屉,手风琴,购物车特效案例
一. JavaScript案例介绍这篇我们通过一些JavaScript案例来完成对JavaScript中BOM对象和DOM对象的理解首先我们会学到三种常用的JavaScript案例特效分别是手风琴切换特效抽屉切换特效购物车案例特效手风琴特效展示抽屉切换特效展示购物车案例特效下面咱们先从简单的做起首先先做抽屉特效的案例二. 抽屉特效2.1 页面元素编写通过上图我们可以知道页面存在着一个类似于导航栏的可以供我们切换的标签,和准备的25张图片那么我们就开始写吧<b原创 2021-03-26 10:40:23 · 3225 阅读 · 5 评论 -
前端学习——JavaScript中的BOM和DOM对象
一. Bom对象1.1 什么是BOM什么是BOM对象,BOM全拼是(Browser Object Model)浏览器对象模型,是JavaScript的重要组成部分,它提供了一系列对象用于与浏览器窗口进行交互,这些对象统称为BOM对象BOM对象包含以下BOM对象可以实现的功能有弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退1.2 window对象—BOM核心window,顾名思义,窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window对象原创 2021-03-25 21:36:53 · 268 阅读 · 1 评论 -
前端学习——JavaScript对象
一. JavaScript对象1.1 创建对象创建对象遵循规则对象中单个属性的属性名和属性值使用冒号隔开多个属性之间用逗号隔开最后一个属性或函数后不加逗号对象的属性名可以不遵守变量命名规则不遵守命名规则的属性名必须使用单引号或者双引号包裹(符合变量名要求的属性名也可以使用引号包裹)创建对象方式一/*创建JS字面量对象*/let stu = { name: '柳园', sex: '????', age: 18, show: function原创 2021-03-24 21:38:37 · 170 阅读 · 0 评论 -
前端学习——JavaScript基础知识
一. JavaScript了解1.1 JavaScript简介JavaScript 编程语言 流程控制Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为 JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似 之处,一些名称和命名规范也借自Java。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和Java原创 2021-03-17 23:24:31 · 325 阅读 · 0 评论 -
前端学习——flex伸缩布局
一. 伸缩布局(flex)1.1 伸缩布局简介伸缩布局是一种CSS3的新布局方式,又叫弹性布局,不同于传统的块级元素布局,伸缩布局是一种在容器里面通过设置容器的属性,进而对容器里面的数据进行自适应伸缩布局的一种方式。大致意思就是能够实现容器内的元素自动适应整个容器,减少了对内边距,外边距的计算就能完成对容器内元素的布局基本语法块级元素设置flex布局display: flex;行内元素设置flex布局display: inline-flex;1.2 基本概念采用 Flex 布局的元素原创 2021-03-15 20:39:52 · 921 阅读 · 0 评论 -
前端学习——CSS3实现动画效果
一. CSS3动画1.1 CSS3过渡效果过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不仅仅局限于h原创 2021-03-12 00:09:55 · 1507 阅读 · 0 评论 -
前端学习——字体图标的选取和应用
一. CSS字体设置通常我们设置CSS的字体的时候有以下几种方法通过图片转换为图标在网页中引用(耗费资源)精灵图,通过背景图片的坐标进行切换(需要对一张精灵图进行不停的切换坐标,并且不易于维护)字体图标,将图标设立成字体来使用下面讲的主要是第三种方法,字体图标,可以随意的改变图标的大小和颜色,并且易于维护1.1 字体图标的优点可以做出跟图片一样可以做的事情,改变透明度、旋转度,等…但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…本身体积更小,但携带的信息并没有削减。原创 2021-03-10 21:28:10 · 461 阅读 · 0 评论