- 博客(21)
- 收藏
- 关注
RSS订阅原创 初识vue第十一篇
首页 layout 架子 [element-plus 菜单组件]登录注册页面 [element-plus 表单 & 表单校验]登录注册页面 [element-plus 表单 & 表单校验]文章分类页面 - [element-plus 表格]文章分类添加编辑 [element-plus 弹层]登录功能 (校验 + 登录 + 存token)退出功能 [element-plus 确认框]文章分类渲染 & loading 处理。注册登录 静态结构 & 基本切换。注册功能 (校验 + 注册)用户基本信息获取&渲染。
2024-02-19 17:38:54
167
原创 初识vue第十篇
组合式API - 模版引用组合式API - 模版引用1.模板引用的概念通过ref标识获取真实的dom对象或者组件实例对象2.如何使用（以获取dom为例 组件同理）默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问。
2024-02-05 17:29:01
770
1
原创 初识vue第九篇
计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法。2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数。Vue3 组合式API vs Vue2 选项式 API。接收简单类型或者对象类型的数据传入并返回一个响应式的对象。Vue3的生命周期API （选项式 VS 组合式）接受对象类型数据的参数传入并返回一个响应式的对象。组合式API - computed。组合式API - setup选项。组合式API - watch。组合式API下的父传子。
2024-02-03 17:56:43
274
1
原创 初识vue第八篇
② 若之前 已有 相同搜索关键字，将该原有关键字移除，再追加。① 若之前 没有 相同搜索关键字，则直接追加到最前面。d. 持久化：搜索历史需要持久化，刷新历史不丢失。点击 搜索按钮 或 底下历史记录，都能进行搜索。c. 清空历史：添加清空图标，可以清空历史记录。1.首页 - 静态结构准备 & 动态渲染。3.搜索列表 - 静态布局 & 动态渲染。4.商品详情- 静态布局 & 渲染。6.加入购物车 - 封装数字框组件。b. 点击搜索 (添加历史)2.搜索 - 历史记录管理。a. 搜索历史基本渲染。
2024-02-02 18:58:12
246
原创 初识vue第七篇
组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。① PC端： element-ui (element-plus)② 根目录新建 postcss.config.js 文件，填入配置。⑥ 提取到 vant-ui.js 中，main.js 导入。Mint UI (饿了么) Cube UI (滴滴)③ babel.config.js 中配置。① 安装 vant-ui (已安装)① vant-ui.js 按需引入。
2024-01-31 18:31:01
444
原创 初识vue第六篇
mapMutations 和 mapState很像，它是把位于mutations中的方法提取了出来，映射到组件methods中。State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。(当项目变得越来越大的时候，Vuex会变得越来越难以维护)② vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)① vuex 是一个 vue 的 状态管理工具，状态就是数据。
2024-01-29 22:03:40
441
原创 初识vue第五篇
路由进阶路由进阶① 路由模块封装目标：将路由模块抽离出来。好处：拆分模块，利于维护② 声明式导航 & 导航高亮 / 精确匹配&模糊匹配 / 自定义高亮类名声明式导航传参 ( 查询参数传参 & 动态路由传参 )vue-router 提供了一个全局组件 router-link (取代 a 标签)a.能跳转，配置 to 属性指定路径(必须)。本质还是 a 标签 ，to 无需 #b.能高亮，默认就会提供高亮类名，可以直接设置高亮样式e.声明式导航 - 跳转传参目标：在跳转路由时, 进行传值。
2024-01-28 18:20:02
420
原创 初识vue第三篇
→ 保证每个组件实例，维护独立的一份数据对象。3.最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到。2.每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。1. 当前组件内标签都被添加 data-v-hash值 的属性。作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码。一.组件通信, 就是指 组件与组件 之间的数据传递。1.组件的数据是独立的，无法直接访问其他组件的数据。2.想用其他组件的数据 → 组件通信。
2024-01-25 18:45:09
242
原创 初识vue第二篇
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。2.Vue 生命周期 和 生命周期的四个阶段 Vue 生命周期 和 生命周期的四个阶段。2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。Vue生命周期：一个Vue实例从 创建 到 销毁 的整个过程。组件分类：普通组件、根组件。4.组件化开发 & 根组件。
2024-01-23 18:08:48
522
1
原创 初识vue
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。差值表达式：vue的一种模板语法作用：利用 表达式 进行插值渲染语法：{{ 表达式 }}注意点:1.使用的数据要存在2.支持的表达式，不是语句if for3.不能在标签属性中使用 {{}}5.计算属性。
2024-01-22 17:41:24
495
1
原创 12个javascript小任务解析
首先我设置了一个初始的数组，里面装了十条个人信息，然后通过对象的遍历方法，将他们全部动态插入到表单中，然后就是颜色判断函数的设置，通过if语句的i除二余一就是黑色，其它的则是白色的方法将其设置成黑白相间的形式，然后是删除函数的设置，先通过对块级作用域的运用精确的将函数绑定在每个点击对象上，然后通过remove属性删除节点，之后再调用一遍颜色函数，保证删除后的表单依旧符合要求的黑白间变色。最重要的是滑动效果的设置，设置成平滑就可以显得十分流畅，而不是一顿一顿的。屏幕录制 2023-11-26 225738。
2023-11-27 00:40:46
158
原创 第一个小demo页面返回顶部
最后为了保证滚动条的返回效果可以多次使用，还要用if语句判断滚动条的位置，这里是用定义并赋值的变量自减至0来判断的，这时就要停止计时器函数的继续执行，用上clearInterval，清除间隔计时器，并将赋值的变量重新赋予其初始值以达到重置效果。最重要的是滑动效果的设置，设置成平滑就可以显得十分流畅，而不是一顿一顿的。a:首先是在右下角设置号一个向上返回顶部的按钮，可以用粘性定位，将其固定在右下角。对于滚动条滑动到顶部消失的效果则可以用if语句判断滚动条的状态并执行相应代码。只要滚动条滑动就会执行函数。
2023-11-16 12:57:18
36
1
原创 瀑布流效果
因为要做出瀑布流图片排列效果，所以要给大盒子加上一个column-count，并设置为6，然后图片宽度设为100%这样就可以让图片自动按比例平铺，并一行显示6列，最终达到瀑布流效果。预设完模板之后就可以通过js的动态控制，将内容映射到模板中去。其最重要的就是要知道滚动条滑动的距离，保证满足加载触发的条件具体代码如下。屏幕录制 2023-11-05 165912。首先可以在body中预设一个模板。
2023-11-05 17:10:12
31
1
原创 js之循环分支语句-while
b.因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了。a.while，中文叫当...时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了。“while” 循环。
2023-10-26 20:47:38
31
原创 js之条件分支语句
注意：如果满足条件就会继续运算大括号内的内容，如果不满足条件那运行结果就是undefined的了，因为变量未参与运算没被赋值定义。a.语法原理：if（条件1）{条件1为true的时候执行}else if（条件2）{条件2为true的时候执行}b.逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码。语句会计算圆括号内的表达式，并将计算结果转换为布尔型。通过（）里面的条件是否成立来决定{}里面的代码是否执行。a.我们的js代码都是顺序执行的（从上到下）if（条件）{要执行的代码}结果为190,180。
2023-10-26 11:41:48
62
原创 js运算之运算符
1.例一：1+“2”*3+4 运算中并不会因为2加了双引号而直接先和1连接在一起，而是会先与三想乘变成数字类型的6然后再与其它数字进行正常的加法运算。2.例二：“1”+“2”+3+4当2乘3变成了6之后会因为有一个字符串参加了加法运算而使后面所有的数字全部连在一起。同时如果想要将结果连在一起可以再到中间加上一个空的双引号让结果是字符串的形式连在一起。b.为了同时得到除法运算后的整数和余数可以用除法和取余配合使用。a.运算优先级与数学运算法则中规定的一样。结果就是商为16余数为40。a.取余的运算方法为。
2023-10-24 19:54:25
35
原创 js之数据类型
undefined和null一样自成类型，underfined意为未被赋值，它属于已声明但是未被赋值。所以打印结果就是它本身。加了双引号就变成了字符串string类型不再遵循加法运算而是输入什么就是什么，上述运行结果就会变成1020而不是20。null不属于以上任何一种类型，仅仅表示无，空或未知，但是未来是想给其赋值的。b.string:用单引号或双引号包起来的就是字符串类型。且在控制台中显示效果为字符串没颜色，而数字类型有颜色。科学计数法 2e3 相当于2*10^3。还有十六进制，二进制，八进制。
2023-10-22 23:21:30
90
原创 QQ音乐官网仿写总结
在开始仿写QQ音乐官网之前我对整体布局做了大致的划分，根据其背景颜色和各个版块分区，高度统一设置成自适应，让内容自行将其撑开。此次核心代码应该是图片的缩放效果。
2023-10-21 15:26:33
83
原创 小米官网仿写总结
对于官网的架构，我根据背景颜色不同大致分成了三个大块，即导航栏，中间部分及结尾商标部分，而其中过程最为繁琐的部分当属二级菜单商品栏部分，对此我较为细致的对其进行了多级分层和定位，虽然未做到完美的自适应效果，但总体来说还算理想。首先将二级菜单与轮播图的盒子并列，并设置绝对定位和浮动效果，最后则是设置z-index使其能够显示在轮播图上面，具体情况问题二已经说明，在此不过多赘述。另外要注意的是透明度的设置大盒子的透明度设置为一，而对其背景颜色设置对应透明度，才可使其二级菜单不会也变成透明的。
2023-10-18 15:35:42
192
原创 学校官网总结
最后将每个在最外面的大盒子排布好之后，便开始细分每个版块之内的小盒子，并进行定位。在整个官网中最核心的部分当属轮播图了，但因为能力有限，我只能用css写，首先是对于图片的获取，先在官网中获取每一张原图，然后用三层盒子逐一叠加，最外面的盒子按所需比例大小显示，第二层盒子则设置宽度足够把所有图片盒子装下，即至少为第三层所有小盒子宽度的总和，第三层盒子就根据图片大小设置宽高放在第二层盒子里，并在css中设置上float，使其浮动排列在同一行，然后在最外层盒子那加上overfloat：hidden 即溢出隐藏。
2023-10-13 20:26:01
60
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人