前端
关注
分享
扫一扫
文章平均质量分 61
可期！
前端路上
展开
-
DOM 方法 以及 DOM的增删减改
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。一. DOM 方法这里讲解一些DOM的基本方法，叫你如何获取HTML标签：在document中有一个属性body，他保存的是body的引用var body = document.body;document.documentElement保存的是html根标签var html = document.document原创 2022-02-23 11:23:07 · 531 阅读 · 0 评论 -
DOM 键盘事件 鼠标移动
一. 键盘事件要操作键盘事件就需要获取键盘按键的位置，点击后按键后触发，松开后结束事件。1. 这里我们使用关键词：onkeydown 键盘被按下 被按下会一直触发onkeyup 键盘被松开 只会触发一次这两个关键词往往会同时使用，有触发就有结束2.键盘事件一般都会绑定给一些获取焦点的对象或者是document下面我们来演示一下：document.onkeydown = function(event){ if(event.keyCode === 89 &&a原创 2022-02-22 23:08:52 · 622 阅读 · 0 评论 -
Vue 关于组件的嵌套,用实例讲解教你如何嵌套
Vue嵌套，关于嵌套就是将一个组件嵌套到另一个组件中，那么外部的组件就是父组件，内部的组件就是子组件，我们就可以通过父组件来控制子组件。将组件嵌套使用，方便开发者对组件的管理，及使用。那么在将组件的嵌套前我们先来讲一些关于使用组件的注意点：1.关于组件名： 一个单词组成： 第一种写法（首字母小写）：school 第二种写法（首字母大写）：School原创 2022-01-29 19:53:53 · 5624 阅读 · 0 评论 -
Vue 关于组件--创建--注册--使用
来到组件的学习，首先我们要了解什么是Vue组件。还不知道的同学可以先了解什么是组件在来学习组件的使用。我的总结：组件就是可复用的Vue实例。使用组件的三大步骤：首先第一步: 定义组件（创建组件）第二步： 注册组件第三步： 使用组件（写组件标签）第一步，定义组件，我们以school组件为例，创建school组件。const school = Vue.extend({ template:` <div> <h2原创 2022-01-26 13:42:49 · 1448 阅读 · 0 评论 -
css vw视口，响应式布局 及 媒体查询
一.vw视口在css中，存在视口 vw 表示视口宽度 全名：（viewport width）-100vw = 一个视口宽度(一个设计图的宽度)-1vw = 一个视口1%宽度其中这个单位永远参照视口宽度计算，计算如下：100vw=设计图像素(750px) 1px = 100vw/750px = 0.133333333vw40px = 0.133333333*40 = 1px*40在设计中设计视图宽度一般是： 750px 或 1125px在这里还有一个值：rem1rem = 1个原创 2021-12-26 18:01:32 · 734 阅读 · 0 评论 -
JS基础语法 【数组】的讲解
数组是 js 中最常用的数据类型之一，属于对象类型中的内置对象。一个数组类型的变量可以保存一批数据，且数据可以是任意数据类型。这里就为大家讲解数组的用法及如何创建。一. 创建数组其中包括两种方式：1.使用array 对象的方式2.直接使用 “[]” 的方式创建1.使用array 对象创建首先实例化array对象的方式创建数组是通过 new 关键字实现的。如下代码讲解用法：元素值类型为字符型var area = new Array(‘china’,‘chinese’,‘USA’);元素值原创 2021-12-26 17:39:48 · 486 阅读 · 0 评论 -
练习 JavaScript 的嵌套循环实现 9*9乘法表
在制作表格之前我们需要找到表格的规律：1.首先9*9 乘法表是由9行9列的单元格组成；2.其次：乘法表的层数 = 表格的行数 = 每行的列数。分析完布局规律后，我们在找 运算规律：1.其中被乘数的取值范围 ‘1~ 每行中的列数’之间；2.乘数的值是表格的行数；下面根据分析用代码实现：<script> for(var i=1;i < 10; i++){ for(var j=1; j<=i; j++){原创 2021-12-25 15:01:22 · 1233 阅读 · 0 评论 -
JavaScript 数据类型分类（基本数据类型 及 对象数据类型）
在JavaScript中支持多种数据类型，其中我们将他们分为两类，包括：基本数据类型和引用数据类型。其中：基本数据类型：boolean（布尔型）string （字符型）number（数值型）null（空型）undefined（未定义型）引用数据类型：object（对象）文章目录1.布尔型2.数值型3.字符型4.空型5.未定义型1.布尔型布尔型( Boolean)是 JavaScripl中较常用的数据类型之一，通常用于逻辑判断。它只有 true 和 false 两个值，表示事物的“原创 2021-12-24 10:14:21 · 2883 阅读 · 0 评论 -
JavaScript 对象讲解 详细解释
对象：说到对象先为大家讲讲对象的用途：对象就是对项目，功能的划分管理。文章目录对象：1.window对象2.document对象3.String对象4.自定义对象1.window对象window 对象是 JavaScript 与浏览器之间交互的主要接入点，提供JavaScript 脚本的接口。其中：console 和 document 是window对象的属性，alert(), prompt() 是window对象方法。写法如下：window.console;window.documen原创 2021-12-23 13:06:59 · 492 阅读 · 0 评论 -
JavaScript 函数 解释及用法
函数今天为大家讲解：1.函数的用途2、函数的返回值3.函数的参数4.自定义函数一. 函数的用途讲到函数，大家一定好奇函数的用途是什么，那么下面就为大家讲解函数的用途：当程序规模较大，不便于阅读或修改时，我们为了使代码模块化，组件化管理，就用到的函数，这样我们只需要调整一个个函数来完成，既减少重复代码，又使代码编写更有调理。例如: alert()函数。alert指的是函数名，小括号用于接收输入的参数二.函数的返回值函数执行后可以返回一个表示执行结果的值，如下示例：var name =原创 2021-12-22 12:52:16 · 625 阅读 · 0 评论 -
JavaScript 常用输出语句 及 数据与运算
若是今朝共淋雪，此生也算共白头JavaScript常用输出语句1. alert()2.console.log()3.document.write()数据运算常用输出语句利用输出语句可以输出一段代码的执行结果，在学习 JavaScript 的过程中会经常用到输出语句。因此，接下来为大家介绍3个常用的输出语句。1. alert()alert() 用于弹出一个警告框，确保用户可以看到某些信息。利用alert()可以很方便的输出一个结果，经常用来测试程序。2.console.log()console原创 2021-12-21 11:52:55 · 1284 阅读 · 0 评论 -
JavaScript引入方式及常用输出语句
没有准备好就不要开始，开始了就不要轻易放弃JavaScript语言有很多语法概念，如函数，事件，对象等；这些内容相对复杂,关联性强。一. JavaScript 引入方式在编写网页时使用JavaScript 语言，可以使用嵌入式，外链式，行内式这三种方式来引入JavaScript代码。1. 嵌入式嵌入式就是使用<script> 标签包裹代码，直接编写在HTML文件中。我们参照如下实例：<script>JavaScript 语句</script><s原创 2021-12-19 13:38:03 · 1227 阅读 · 0 评论 -
Vue指令 关于---v-html_指令 和 v-test_指令 详解
要学会大大方方的表达爱意，爱不是冷冰冰，爱是炙热的，永远都是，笨蛋才会说反话，笨蛋才会把喜欢的人越推越远一.在讲解 v-test_指令 和v-html_指令 前我么先回顾一些基本指令： v-bind : 单项绑定解析表达式，可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组，对象，字符串 v-on : 绑定事件监听，可简写为@ v-if : 条件渲染（动态控制节点是否存在） v原创 2021-12-14 21:45:00 · 2101 阅读 · 0 评论 -
Vue 使用三种方式写过滤器
「喜欢是和优点谈恋爱，那么爱就是和缺点过日子啦」文章目录1.全局过滤器2.计算属性实现3.监测属性实现4.filters 局部过滤器1.全局过滤器这里是一个全局过滤器，可以在全局调用，其中参数value可以收取到属性得到的值然后通过slice（0,4）获取前四位，下面讲解分别使用计算属性 监测属性 fliters局部过滤器实现。Vue.filter('mySlice',function(value){ return value.slice(0,4) })2.计算属性实原创 2021-12-13 22:15:47 · 874 阅读 · 0 评论 -
Vue 收集表单数据 详细解释
相信自己的直觉，顽固的人不喊累！今天来详细解释Vue 收集表单的数据，说到数据我们就想到要使用v-model ，双向数据绑定，技能收集用户输入数据，又能想页面传入数据那么我们下面就来做一个简单的表单介绍vue是如何收集数据的1.首先我们使用html编写一个简单的表单，有输入框，单选框，多选框，密码框，下拉框，文本框，以及按钮<form id="root" @submit.prevent='dome'> 账号:<input type="text" v-model.tr原创 2021-12-09 17:10:37 · 1379 阅读 · 0 评论 -
Vue 使用监视属性 和 计算属性实现列表过滤 详细解释
任何一个人都无法达到你对他的全部预设，把美好的生活寄托在自己身上今天的任务是实现列表过滤Vue 使用两种方式实现列表过滤下面让我们一步一步完成任务：第一步：先编写html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m原创 2021-12-07 12:09:02 · 586 阅读 · 0 评论 -
Vue 的计算属性(computed)
今天有事努力的一天！！！如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。上知识！在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性比如说我们在下面举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-12-06 10:52:12 · 275 阅读 · 0 评论 -
Vue 基本列表 v-for 详细讲解 以及key 的原理
vue基本列表 （v-for）v-for 指令：1.用于展示列表数据2.语法：v-for=’(item,index) in/of xxx’ :key=‘yyy’3.可遍历：数组，对象，字符串，指定次数数组，对象，字符串，指定次数 的遍历具体如下代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa原创 2021-12-05 14:40:21 · 1942 阅读 · 0 评论 -
Vue.js 条件渲染 （v-if v-else v-else-if v-show）
一. Vue条件渲染分享我的学习收获希望能够帮到大家今天为大家分享关于Vue的条件渲染（v-if v-else v-else-if v-show）下面我们来结合代码理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-12-02 18:16:35 · 565 阅读 · 0 评论 -
Vue.js 事件绑定 class 和 style 的绑定
一.事件绑定1.绑定class样式字符串写法对象写法数组写法2.绑定style样式对象绑定法下面我们来一一介绍不同方法的使用方法及使用场景，大家可以先看代码中不同方法的使用，看不懂的小编也会在后面讲解的哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=原创 2021-12-01 17:25:08 · 1184 阅读 · 0 评论 -
CSS3 动画效果
css动画效果想提升的朋友可以关注我，不懂的地方私信必回，我们一起进步。代码可直接复制，更换你想换的图片，运行起来即可展现美丽的动画效果以下代码内涵注释，看不懂的可以私信我<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2021-09-08 10:44:43 · 181 阅读 · 2 评论 -
css3制作百鸟时钟
初出茅庐，我们一起进步！！！css3制作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-09-05 10:50:17 · 262 阅读 · 3 评论