自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(22)
  • 收藏
  • 关注

原创 【Javascript】数据结构与算法-快速排序第一趟结果

将待排序数组A以某一元素为基准划分为两个子数组left和right,如果基准元素为pivot那么left中的元素都要小于等于pivot并且在左边,right中的元素都要大于等于pivot并且都要在右边,完成划分后对left和right两个子数组继续递归调用快速排序,直到划分的子数组小于两个函数,递归函数直接返回.........

2022-08-13 03:00:00 1181 1

原创 【React】Umijs和TypeScript实现mock和反向代理

基于React、TypeScript和umi实现mock数据和反向代理

2022-08-05 03:00:00 809

原创 【React】函数组件 hooks-useState

React函数式组件中,常用的useState的实际应用

2022-08-04 03:45:00 320

原创 【Javascript】JS语法总结-数组

JS语法总结-数组常用数组方法改变原数组返回新数组数组中搜索与字符串的转换计算常用数组方法arr.push(elem) 将一个或多个元素添加到数组的末尾,并返回数组新长度arr.pop() 从数组取出最后一个元素arr.shift() 从数组中取出第一个元素arr.shift(elem) 将一个或者多个元素添加到数组的开头const array = ['a','b','c']array.push('d'); //4 当前数组['a

2022-03-20 14:14:06 1345

原创 【3D商城】添加商品产品模型

