关注
分享
文章平均质量分 83
在学习web后端框架时粗略地学习了一些HTML、CSS、JavaScript，就是用到什么学什么那种，整个下来也仅仅是粗略学习，知识不成体系，对一些细节没有进行了解，为了进一步掌握web后端技术、开发高可用的web程序，就有必要对前端的编程基础及相关框架有所了解，所以有了这个学习系列。
dangfulin
这个作者很懒，什么都没留下…
展开
-
JavaScript 代码片段——计算时间距离
需求：给定一个时间字符串，例如 “2023-09-07 11:33:23”，返回距当前时间的距离，例如 “XX小时前”、“XX分钟前”、“刚刚”、超过一天显示原本时间。输入：time = “2023-09-07 11:33:23”返回：“21小时前”原创 2023-09-08 09:09:27 · 325 阅读 · 0 评论 -
使用 CommonJS 标准的导出语句时报错 JSHint: ‘module‘ is not defined.(W117)
飘红原因是 JavaScript linting 工具 JSHint 无法识别语法 module.exports（Node.js 特有）。要解决此错误，则需要配置 JSHint 以识别 Node.js 环境。原创 2023-02-13 22:19:41 · 927 阅读 · 1 评论 -
在Vue 3项目中使用 echarts
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。这个教程就简单演示如何在 Vue 3 项目中使用 echarts。一，创建 Vue3 项目并安装 echartsnpm 创建项目：npm create u原创 2022-05-01 20:17:32 · 28507 阅读 · 0 评论 -
在 Vue 3 中实现页码切割与折叠
无论是前端还是后端，以手动造轮子的方式来实现页面内容分页，都是一件比较麻烦的事。我们这里不讨论具体分页方式，只来看看前端如何应对页面底部那一行内容分页后的页码列表。普通效果：当页码数量非常多时，就是这种效果：这就需要对页码进行折叠与切割，期望效果如下：未完待续。。。。。。...原创 2022-04-19 22:53:08 · 581 阅读 · 0 评论 -
使 Vue 3 分页组件中当前页页码高亮
使分页结果中当前页码高亮是一个小小的需求：举个例子，就是在下面这样一个组件的模板中，要求当 item 等于当前页码数的时候，{{ item }} 所在的 span 元素拥有区别于其它 span 元素的样式：src/components/PaginationButtons.vue<template> <div class="pagination-buttons"> <button @click="prevPage">◀</button>原创 2022-04-18 22:18:35 · 527 阅读 · 0 评论 -
VUE 3——4：组件内部的组合式 API
复用与组合对工程化的大项目更有意义，因此我们提前介绍了如何创建 Vue 3 项目，简单创建并使用了一些 SFC，接下来就来介绍如何实现 SPC 的复用与组合。原创 2022-04-16 19:50:28 · 2928 阅读 · 0 评论 -
VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导。在前面的文章中，我们不推荐新手直接使用 vue-cli，（尤其是在还不熟悉基于 node.js 的构建工具时），而是通过直接引用的方式：<script src="https://unpkg.com/vue@next"></script>随着页面中组件越写越多，单个 HTML 文件终究无法完成实际的整个 Vue 项目，同时为了对 Vue 的使用有个整体的了解，这里将展示如何通过脚手架工具创建 Vue 3 项目以及一些前置说明。文章目录一，原创 2022-04-14 23:44:49 · 2947 阅读 · 1 评论 -
VUE 3——2：深入组件
在前面简单介绍了什么是组件化以及父子组件之间的简单数据交互，并举了一些小🌰，这里就更详细地讲解一下。文章目录一，组件注册（一）组件命名（二）全局注册（三）局部注册二，Props（一）Prop 值的类型（二）使用 Prop 向子组件传值（三）单向数据流（四）Prop 验证（五）Prop 的命名三，非 Prop 的 Attribute四，组件事件（一）事件名（二）父组件监听子组件事件（三）使用 v-model 的参数（四）处理 v-model 修饰符五，插槽（一）插槽的内容（二）在插槽中插值（三）备用内容（四原创 2022-04-14 10:39:04 · 902 阅读 · 1 评论 -
VUE 3——1：组件基础
文章目录一，安装与使用1，声明式渲染2，处理用户输入3，条件与循环4，组件化应用构建二，应用 & 组件实例（一）创建应用实例（二）根组件与挂载（三）组件实例的 property（四）生命周期三，模板语法（一）插值1，文本插值2，原始 HTML 插值3，绑定 Attribute4，使用 JavaScript 表达式（二）指令1，参数2，动态参数3，修饰符（三）缩写四，Data Property 和 Methods Property（一）Data Property（二）Methods Propert原创 2022-03-17 20:48:50 · 1950 阅读 · 1 评论 -
jQuery——3：jQuery中的事件与应用
关于事件的一些概念以及JavaScript如何处理事件，可以简单参考JavaScript——7：事件及事件处理一，页面载入事件jQuery——1：jQuery基础与选择器中提到过，在文档“就绪”之前，是无法安全操纵页面的。为此， jQuery 的$(document).ready(function(){}); 可以先检测这种状态，功能上它与原生JavaScript中的 window.onload=function(){}; 可以进行替换，但在执行时间、执行数量以及简化能力方面有些区别，这里就这两种方式进原创 2021-05-28 17:30:45 · 496 阅读 · 0 评论 -
jQuery——2：jQuery操作DOM
一，DOM 基础这里不再介绍，可以简单参考：JavaScript——6：操作DOMjQuery——1：jQuery基础与选择器二，jQuery操作 DOM在所有 DOM 操作中，对元素的访问是最频繁，然后就是对元素属性、内容、值、CSS的操作。（一）元素属性操作attr()方法获取和设置元素属性。removeAttr()方法删除某一指定属性。1，获取元素的属性使用$.attr( attributeName )方法获取元素的属性。<!DOCTYPE html PUBLIC "-/原创 2021-05-22 16:26:52 · 348 阅读 · 0 评论 -
jQuery——1：jQuery基础与选择器
一，使用jQuery（一）引入jQuery文件库通常，我们会下载jQuery库到本地进行使用。然后与其他静态文件一样，在 HTML 头部使用标签引入：<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>（二）第一个简单的jQuery程序<!DOCTYPE html><html> <head> <title>第一个简单的j原创 2021-05-20 22:12:16 · 850 阅读 · 9 评论 -
JavaScript——7：事件及事件处理
JavaScript 与用户之间的文互是通过事件驱动来实现的。一，事件概念所谓的”JavaScript使我们能够实现Web页面的交互性“，很大程度上说的就是JavaScript允许Web页面对访问者做的某件事情做出响应。事件是用户在访问页面时执行的操作。当浏览器探测到在某个事件目标上触发了某种事件类型中的某个事件时，它可以执行绑定到该事件的事件处理程序，从而实现灵活的交互性。（一）事件处理模型在浏览器的不同发展阶段与不同的平台中，存在几种不同的[事件处理模型：DOM Level 0：是浏览器初原创 2021-05-01 21:10:50 · 527 阅读 · 0 评论 -
JavaScript——6：操作DOM
一，DOM 基础DOM (Document Object Model，文档对象模型）是 W3C 制定的一套用来描述 JavaScript 脚本怎样与 HTML 或 XML 文档进行交互的 Web 标准API。HTML文档的树状结构包含表示HTML元素 和表示文本字符串的节点：<html> <head> <time>Sample Document</time> </head> <body> <h1>An H原创 2021-04-28 15:23:12 · 313 阅读 · 0 评论 -
HTML——表单
HTML 表单用于搜集不同类型的用户输入。这里将从结构到样式、从数据处理到自定义小部件来介绍HTML表单。一，创建一个表单（一）HTML表单是什么？表单是网页交互的基本工具， 一般网站都借助表单实现用户与服务器之间的信息交流，但是web页面也可以自己拦截它并使用它。HTML表单是由一个或多个小部件组成的，这些小部件可以是输入框、选择框和按钮。而且为了更好地实现无障碍HTML与更好的交互，大多数情况下，这些小部件还需要与描述其目的的标签配对。如何处理表单数据与如何设计好表单一样重要。（二）创建一原创 2021-04-22 21:27:58 · 3178 阅读 · 0 评论 -
JavaScript——3：第一个应用程序
之前简单地介绍过JavaScript的一些基础知识，包括循环、函数、对象等，这里将通过一个bingo游戏的例子介绍对它们的应用。一， 用循环进行重复操作这个示例演示如何建立和使用循环，用随机生成的数字填充 Bingo 卡片的内容：test.html文件：<!DOCTYPE html><html> <head> <title>Make Your Own Bingo Card</title> <link rel="styles原创 2021-04-17 20:57:49 · 118 阅读 · 0 评论 -
JavaScript——2：开始使用 JavaScript
这里以完善一个弹窗提醒功能作为开始。一，将脚本放在哪里（一）放在HTML文件中脚本可以放在 HTML 页面上的两个位置： <head>和</head>标签之间，或者<body>和</body>标签之间。<!DOCTYPE html><html><head> <title>My first script</title></head><body> <h1&原创 2021-04-15 23:38:50 · 192 阅读 · 0 评论 -
JavaScript——1：了解 JavaScript
最开始的HTML相当简单，很容易就能够掌握设计网页所需知道的一切。但随着 Web 的发展，页面设计人员还希望他们的页面能够与用户进行交互， HTML 很快就显得不足以满足这一需求了，而JavaScript的发明，就为控制浏览器和网页添加了许多活力和交互方法。一，JavaScript 是什么JavaScript 是一种可以用来给网页增加交互性的编程语言。JavaScript 程序也被称为“脚本”，它们包含在 HTML 页面内部（最初编写脚本的方式）或者驻留在外部文件中（通常的方法）。例如：<!D原创 2021-04-13 21:03:14 · 263 阅读 · 0 评论 -
Vue：表单与v-model
Vue提供了 v-model 指令，用于在表单类元素上双向绑定数据。一，基本用法v-mode负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将Vue实例的数据作为数据来源。v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：text 和 textarea：value property 和 input 事件。checkbox 和 ra原创 2020-11-19 10:11:15 · 204 阅读 · 0 评论 -
Vue：内置渲染指令与事件
一，基本指令1，v-cloakv-cloak 不需要表达式，它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除，经常和css的display:none配合使用，以解决低网速下Vue实例初始化慢导致页面的闪动：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>学习Vue</title> <style type="text/css"&原创 2020-11-04 23:25:13 · 1274 阅读 · 0 评论 -
Vue：Class与Style绑定
一，回顾1，v-bind指令在前面我们已经使用过v-bind指令了，它的基本用途是动态更新HTML元素上的属性。它还支持指令缩写，2，计算属性计算属性computed就是内部可以对各属性进行计算的Vue属性。一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，并响应式地返回一个结果。二，绑定class在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式 style 的动态绑定，它们也是HTML的属性，因此可以使用v-bind:class指令。1，对象语法1，绑定单字原创 2020-11-03 14:40:04 · 698 阅读 · 0 评论 -
Vue：计算属性
一，计算属性通过前面的学习，我们可以在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>这里是想要显示变量 message 的翻转字符串，为了达到目的。这个表达式包含了三个操作。显然，如果想要在模板中多包含此处的翻转字符串时，就会显得代码相当臃肿。当一个属性的值依赖于其它属性的原创 2020-11-02 19:51:20 · 1679 阅读 · 1 评论 -
Vue：指令概述
一，指令1，指令在之前的Vue文章中我们已经使用过指令了，比如v-bind、v-pre等。其实指令Directives就是带有 v- 前缀的特殊 。指令attribute的值预期是单个JavaScript表达式 (v-for 是例外情况)。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。举个例子：<div id="app"> <p v-if="show">现在你看到我了</p></div><script原创 2020-10-31 19:51:55 · 278 阅读 · 0 评论 -
Vue：Vue实例与数据绑定
一，实例与数据1，构造函数在Vue：创建Vue项目Hello Vue！的初学者部分，我们都使用到var app ＝new Vue({ //doSomething }）这样的语句。它的作用，就是通过构造函数 Vue() 创建一个 Vue 的根实例app，并启动 Vue 应用。几乎所有代码都是作为对象传入Vue实例的选项内。2，el对象el 用于指定 个页面中己存在的 DOM 元素来挂载Vue实例。它可以是HTMLElement，也可以是CSS选择器。下面两种写法是等价的：<div id=原创 2020-10-31 14:56:42 · 2204 阅读 · 0 评论 -
Vue：创建Vue项目Hello Vue！
1，安装nodejs。傻瓜式安装。2，安装检查。打开CMD，进入安装目录，输入：node -v能查看到node的版本号，表示安装成功。3，创建全局安装文件夹与缓存文件夹。在安装路径D:\tools_software\nodejs下创建两个文件夹node_global与node_cache，并在CMD中执行以下两条命令：npm config set prefix "D:\tools_software\nodejs\node_global"npm config set cache "D:\t原创 2020-10-30 15:27:38 · 1785 阅读 · 0 评论 -
jQuery入门
一，jQuery是什么?jQuery是一个在页面中引用的JavaScript文件。 它允许你通过CSS样式选择器来找到一些元素， 并且在这些元素上使用jQuery提供的一些方法。jQuery对象拥有很多方法来操作选中的元素。 这些方法对应需要对节点进行的常用操作。1：使用CSS样式选择器查找元素可以通过一个名叫jQuery()的函数在页面中查找一个或多个元素。 它会创建一个名叫jQuery的对象， 其中保存了这些元素的引用° 为了便于书写，通常会使用缩写$()来代JQuery()。如下所示：与D原创 2020-09-07 21:33:44 · 751 阅读 · 0 评论 -
JavaScript基础入门
一，什么是JavaScript1，与Java无关！与Java无关！与Java无关！JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。JavaScript的引入，符合”渐进增原创 2020-08-21 16:07:43 · 5446 阅读 · 1 评论 -
CSS3从入门到入门就行
一，CSS3为了满足日益丰富的网页设计需求，HTML 不断添加各种显示标签和样式属性 。 由此带来了一个问题 ： 网页结构和样式混用让网页代码变得混乱不堪，代码冗余增加了带宽负担，代码维护也变得苦不堪言 。CSS ( Cascading Style Sheet ）表示层叠样式表，是用于控制网页样式并允许将样式代码与网页内容分离的一种标记性语言。使用CSS样式可以控制许多仅使用HTML无法控制的属性。当在浏览器中打开一个HTML网页时， 浏览器将读取该网页中的HTML标签，并根据内置的解析规则原创 2020-08-16 17:44:29 · 759 阅读 · 0 评论 -
web前端基础概述：基于一个简单的网页示例
在学习web后端框架时粗略地学习了一些HTML、CSS、JavaScript，就是用到什么学什么那种，整个下来也仅仅是粗略学习，知识不成体系，对一些细节没有进行了解，为了进一步掌握web后端技术、开发高可用的web程序，就有必要对前端的编程基础及相关框架有所了解，所以有了这个学习系列，参考的书有《JavaScript & jQuery交互式Web前端开发》、《JavaScript从入门到精通 标准版》和《Web前端开发 HTML5+CSS3+jQuery+AJAX从学到用完美实践》。一，HTML原创 2020-08-14 20:35:39 · 3108 阅读 · 0 评论