Web前端
文章平均质量分 61
前端
究极无敌暴龙战神X
这个作者很懒,什么都没留下…
展开
-
Vue中接口调用
用于向服务器提交数据,通常用于创建新资源。:用于向服务器发送数据更新一个已存在的资源。:用于部分更新资源,仅传输需要更新的部分数据。:用于从服务器获取数据。:用于删除服务器上的资源。有时会传递params参数。// 地址参数 查询参数。原创 2024-03-21 14:20:11 · 410 阅读 · 0 评论 -
两种解构赋值的区别
函数返回的对象中的所有属性都提取出来,并将它们以键值对的形式存储在名为。总之,第一个语法只提取了特定属性,而第二个语法提取了对象的所有属性。: 这也是解构赋值语法,但使用了扩展运算符(函数返回的对象中的所有属性,而不仅仅是。这意味着你可以访问并使用。这意味着你只能访问并使用。: 这是一种解构赋值语法,它从。在JavaScript中,属性,而其他属性将被忽略。属性,并将其赋值给名为。函数返回的对象中提取。原创 2024-03-20 21:21:47 · 194 阅读 · 0 评论 -
没有头像的情况下显示用户名的第一个字
有头像显示头像 没有头像显示用户名的第一个字。原创 2024-03-13 20:43:52 · 337 阅读 · 0 评论 -
git使用
推荐一款好用的应用程序:sourcetree 可以实现git仓库的可视化管理git 分为本地仓库和远程仓库每一次的提交流程分为4步:* 1、本地代码* 2、暂存区* 3、本地仓库* 4、远程仓库远程仓库的使用需要用到gitee网站,注册登陆后,点击右上角新建仓库。原创 2024-02-23 21:30:33 · 334 阅读 · 0 评论 -
pnpm 包管理器 - 创建项目
原创 2024-02-03 09:47:33 · 325 阅读 · 0 评论 -
Vue3 - Pinia
Pinia 是 Vue 的专属的最新状态管理库 ,是 Vuex 状态管理工具的替代品。原创 2024-01-26 20:21:09 · 775 阅读 · 0 评论 -
Vue3 - 基础
Vue2Vue3特点:代码量变少分散式维护变成集中式维护。原创 2024-01-26 12:39:20 · 757 阅读 · 0 评论 -
使用create-vue搭建Vue3项目
create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应。执行如下命令,这一指令将会安装并执行 create-vue。前置条件 - 已安装16.0或更高版本的Node.js。原创 2024-01-26 12:00:48 · 357 阅读 · 0 评论 -
从接口文档获取数据并渲染
因此先查看一下接口中的数据 通过getHomeData获取查看数据信息如下图,发现需要items1、4、6,将其保存到数组中。猜你喜欢模块样式如下 单独封装了GoodsItem.vue小组件,需要用到的是。导航需要用的的是图片、文字,因此需要imgUrl和text。2.页面渲染 需要的是对轮播图、导航组、商品组进行渲染。轮播图需要用的的是图片,因此需要imgUrl。原创 2024-01-22 08:30:00 · 358 阅读 · 0 评论 -
Vue2 - 项目中的 vw 适配
② 根目录新建 postcss.config.js 文件,填入配置。目标:基于 postcss 插件 实现项目 vw 适配。Vant 2官方配置。原创 2024-01-20 15:19:54 · 372 阅读 · 0 评论 -
Vue2 组件库 之 vant 组件库使用详解
van-button type="primary">主要按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="info">信息按钮</van-button>组件库:第三方 封装 好了很多很多的 组件,整合到一起就是一个组件库。Vue的组件库并不是唯一的,vant-ui 也仅仅只是组件库的一种。// 导入按需导入的配置文件。原创 2024-01-20 15:07:17 · 2839 阅读 · 0 评论 -
Vue2 - 09 Vuex的基本使用(state,mutations,actions,getters)
目标:明确Vuex是什么,应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象,对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit('mutations的方法名'))getters: {// getters函数的第一个参数是 state// 必须要有返回值。原创 2024-01-19 21:06:41 · 993 阅读 · 0 评论 -
Vue2 - 08 路由详解-面经
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。App.vue<template></div>缓存了所有被切换的组件1.keep-alive是什么2.keep-alive的优点3.keep-alive的三个属性 (了解)原创 2024-01-19 18:16:04 · 838 阅读 · 0 评论 -
Vue2 - 08 路由详解-进阶
router-link 会自动给当前导航添加两个类名,有什么区别呢?router-link的两个高亮类名 太长了,我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面?查询参数传参(多个参数)动态路由传参(一个参数,优雅简洁)编程式导航有几种跳转方式?编程式导航,如何跳转传参?1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',原创 2024-01-19 18:05:24 · 369 阅读 · 0 评论 -
Vue2 - 08 路由详解-基础
单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现。原创 2024-01-19 16:25:31 · 717 阅读 · 0 评论 -
Vue2 - 07 自定义指令&插槽
内置指令:v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能全局注册局部注册使用指令注意:在使用指令的时候,一定要先注册,再使用,否则会报错使用指令语法: v-指令名。如:注册指令时不用加v-前缀,但使用时一定要加v-前缀inserted:被绑定元素插入父节点时调用的钩子函数el:原创 2024-01-19 15:30:16 · 414 阅读 · 0 评论 -
Vue2- 06 非组件通信
1.父组件如果想让子组件修改传过去的值 必须加什么修饰符?2.子组件要修改父组件的props值 必须使用什么语法?原创 2024-01-19 10:45:00 · 754 阅读 · 0 评论 -
Vue2- 05 组件通信
组件通信,就是指组件与组件之间的数据传递组件的数据是独立的,无法直接访问其他组件的数据。想使用其他组件的数据,就需要组件通信组件上 注册的一些 自定义属性。原创 2024-01-19 08:30:00 · 747 阅读 · 0 评论 -
Vue2-04 工程化开发/组件化开发
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】虽然脚手架中的文件有很多,目前咱们只需认识三个文件即可main.js 入口文件App.vue App根组件index.html 模板文件整个应用最上层的组件,包裹所有普通小组件。原创 2024-01-18 14:35:19 · 810 阅读 · 0 评论 -
Vue2-03 生命周期(四大阶段 八大钩子)
思考:什么时候可以发送初始化渲染请求?初始化一个饼图 echarts.init(dom) mounted钩子中渲染。根据数据试试更新饼图 echarts.setOptions({...})生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁。给添加按钮注册点击事件,对输入的内容做非空判断,发送请求。收集表单数据 v-model,使用指令修饰符处理数据。拿到数据,存到data的响应式数据中。3.更新阶段:修改数据,更新视图。结合数据,进行渲染 v-for。1.创建阶段:创建响应式数据。原创 2024-01-18 14:08:49 · 348 阅读 · 0 评论 -
Vue2-02 computed计算属性、watch侦听器
1.computed有缓存特性,methods没有缓存2.当一个结果依赖其他多个值时,推荐使用计算属性3.当处理业务逻辑时,推荐使用methods方法,比如事件的处理函数watch侦听器的写法有几种?1.简单写法watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。},'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。2.完整写法watch: {// watch 完整写法数据属性名: {原创 2024-01-18 13:34:43 · 1298 阅读 · 0 评论 -
Vue2-01 基础
非常优秀我是v-show控制的盒子按钮我是v-if控制的盒子按钮原创 2024-01-18 11:25:56 · 788 阅读 · 0 评论 -
基于VueCli自定义创建项目
选择自定义 Manually select features。选用ESLint规范:标准化的无分号规范。放单独的配置文件中。按空格选择(vuex可以先不勾)选择vue版本 我这里选的2。原创 2024-01-14 15:29:23 · 316 阅读 · 0 评论 -
如何实现一个vue2项目
/ vue-cli 是一个脚手架工具,它内部集成了 webpack ,所以包含 webpack 的默认配置。缓存机制:yarn具有更强大的缓存机制,可以更好地利用缓存,减少重复下载,这对于团队协作和构建机器上的重复构建是有益的,可以节省时间和带宽。安全性:yarn在包的下载和安装过程中更加注重安全性,通过yarn.lock锁定依赖的版本,确保在不同环境下安装的是相同依赖的版本。性能和速度:在包的安装和下载方面,yarn比npm更快速,yarn通过并行下载和缓存等优化策略,可以提供更快的安装速度。原创 2024-01-11 14:11:31 · 338 阅读 · 0 评论 -
vue2实现切换显示隐藏
切换显示隐藏原创 2024-01-01 14:50:12 · 437 阅读 · 0 评论 -
npm使用
package.json文件中出现在"devDependencies"里。(3000是端口号)是通过server.listen(3000)设置的。package.json文件中出现在"dependencies"里。5.打开控制台窗口,需要在文件所在目录 输入npm run dev。4.将package.json文件中的script修改如下。打开项目文件夹输入 在文件目录输入cmd 打开控制台窗口。Node Package Manager包管理器。这样就可以访问到页面了 在浏览器中输入。原创 2023-12-24 19:33:15 · 389 阅读 · 0 评论 -
HTTP状态码
/ 302:临时性的移动跳转Moved Temporarily没有缓存,每次都要向服务器发送请求确认一下现在要往哪里跳。// 500:Internal Server Error 服务器发生了难以预料的错误。// 301:永久性的移动Moved Permanently也是永久性的缓存。// 400-499请求错误 一般是前端的代码有问题 比如写了不正确的网址。// 定义服务器对请求的处理结果,是服务器返回的。// 2.HTTP状态码的语义。// 500-599服务器错误。// 200-299成功。原创 2023-11-26 14:10:53 · 47 阅读 · 0 评论 -
流体布局仿慕课网首页实战
1.layout.css(整体布局 分为五块区域)slider.css(一张图片铺满整个屏幕)0.reset.css(清除默认样式)原创 2023-11-26 14:09:08 · 54 阅读 · 0 评论 -
flex流体布局总结
1.flex-direction 决定主轴的方向(即Flex项目的排列方向)是flex-grow,flex-shrink,flex-basis的缩写。flex-direction和flex-wrap的简写形式。flex-direction和flex-wrap的简写形式。定义了在分配多余空间之前,Flex项目占据的主轴大小。定义了Flex项目的排列顺序,数值越小,排列越靠前。定义了Flex项目在主轴方向上的放大比例。定义了Flex项目在主轴方向上的缩小比例。定义了Flex项目在主轴上的对齐方式。原创 2023-11-26 13:27:53 · 63 阅读 · 0 评论 -
/* 多行文字省略 */
* 多行文字省略 */原创 2023-11-25 23:14:49 · 22 阅读 · 0 评论 -
margin和padding
margin是外边距,即盒子与盒子之间的距离,而padding是内边距,是盒子的边与盒子内部元素的距离。padding让内容(文字)与(包裹)元素之间有一段“呼吸距离”。(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白。(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),(2)空白处不需要有背景(色)时,原创 2023-07-30 01:56:33 · 157 阅读 · 1 评论 -
flex布局
拉伸,默认值(现有状态,测试的时候去掉子级的高度,否则没有效果) 下图展示去掉子集盒子高度后的效果。注意:如果子集盒子没给高。如果单独设置某个弹性盒子的侧轴对齐方式,则这个盒子高度和内容一样高。space-around:子级之间的距离是父级两头距离的2倍。space-between:间距在弹性盒子(子级)之间。找到想要控制的第几个盒子,添加属性align-self。space-evenly:所有地方的间距都相等。/* 单独设置某个弹性盒子的侧轴对齐方式 */align-items: center;原创 2023-07-23 20:53:37 · 46 阅读 · 0 评论