【3D商城】添加商品产品模型加载模型通过函数设置模型导入模型解析器场景初始化结果显示加载模型工程目录结构如下,在加载模型时候,选择Base3d.js文件通过函数设置模型 setModel(modelName) { return new Promise((resolve, reject) => { const loader = new GLTFLoader().setPath("files/gltf/"); //初始化解析器 loader.load(

2022-03-11 08:46:08 192

原创 【3D商城】调节色调映射和增加控制器

【3D商城】调节色调映射和增加控制器概述色调映射控制器的使用常见错误总结概述本文讲解色调映射以及如何通过控制器来进行旋转去查看场景周围的情况,文件的目录如下色调映射我们使用的是HDR图是动态的,动态的图里面保留了很多信息,图里面有最暗的情况和高亮的情况,是动态的,于是我们可以通过色调映射来处理图片的亮暗情况。 initRenderer() { this.renderer = new THREE.WebGLRenderer({ antialias: true }); // 设置屏

2022-03-10 03:00:00 536

原创 【3D商城】三维场景搭建与开发流程

【3D商城】三维场景搭建与开发流程创建一个场景组件安装 threejs创建Base3d.js初始化场景初始化相机初始化渲染器添加环境的纹理创建一个场景组件在views中创建一个场景组件Scene.vue并且在router的index.js中,通过路由映射到场景组件const routes = [{ path: "/scene", component: () => import("../views/Scene.vue"), name: "scene", },]

2022-03-09 03:00:00 1220 1

原创 【3D商城】使用Vuex状态管理完成购物车模块

【3D商城】使用Vuex状态管理完成购物车模块创建购物车的全局数据添加产品到购物车导航栏的购物车模块结果常见问题总结创建购物车的全局数据在store的index.js中 ,创建购物车变量 state() { return { count: 0, isFullscreen: false, //默认不是全屏状态 buycarts: [], //购物车变量 }; }添加产品到购物车 mutations: { addBuyca

2022-03-08 03:00:00 895

原创 【3D商城】切换产品与场景效果

【3D商城】切换产品与场景效果产品内容放入列表场景内容放入列表点击选中框外观状态设置结果产品内容放入列表在Product.vue中,产品列表prod-list标签下写产品的内容(class=“products”)以及加入购物车的按钮 <div class="products"> <div class="prod-item" :class="{ active: pI == data.pIndex }" //判断现在的索引值是否为

2022-03-07 03:00:00 699

原创 【3D商城】鼠标滚动控制全屏切换

【3D商城】鼠标滚动控制全屏切换

2022-03-06 21:33:01 987

原创 【Vue3】学习笔记-reactive响应式

【Vue3】学习笔记-reactive响应式用ref 设置响应式对象用reactive 设置响应式对象总结用ref 设置响应式对象JS中设置对象import { ref } from "vue";var user = ref({ username: "Wellington", age: 18,});调用方法function setUserAge() { user.value.age = 14; console.log(user);}在视图页面显示 <h1&gt

2022-03-05 16:00:00 1513

原创 【Vue3】学习笔记-响应式ref

【Vue3】学习笔记-响应式refvite创建Vue3项目Vue3 声明全局变量响应式ref总结vite创建Vue3项目npm 7+用以下指令npm init vite@latest my-vue-app -- --template vue安装依赖npm install运行npm run devVue3 声明全局变量<script setup>import HelloWorld from './components/HelloWorld.vue'</script

2022-03-03 20:50:53 1490

原创 【Vue】学习笔记-路由

【Vue】学习笔记-路由路由概述创建包括路由模块的Vue项目配置router.js文件编程式导航导航守卫常见错误总结路由概述一个Web应用应该有多个页面,之前学习的Vue案例都是在一个页面完成的,通过路由,可以让应用在多个页面间跳转(严格的说Vue是单页面应用,所以跳转的不是其他页面,而是其他组件)。本文将会讲解路由的常用功能创建包括路由模块的Vue项目首先使用下面命令创建一个带路由的项目:vue create RouterProject├─src │ └─assets │ │ └─logo.

2022-02-28 04:30:00 1275

原创 【Vue】学习笔记-表单

【Vue】学习笔记-表单数据双向绑定表单控件(在form中)数据双向绑定通过v-mode指令在文本输入框中创建双向数据绑定@submit.prevent=“postData” prevent防止出现闪现表单控件(在form中)0.标签 label1.文本输入框 input type=text2.密码输入框 input type=password3.下拉菜单 select option4.单选框 input type=“radio”(两个) v-mod

2022-02-28 03:00:00 897

原创 【Vue】学习笔记-数据交互

【Vue】学习笔记-数据交互概述安装axios通过axios向后台获取数据数据交互的实现常见错误总结概述基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本文主要讲解在Vue项目中,如何安装和使用Axio,以及通过前端的Vue框架和后端的Koa框架进行数据交互的例子安装axiosVue项目中使用如下命令安装npm install axios --save在要引用axios的页面引用import axios from 'axios'

2022-02-28 03:00:00 1798 5

原创 【Vue】学习笔记-非父子级传递数据

【Vue】学习笔记-非父子级传递数据前言非父子级传递数据常见错误总结前言组件之间的传值可以分为三种:1.父级向子集传递数据2.子级向父级传递数据3.非父子级传递数据本文主要讲解非父子级传递数据非父子级传递数据在编写项目组件过程中,使用store.js管理非父子级间的数据,相当于建立一个类似于全局变量的store来管理非父子级之间的关系,创建sister和brother两个平级组件,在App组件中同时引入两个组件store.js如下export default { //状态

2022-02-27 22:51:22 728

原创 【Vue】学习笔记-组件传值的数据累加器

【Vue】学习笔记-组件传值的数据累加器前言父级组件购物车组件计数器组件常见错误总结前言组件传值的数据累加器可以分为三个部分App.vue为父级组件Carts.vue表示购物车Counter.vue表示计数器父级组件实现页面的组件传值主要思路为:父组件引入可视化的购物车组件(Carts.vue),而购物车组件数量的变化又依赖于计数器组件的值。因此,在编写累加器(Counter.vue)时,应该父组件(App.vue)中导入购物车组件然后购物车组件在编写的时候导入累加器(Counter.vue)

2022-02-27 22:50:44 1267

原创 【Vue】学习笔记-插槽、DOM、过滤器

【Vue】学习笔记-插槽、DOM、过滤器插槽DOM过滤器总结插槽让我们更灵活地使用组件,增强组件的扩展性。开发或使用UI库,了解组件制作原理。ElementUI基本基于插槽实现。例如实现按钮中文本的自定义,可以通过属性传值,也可以通过插槽来实现。App.vue<template> <div class="app"> <my-button >提交</my-button> <my-button >注册</my-butt

2022-02-27 22:48:58 710

原创 【Vue】学习笔记-Vue生命周期钩子

【Vue】学习笔记-Vue生命周期钩子Vue生命周期钩子vue实例vue实例生命周期钩子总结Vue生命周期钩子页面加载时,主动执行某些程序,比如之前在写methods时候,一般会在里面指定一些方法,比如getData获取数据methods:{ getData(){ //do ajax }}当我们打开一个网页的时候,网页直接显示数据而不是打开某个事件之后再显示数据,会在组件加载的时候直接显示列表,所以通过事件触发来调用getData()是无法满足要求的,生命周期钩

2022-02-27 22:48:30 986

原创 【Vue】学习笔记-计算属性与侦听器

【Vue】学习笔记-计算属性与侦听器前言计算属性侦听器编程中常见错误总结前言computed:计算属性watch:侦听器(监听器)计算属性data属性和computed属性定义的值都可以直接绑定在表达式中。如果某些值需要通过计算才能得到,那么最好使用计算属性,计算属性具有缓存,重复调用只计算一次如购物清单总价 =单价 * 数量 * 折扣代码如下:<template> <div class="app"> <h1>计算属性与侦听器</h1&

2022-02-27 22:48:02 923 1

原创 【Vue】学习笔记-组件传值

【Vue】学习笔记-组件传值前言1.父级向子集传递数据2.子级向父级传递数据常见错误总结前言组件之间的传值可以分为三种:1.父级向子集传递数据2.子级向父级传递数据3.非父子级传递数据本文主要讲解父级向子集传递数据和子级向父级传递数据这两种1.父级向子集传递数据父级向子级传递数据:使用属性传递1)在App组件中,绑定msg属性传递给Child内部(:msg=“message”)data()中message:“app.vue data”2)Child获取信息用props:[“msg”](数

2022-02-27 22:46:04 1793

原创 【Vue】学习笔记-模板语法

【Vue】学习笔记-模板语法前言条件判断指令显示列表指令组件嵌套常见错误与总结前言指令是带有’v-'前缀的特殊属性,常见的指令如下所示:v-bind:绑定属性(简写:)v-on:绑定事件(简写@)条件判断指令v-if和v-show为条件判断指令两者的区别如下运行时显示结果为:v-if是不渲染dom,而v-show是渲染dom,然后将元素设置为display:none条件判断指令具体有什么作用呢?使用条件判断常见的例子有:网页根据用户是否登录跳转页面,源代码如下:<templ

2022-02-27 22:44:49 1097 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除