- 博客(25)
- 收藏
- 关注
RSS订阅原创 Vue路由进阶攻略
Vite 路由配置是指在基于 Vite 的 Vue.js 项目中，使用Vue Router 来定义和管理应用中的路由规则的设置过程。Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用定义路由，控制页面的切换和数据的加载。引入或定义你将在应用中使用的组件，如 'HomeView.vue', 'AboutView.vue', 和 '404View.vue'。Vue中的路由嵌套是指在Vue.js应用中，通过Vue Router配置多个嵌套的路由。
2024-12-13 23:11:42
696
原创 Vite+Vue3项目实战：组件化开发与通信指南
单组件开发是指在前端框架Vue.js中，将一个Vue组件的模板、逻辑和样式封装在一个单独的文件中进行开发的方式。这种文件通常以'.vue'为后缀，因此也常被称为单文件组件（Single File Component，简称SFC）。父组件向子组件传递数据是组件化编程中的一种常见操作，它允许父组件将与子组件有关的信息或数据通过特定的属性（称为props）传递给子组件。这种方式保证了组件之间的数据传递是清晰定义和可维护的，同时也遵循了单向数据流的设计原则，即数据。
2024-12-06 21:53:54
1310
原创 从零开始：使用Vite和pnpm搭建Vue3项目实战指南
Vite是一个由 Vue.js 团队开发的现代化，它利用了现代浏览器的特性，提供了极快的冷启动和热更新性能。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
2024-12-01 22:15:00
2086
原创 Vue实战案例：一步步构建企业级项目2
（3）当用户在`<input>`中修改'x'或'y'的值时，由于'v-model.number'的双向绑定，'data.x'和'data.y'会自动更新。如果未被选中，将会被设置为'false'。'v-model="data.select"''将'<select>'元素选中的值绑定到Vue实例的'data'对象的'select'属性上。（4）①'watch(hobby, ...)'创建了一个侦听器，当'hobby'的值变化时，它会打印旧值和新值，并且当'hobby'的值变为"2"，它会打印一条特定的消息。
2024-11-23 14:02:47
1041
原创 Vue实战案例：一步步构建企业级项目1
Vue是一个能用于的，主要用于和。 Vue由（Evan You）在2014年创建，，其他两个是Angular.js和React.js。Vue的核心库，易于与其他库或现有项目集成，并且具有轻量级和高效的特点。它是一个开源项目，旨在提供一个简单、灵活且高效的解决方案来构建现代Web应用程序，。
2024-11-21 23:17:24
1536
原创 DOM操作和事件监听综合练习：利用JS实现图片轮播
其中，如果 i 大于 4，将 i 重置为 1，实现循环切换。否则，根据当前的 i 值设置图片元素的 src 属性为 ./img_src/p${i}.jpg，然后 i 的值加 1，切换到下一张图片。
2024-11-10 16:15:48
726
原创 JavaScript中常用的事件及处理
与change事件不同，input事件在元素的值发生变化后立即发生，而change事件在元素失去焦点时才发生。这些事件包括keydown、和keyup和keypress，它们分别在用户按下、释放键盘按键时触发，用于执行特定的操作或功能。某个键时触发，过去用于捕获字符键，但现代浏览器中已不推荐使用，因为它不区分大小写和修饰键（不包括功能键如Ctrl、Shift等）。某个键时触发，如果按住不放会重复触发。与input事件不同，change事件只在元素失去焦点时触发一次，即使值在失去焦点前发生了多次变化。
2024-11-05 23:04:26
1449
原创 JavaScript 实战技巧：让你成为前端高手的必备知识3（进阶版）
是指使用JavaScript（Document Object Model）的过程。文档对象模型是一种表示的方式，它将整个网页文档表示为一个，每个元素都是一个，包括。通过DOM操作，可以动态地改变网页的，实现与用户的交互以及动态更新页面内容。常见的DOM操作包括元素，获取和设置元素的属性和内容，以及添加事件监听器等。可以这么理解，DOM操作就是为了用JS程序。
2024-11-01 16:13:43
1337
原创 JavaScript 实战技巧：让你成为前端高手的必备知识2
在JavaScript中，函数是执行特定任务或计算值的代码块。函数可以有参数（输入）和返回值（输出）。当一段代码很长，需要实现很多功能时，可以将这段代码划分成几个功能相对独立单一的函数，这样即既可以提高程序的可读性，也有利于脚本的编写，调试和维护。JavaScript 遵循先定义函数，后调用函数的规则。函数的定义通常放在HTML文档头中，也可以放在其他位置，但最好放在文档头，这样可以确保先定义后使用。function 函数名（参数1，参数2，…）{语句；return表达式。
2024-10-30 12:02:45
1047
原创 JavaScript 实战技巧：让你成为前端高手的必备知识1
JavaScript是一种web脚本编程语言，简称JS。广泛应用于网页开发中，主要用于增强网页的交互性和动态性。作为Web开发的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。用户可以利用JavaScript进行事件处理表单验证动画创建等多种功能。不需要编译，直接由浏览器解释运行，语法和Java类似。因此，在语法学习过程中，需注意与Java对比学习。注意。
2024-10-24 22:18:35
863
原创 网页设计中的伪类与伪元素：让网页更具动感
伪类和伪元素是CSS中的两种特殊选择器，用于选择元素的特定状态或部分，并为其应用样式。 伪类和伪元素的区别在于它们的选择范围和目的不同。伪类用于选择元素的，如鼠标悬停、获得焦点等，而伪元素选择元素的，如元素的首行、首字母等。此外，伪类主要用于描述元素的，而伪元素主要用于。
2024-10-22 20:40:22
801
原创 CSS网页布局
百分比布局是一种布局方式，其中控件的宽度或高度通过百分比来定义，而不是使用固定的像素值。 这种布局方式使得控件的大小可以根据父容器的尺寸动态调整，从而适应不同屏幕尺寸的设备。主要优点有：灵活度高，兼容性好，使用场景广泛。经典两列布局是指一种网页布局方式，其中一列宽度固定，另一列宽度自适应。 这种布局方式在网页设计中非常常见，因为它能够提供良好的视觉效果和用户体验。经典三列布局是指一种页面布局方式，其中包含三列，左右两列宽度固定，中间一列宽度自适应。 这种布局方式在许多网站的首页中广泛应用。
2024-10-18 16:04:53
627
原创 盒子的浮动
盒子2浮动起来了，脱离了文档流，盒子3自动递补盒子2的位置。因为 的弊端，盒子3的字体还在盒子4那里。当父盒由于各种原因没有设置高度，子盒的浮动会导致父盒的高度塌陷。父盒高度塌陷后，会影响父盒的兄弟盒子的布局。盒子1没有设置浮动 ， article的宽只有1400px，不够放置7个盒子，所以盒子8在下一行。以上是没有添加前的效果 ，可以复制上面父辈的高度塌陷的代码动手试试!添加后的效果，清除前面盒子浮动对它的影响，撑开父盒的高度。最简单的解决方案就是为父盒设置高度。如下：(没有浮动前的效果)
2024-10-15 22:21:02
1042
原创 盒子定位中的固定定位
根据代码运行可以看出盒子2和盒子5在拖动滚动条时盒子不动，其他都会随着拖动滚动条时滚动。③设置了绝对定位的盒子，都会有专属的浮层，有几个绝对定位的盒子，就有几个浮层。注:①两个方向各选一个参数即可定位；②定位的数值可以为负数；
2024-10-14 17:50:27
572
原创 盒子的定位：相对定位
（4）调整位置：通过调整top,right,bottom,left属值，来控制相对定位。使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的位置，到达新的位置。（1）创建基本的HTML结构，即编写body内容。（3） 将position属性值设置为相对定位。（2）使用CSS来设置这些元素的样式。盒子本体仍处于文档流中，且原本位置不受影响。
2024-10-11 21:09:06
302
原创 盒子模型的概念以及盒子的属性
块级元素可以直接通过CSS设置宽高，但是行内元素默认情况下不可以。如果要设置行内元素的宽高，需在CSS代码中添加display:bolock;
2024-10-11 11:09:57
515
原创 CSS语法基础
1、交集选择器：两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或者id选择器，且选择器之间不能有空格。（2）子代选择器（不可跨代）：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>隔开。（3）相邻兄弟选择器：选择紧跟E元素后的F元素，用+隔开，选择相邻的第一个兄弟元素，只能向下选择。（4）通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择。3、id选择器：用id名作为选择器，为指定id名的元素设置样式（注意：id名是唯一的）
2024-09-29 18:16:50
409
原创 如何使用CSS
CSS（cascading style sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
2024-09-29 16:43:27
462
原创 页面的布局中结构元素
用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使网页元素的语义更加明确。article 元素用来定义独立的区块内容，该标签定义的内容可独立于页面中的其他内容使用。用来定义section或document的页脚，通常该标签包含网站的版权、创作者的姓名、文档的创作日期及联系信息。（2）如果article元素、aside元素或nav元素更符合使用条件，那么建议不要使用section元素。在HTML5中，为了使文档的结构更加清晰明确，使用了文档结构元素构建网页布局。
2024-09-23 18:21:30
510
原创 编排表单以及块级元素和内联（行内）元素
表单被广泛应用于各种信息的搜集与反馈中。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写访问者进行交互的信息；另一个是服务端的应用程序，用于处理访问者提交的信息。当访问者在Web浏览器中显示的表单中输入信息后，单击“提交”按钮，这些信息将被发送给服务器，服务器端应用程序对这些信息进行处理，并将结果发送给访问者。
2024-09-19 19:10:56
300
原创 HTML5的基本骨架及常用标签
这就要求工程师在编排网页时，应该根据业务要求，将<h1>用于最重要的内容，而<h6>用于最不重要的内容。属性：color="颜色" align="left/center/right" size="粗细" width="长度"每个网页都有其基本的结构，包括HTML的语法结构、文档结构、标签的格式以及代码的编写规范等，如图1-1所示。若文字过长，它会根据窗口宽度自动换行，如小米商城网站底部段落大量使用<p>标签。1.3.1 分级标题标签：通过<h1>~<h6>六个标签定义的。单标签：创建横跨网页的水平线。
2024-09-09 14:57:28
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人