Javaweb-前端视图篇
文章平均质量分 57
《JavaWeb新手入门:从HTML到Vue+SpringBoot》专栏带你快速掌握现代Web开发!从HTML/CSS/JS基础起步,学习Vue3前端开发,再到SpringBoot后端实战,完整构建前后端分离应用。专栏特别补充Servlet原理和HTTP协议等核心知识,帮你打通JavaWeb的脉络
EFTW28
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【JavaWeb新手入门】进阶篇之Vue加载Element-plus
按需导入才是我们的最爱,毕竟在真实的应用场景中并不是每个组件都会用到,这会造成不小的浪费。不仅仅是提供了各种组件,同时还提供了一整套的字体图标方便开发者使用。如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。Element,一套为开发者、设计师和产品经理准备的基于。接下来就可以直接在组件中引入使用了。Element Plus 基于。,面向设计师和开发者的组件库。最后,可以直接在组件中使用。文件夹,在文件夹下创建文件。在项目根目录下,创建。原创 2025-05-24 15:41:30 · 215 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue3新特性
在2.x中methods来定义一些当前组件内部方法methods:{http(){}在3.x中直接在setup方法中定义并returnsetup() {return {http。原创 2025-05-22 20:21:39 · 295 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue状态管理(Vuex)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。简单来说,状态管理可以理解成为了更方便的管理组件之间的数据交互,提供了一个集中式的管理方案,任何组件都可以按照指定的方式进行读取和改变数据。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。对Vuex中的数据进行过滤。第四步:在组件中读取状态。原创 2025-05-18 21:14:50 · 330 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue路由
Vue Router 是 Vue.js 的官方路由。页面跳转过程中,是可以携带参数的,这也是很常见的业务。例如:在一个列表项,点击进入查看每个列表项的详情。第二步:在路由配置文件中添加子路由配置。第三步:在详情页面读取路由携带的参数。第一步:创建子路由要加载显示的页面。第一步:在路由配置中指定参数的。第二步:在跳转过程中携带参数。第二步:配置独立的路由文件。第四步:指定路由显示入口。第三步:指定子路由显示位置。第四步:添加子路由跳转链接。第三步:引入路由到项目。第五步:指定路由跳转。原创 2025-05-15 12:45:35 · 139 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue-Axios
同源策略是浏览器的一项安全策略,浏览器只允许js 代码请求和当前所在服务器域名,端口,协议相同的数据接口上的数据,这就是同源策略.也就是说,当协议、域名、端口任意一个不相同时,都会产生跨域问题,所以又应该如何解决跨域问题呢。在日常应用过程中,一个项目中的网络请求会很多,此时一般采取的方案是将网络请求封装起来。Axios 是一个基于 promise 的网络请求库。Axios的应用是需要单独安装的。分别用来存放网络请求方法和请求路径。,用来存储网络请求对象。在组件中直接调用网络请求。JS采取的是同源策略。原创 2025-05-13 20:55:21 · 239 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue引入第三方
是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。官方文档:https://swiperjs.com/vue。开源、免费、强大的触摸滑动插件。原创 2025-05-12 22:24:33 · 147 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue组件
发送数据methods:{this.$emit("onCustom","数据")原创 2025-05-12 22:24:23 · 246 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue表单输入绑定
本质上不过是语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。事件触发后将输入框的值与数据进行同步。如果要自动过滤用户输入的首尾空白字符,可以给。原创 2025-05-10 20:23:52 · 138 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue事件处理
符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在。这是官方的翻译称呼,其实我们可以直接叫他 “事件传递参数”还可以接收一个需要调用的方法名称。原创 2025-05-09 18:02:41 · 211 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue条件与列表渲染
渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的。是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。则是被迭代的数组元素的。原创 2025-05-08 20:04:46 · 194 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue模版语法
在我们的模板中,我们一直都只绑定简单的 property 键值,Vue.js 都提供了完全的 JavaScript 表达式支持。这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含。双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用。数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值。Mustache 语法不能在 HTML 属性中使用,然而,可以使用。原创 2025-05-08 20:04:34 · 304 阅读 · 0 评论 -
【JavaWeb新手入门】进阶篇之Vue先导篇
在控制台中,可以用空格(spacebar)选择是否选中和取消选中。可以选择默认项目模板,或者选“手动选择特性”来选取需要的特性。Vue是前端优秀框架, 是一套用于构建用户界面的。都可,前者针对Vue2版本,后者针对Vue3版本。在控制台中,可以用上下按键调整选择项。在package.json文件。运行以下命令来创建一个新项目。将其保存为未来项目的预置?Vue目前有两个主流大版本。以避免不必要的错误提示。项目创建成功如下提示信息。在学习期间,不要选中。代表保存,并添加名字,第一步:进入项目根目录。原创 2025-05-08 20:04:06 · 320 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS函数
function 命令: function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。JavaScript函数提供两个接口实现与外界的交互,其中参数作为入口,接收外界信息;函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。函数是一段可以反复调用的代码块。原创 2025-05-07 20:25:38 · 185 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS节流
其实很简单:我们可以设计一种类似控制阀门一样定期开放的函数,也就是让函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活(类似于技能冷却时间)如果在限定时间段内,不断触发滚动事件(比如某个用户闲着无聊,按住滚动不断的拖来拖去),只要不停止触发,理论上就永远不会输出当前距离顶部的距离。效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。如果一直拖着滚动条进行滚动,那么会以300ms的时间间隔,持续输出当前位置和顶部的距离。原创 2025-05-07 20:25:15 · 154 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS防抖
对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面的1000毫秒)内,事件处理函数只执行一次。原创 2025-05-07 18:18:28 · 290 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS定时器
函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。JavaScript 提供定时执行代码的功能,叫做定时器(timer),主要由。指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。还有一个需要注意的地方,如果回调函数是对象的方法,那么。是将要推迟执行的函数名或者一段代码,第二个参数。关键字指向全局环境,而不是定义时所在的那个对象。它们向任务队列添加定时任务。函数接受两个参数,第一个参数。完全一致,区别仅仅在于。原创 2025-05-07 18:18:18 · 346 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS事件类型
它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发。input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是。reset事件当表单重置(所有表单成员变回默认值)时触发。表单事件是在使用表单元素及输入框元素可以监听的一系列事件。),用户改变选项时,也会触发这个事件。元素,因为提交的是表单,而不是按钮。上,而不是发生在表单的成员上。keyCode:唯一标识。原创 2025-05-06 18:06:44 · 405 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS-Event事件对象
Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后,浏览器默认会跳转到另一个页面,使用这个方法以后,就不会跳转了。stopPropagation方法阻止事件在 DOM 中继续传播,防止再触发定义在别的节点上的监听函数,但是不包括在当前节点上其他的事件监听函数。Event.type属性返回一个字符串,表示事件类型。事件的类型是在生成事件的时候。事件发生以后,会产生一个事件对象,作为参数传给监听函数。Event.target属性返回事件当前所在的节点。原创 2025-05-06 18:06:33 · 222 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS事件处理程序
这些方法在使用的时候,除了DOM2级事件,都需要添加前缀。鼠标事件指与鼠标相关的事件,具体的事件主要有以下一些。"Hello DOM0级事件处理程序1""Hello DOM0级事件处理程序2""hello html事件处理""DOM2级事件处理程序1""DOM2级事件处理程序2""DOM2级事件处理程序3"原创 2025-05-05 17:56:24 · 411 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS-CSS操作
操作 CSS 样式最简单的方法,就是使用网页元素节点的。方法直接操作网页元素的。原创 2025-05-05 17:56:15 · 224 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS-Element对象
属性返回一个整数,表示元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border,以及水平滚动条的高度(如果存在滚动条)。属性返回一个整数值,表示元素节点的 CSS 高度(单位像素),只对块级元素生效,对于行内元素返回。属性返回元素节点的 CSS 宽度,同样只对块级元素有效,也是只包括元素本身的宽度和。属性返回一个整数值(小数会四舍五入),表示当前元素的总高度(单位像素),它包括。属性,返回当前视口的高度(即浏览器窗口的高度)。,如果有垂直滚动条,还要减去垂直滚动条的宽度。原创 2025-04-30 18:24:33 · 645 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS-document对象_方法/获取元素
方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回。如果没有任何匹配的元素,就返回一个空集。方法搜索 HTML 标签名,返回符合条件的元素。名字符合指定条件的元素,元素的变化实时反映在返回结果中。比如,如果某个节点的。如果没有发现匹配的节点,则返回。实例),并返回该节点。它的参数是文本节点的内容。对象,包含所有匹配给定选择器的节点。方法用来生成元素节点,并返回该节点。方法返回一个类似数组的对象(原创 2025-04-30 18:24:17 · 937 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS-DOM概述
DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如对元素增删内容)浏览器会根据 DOM 模型,将结构化文档HTML解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口DOM 只是一个接口规范,可以用各种语言实现。原创 2025-04-30 18:23:52 · 321 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS对象
什么是对象?对象(object)是 JavaScript 语言的核心概念,也是最重要的数据类型简单说,对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合age: '13'对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用如果属性的值还是一个对象,就形成了链式引用age:13,frontEnd:["Web前端","Android","iOS"],原创 2025-04-30 18:23:40 · 750 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS数组
它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组。方法用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。方法用于删除数组的最后一个元素,并返回该元素。方法用于删除数组的第一个元素,并返回该元素。方法用于颠倒排列数组元素,返回改变后的数组。也接受其他类型的值作为参数,添加到目标数组尾部。数组的length属性,返回数组的成员数量。如果数组的元素还是数组,就形成了多维数组。原创 2025-04-30 18:23:24 · 428 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS字符串
如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。方法用于确定一个字符串在另一个字符串中第一次出现的位置,返回结果是匹配开始的位置。方法的第一个参数是子字符串的开始位置(从0开始计算),第二个参数是子字符串的长度。如果分割规则为空字符串,则返回数组的成员是原字符串的每一个字符。方法用于去除字符串两端的空格,返回一个新字符串,不改变原字符串。方法用于连接两个字符串,返回一个新字符串,不改变原字符串。方法用于从原字符串取出子字符串并返回,不改变原字符串,跟。原创 2025-04-29 13:39:55 · 459 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS循环语句
布尔表达式(test):每轮循环开始时,都要执行这个条件表达式,只有值为真,才继续进行循环。布尔表达式:每轮循环开始时,都要执行条件表达式,只有值为真,才继续进行循环。While语句包括一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。break跳出本次循环,进入下次循环,continue跳出整个循环。break跳出整个循环,continue跳出本次循环,进入下次循环。break和continue一样,都是跳出本次循环,进行下次循环。初始化表达式:确定循环变量的初始值,只在循环开始时执行一次。原创 2025-04-29 13:39:44 · 284 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS三元运算符
这个三元运算符可以被视为if…的简写形式,因此可以用于多种场合。JavaScript还有一个三元运算符(即该运算符需要三个运算子),也可以用于逻辑判断。原创 2025-04-29 13:39:35 · 150 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS条件语句
if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是 JavaScript 的两个特殊值,true表示真,false表示伪。需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的代码。需要注意的是,“布尔值”往往由一个条件表达式产生的,必须放在圆括号中。x 等于1 x 等于2 x 等于其他值。原创 2025-04-29 13:39:22 · 350 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS运算符
的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作;如果一个人一直做坏事,突然有一天做了一件好事,那么人们会认为这个人其实还不错,以前也许是另有原因!对这个人突然就认可了。如果一个人一直做好事,突然有一天做了一件坏事,那么人们会认为这个人很虚伪,以前说不定都是装的!自增和自减运算符,是一元运算符,只需要一个运算子。余数运算符是比较常用的,因为在逻辑思维上寻找规律,余数运算符是很好用的。自增和自减运算符,是二元运算符,只需要二个运算子。自增和自减运算符,是一元运算符,只需要一个运算子。原创 2025-04-29 13:39:11 · 1562 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS数据类型
JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型,当前课程暂不涉及)对象:因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefined和null,一般将它们看成两个特殊值。数值、字符串、布尔值、undefined。数值、字符串、布尔值、null。数值、字符串、布尔值、对象。数值、字符串、布尔值。原创 2025-04-28 19:40:45 · 134 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS注释与常见输出方式
源码中注释是不被引擎所解释的,它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释,用//起头;另一种是多行注释,放在/JavaScript有很多种输出方式,都可以让我们更直观的看到程序运行的结果。嵌入在HTML文件中的注释。原创 2025-04-28 19:37:44 · 191 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS引入文件
JS嵌入到HTML文件中。JS嵌入到HTML文件中。引入网络来源的JS文件。JS嵌入到CSS文件中。引入网络来源的JS文件。JS嵌入到CSS文件中。引入本地独立JS文件。引入本地独立JS文件。原创 2025-04-28 19:37:35 · 190 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JS语句,标识符,变量
+1原创 2025-04-28 19:37:23 · 160 阅读 · 0 评论 -
【JavaWeb新手入门】入门篇之JavaScript是什么
+1原创 2025-04-28 19:37:07 · 253 阅读 · 0 评论 -
【JavaWeb新手入门】开启篇之CSS媒体查询
+1原创 2025-04-27 19:43:06 · 135 阅读 · 0 评论 -
【JavaWeb新手入门】开启篇之CSS盒与弹性盒模型
+1原创 2025-04-27 19:42:51 · 555 阅读 · 0 评论 -
【JavaWeb新手入门】开启篇之CSS浮动与清除浮动
+1原创 2025-04-27 19:42:22 · 468 阅读 · 0 评论 -
【JavaWeb新手入门】开启篇之CSS3新特性
+1原创 2025-04-27 19:42:08 · 286 阅读 · 0 评论 -
【JavaWeb新手入门】开启篇之CSS3定位
+1原创 2025-04-27 19:40:43 · 325 阅读 · 0 评论
分享