- 博客(100)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 React中Context的使用,跨组件传值
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。有点像Vuex在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些场景来说是繁琐的,Context 提供了一种在组件之间共享此类值的方式，不用通过组件树的逐层传递 props。自定义Contextsrc/store/testContext.js1.引入context2.使用 Xxx.Consumer 组件来创建元素Consumer 的标签
2023-04-14 11:17:45
669
原创 base64转图片及互转
请求头 responseType: “blob” 一定要转。前面加固定的前缀 data:image/png;将后台给返回的base64直接拼接的img的:src上。的type一定要写。否则转后的base64打不开。
2023-03-27 10:31:48
4265
原创 vite及pinia
Vite是一种全新的前端构建工具，可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。VIte的开发服务器比 Vue CLI 快 10-100 倍多框架支持Vite 一开始主要注重于 Vue 的单文件组件支持，但 2.0 基于之前的经验提供了一个更稳定灵活的内部架构，从而可以完全通过插件机制来支持任意框架。现在 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版vite官网。
2023-02-14 17:20:21
575
原创 vue3+Ts
vite官方中文文档链接使用vue3把vsCode插件Vetur禁用掉(vue2使用)Vetur是一款Vue代码高亮显示的一款插件ventur 插件对于 ts 几乎没有支持,伴随着 vue3，volar 插件也同时出世了使用Volar(Vue3配套插件工具)-----Volar描述链接Vue3+Ts笔记。
2023-01-16 10:20:26
253
原创 uniapp介绍及使用
uni-app是官方库,不精美推出了 uViewuView的是uni-app优秀的UI框架,尽量不要用vantuniapp官网链接uView官网链接微信小程序与uni-app的区别链接uview最简单的引入使用方法链接hbuilder启动微信开发者工具失败问题汇总链接微信小程序将域名设置到后台的步骤链接小程序发送 request请求失败 提示不在合法域名列表中的解决方法链接最详细uniapp介绍链接。
2022-08-22 10:13:29
1468
原创 ReactRouter基础
本质上react-router有三个模块，react-router、react-router-dom、react-router-native。如果Route的path和url匹配，则对应的Route的组件就会渲染，Switch控制了Route只能渲染匹配到的第一个。如果想要像vue一样实现路由的配置，我们可以自己写配置，并根据配置渲染出对应的路由结构。会被渲染成a标签，和vue的router-link相同。上面的三种方式区别在于组件内部的props的内容。在React项目中，路由实现需要使用。...
2022-07-29 16:30:37
134
原创 VUE监听两个值的变化，同时执行一个方法，如何防止重复执行/和this.$nextTick()用法
vue侦听两个值的变化,同时执行一个方法,致使方法执行了2次处理
2022-06-14 20:48:45
2681
原创 vue数据双向绑定原理
目录模拟Vue中v-module数据双向绑定Object.defineProperty数据劫持get和set方法模拟Vue中v-module数据双向绑定 <style> #box { margin-top: 20px; padding: 10px 20px; border: 1px solid salmon; } </style></head>&l
2022-05-20 11:30:50
235
原创 vue全局注册组件/仿element按钮
全局注册组件步骤仿element按钮新建按钮组件 Vbtn.vue<template> <!--以后封装组件可以以插槽的方式封装--> <!--插槽 内置组件 slot 做为承载分发内容的出口--> <button class="default" :class="type"> <slot>按钮</slot> </button></template><script>
2022-05-17 16:54:31
396
原创 vuecli使用element/自定义主体色/表单【详解】-- 表单校验，表单元素排列在一行，常用表单元素,及报错等
使用elementui官网链接自定义主题色步骤表单【详解】-- 表单校验，表单元素排列在一行，常用表单元素
2022-04-22 10:34:34
1352
原创 Vue 拖拽组件 vuedraggable 和 vue-dragging
Vue 拖拽组件 vuedraggable 和 vue-dragging
2022-03-01 10:24:38
917
原创 前端vue加密方式MD5,SHA256等
在线HASH加密工具在线加密超链接MD5加密细节vue中MD5加密超链接SHA256加密细节SHA256加密链接
2021-12-14 15:20:37
3055
原创 vue打包及其压缩
在src同级文件夹建vue.config.js文件内容为module.exports = { // baseUrl:'./', 在vue-cli.3.3版本后 baseUrl被废除了，因此这边要写成 publicPath。 publicPath: process.env.NODE_ENV === 'production' ? '../': '/', //项目部署的基础路径 outputDir: 'zhao',//将构建好的文件输出到哪里(文件夹名) asset
2021-11-26 17:11:25
2584
原创 Vue 中mixins混入使用及vue中引入js/css文件,全局注册的区别,data中定义css样式
目录简介如何创建Mixins？使用Mixins简介mixins（混入），官方的描述是一种==分发 Vue ==组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和
2021-10-28 15:00:05
4163
1
原创 vue中使用sass和less
1下载依赖，安装包npm i sass-loader node-sass --savesass-loader版本过高会报错npm i [email protected] --save 或者然后在src同级目录下建vue.config.js> module.exports = {> css: {> loaderOptions: {> // 没有分号会报错> sass: {>
2021-10-27 14:21:16
4494
原创 nginx的安装使用
下载官网链接详细步骤:如果nginx任务不能结束使用命令行taskkill /fi "imagename eq nginx.EXE" /f 使用vue生产环境npm run build 生成的dist文件内容复制到nginx>html文件中双击启动nginxconf>nginx.conf文件配置server { listen 80; #监听端口 server_name localhost;#监听地址 lo
2021-08-29 22:08:01
95
原创 ant-design-vue的基础使用
目录下载使用官网链接下载 npm i --save ant-design-vue@next在main.js中引入(这是全局引入)import Antd from 'ant-design-vue'// 引入Ant Design Vue组件import 'ant-design-vue/dist/antd.css' // 引入Ant Design Vue样式Vue.use(Antd) //挂载到vue中使用任意vue页面中直接使用<...
2021-08-11 15:44:59
1009
原创 react基础
React的基本使用安装脚手架create-react-app我们需要在我们的电脑上全局安装脚手架create-react-appnpm i -g create-react-app创建项目我们可以利用脚手架创建我们的项目create-react-app 项目名有些使用windows的PowerShell可能会报错，我们可以输入cmd切换到cmd环境中JSX语法JSX指的就是在JS代码中直接写HTML代码，所谓的HTML其实就是JSX插值我们可以将变量通过{}的形式插入到我们JSX中
2021-06-16 19:13:03
447
1
原创 vue3基础
目录vue3的特点vue3的实例化创建vue3 的组件创建组件通信组合式APIsetup函数setup函数中数据响应式setup函数中应用计算属性和侦听器计算属性计算属性的getter 和 setter侦听器vue3的特点打包体积更小新的代码编写方式 组合式API( Composition API)提供了一些新的方法 比如setup()函数， computedvue3 使用 es6的 Proxy 实现数据的双向绑定vue3 使用 摇树（tree shaking）的机制vue3的实例化创建
2021-06-14 23:20:30
1395
2
原创 vue-cli中使用echarts(图表)
这个示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S按需引入上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。about.vue// 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入提示框和title组件require('echarts/lib/co
2021-06-07 23:19:56
749
原创 ts详解和js区别
ts和js区别阮一峰ts官网http://ts.xcatliu.com/introduction/what-is-typescript.htmlts官网https://www.tslang.cn/docs/home.html
2021-06-04 17:03:59
8666
原创 git使用步骤详解
目录下载和安装git 配置git 的基础知识Git 目录（仓库）git 的基本命令行git addgit commit查看当前暂存区的状态查看历史记录版本回退git branch本地仓库上传到远程仓库git的ssh(密钥） 链接远程仓库下载到本地分支命名规范下载和安装下载：官网下载 https://git-scm.com/国内较快地址 https://npm.taobao.org/mirrors/git-for-windows/检测是否成功安装1、鼠标在桌面或者文件夹中任意位置右键，出现 g
2021-05-30 23:47:48
1293
1
原创 微信小程序基础
基础view就相当于divtext相当于span图片的用法/就是根,从根查找<image src="/images/home.png"></image>navigator 相当于a标签 ,注意,不要忘了前面还有一个/<navigator url="/pages/video/video">视频播放</navigator>Page中deta中的数据可以在页面中直接使用<view>{{name}}{{text}}</vi
2021-05-26 23:12:30
1514
1
原创 js的防抖和节流
这里写目录标题防抖和节流概念防抖实现(计时器实现)节流实现(时间戳实现)防抖和节流概念防抖和节流都是性能优化的方式 : 针对的是高频触发的事件： 比如 滚动事件scroll, 用户输入事件 input函数防抖debounce：用户一直触发事件，事件处理函数是不会执行的，直到用户在指定的时间内不在触发该事件，则执行一次事件处理程序（防抖意味着事件处理程序只会执行性一次）函数节流 throttle：用户一直触发事件，事件处理函数会每间隔指定的时间后执行一次， 在指定的时间内不会反复执行；（节流意
2021-05-20 15:43:02
299
原创 Vuex状态管理(数据管理),辅助函数及加命名空间后辅助函数用法
目录Vuexvuex 的核心概念mutations属性(修改 vuex 中state 的唯一入口)mapState辅助函数提交载荷对象风格提交mutation和载荷mapMutation 辅助函数vuex 的 getter 属性(vuex的计算属性)getter 接受参数： 需要通过闭包的形式对getters 重命名，使用对象的形式Vuexvuex是专门用来管理vue.js应用程序中状态的一个插件,官方称为状态管理也可以叫它数据管理vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一
2021-04-25 23:28:56
1621
原创 Vuecli脚手架/前端解决跨域/属性穿透/环境变量配置
这里写目录标题Vue.cli的安装和运行安装一个插件,之前学js用到控制台现在学vue用到这个插件好比学js时的控制台谷歌极简插件下载vue.devtools如果安装不能用看这个人的博客https://blog.csdn.net/sunhl951/article/details/80185628Vue.cli的安装和运行cli命令行界面(Command Line Interface)npm install -g @vue/cli检查版本号 vue -V 或vue --version
2021-04-22 11:01:53
1734
原创 Vue路由router/导航守卫
Vue路由用的前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。利用URL中的hash("#");<style> .router-link-exact-active { color: red; /* 渲染的属性 */ }</style><body> <div id="app"> <!-- 使用 router-link 组件来导航. -->
2021-04-15 23:36:36
1452
原创 vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
组件结构组件结构： Vue.component('自定义组件名', { template:'自定义模板', data(){ return { key:value, ... } } })组件中的相关属性：组件类似于vue实例对象，vue实例对象拥有的属性，比如data, methods, computed, filter ，
2021-04-13 23:02:48
1605
原创 vue使用,及指令介绍,计算属性/过滤器
Vue是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(意思是靠数据作为驱动的)，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网:https://cn.vuejs.org/下载安装下载开发管理下载后的js文件,引入页面即可使用vue的单页面原理vue 实现单
2021-04-08 22:33:54
1051
原创 webpack基础模块打包,js/html/css/图片模块化导出,语法转译
webpackwebpack 默认识别js文件， 可以使用 CommonJs （模块化开发）语法 ， 也可以使用 es6 （模块化开发）的语法安装npm init -ynpm i webpack webpack-cli --save-dev配置启动命令在package.json 文件的scripts 字段中配置启动命令（打包命令）, 配置一个开发环境，一个生产环境 "scripts": { "test": "echo \"Error: no test specified\" &
2021-04-06 19:01:04
351
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人