- 博客(90)
- 收藏
- 关注
RSS订阅原创 React 中useImmer的使用
是一个自定义 React 钩子，它结合了 React 和 immer，用于更轻松地管理状态。它可以帮助你处理不可变状态，同时减少繁琐的状态更新代码。钩子可以使状态管理更加简单和可维护，特别是当你需要频繁修改深层嵌套的状态对象时。它使你能够在更新状态时编写更自然的代码，而不必手动创建新的状态副本。来修改状态，而不需要担心不可变性。immer 会自动处理状态的不可变性。通常，你会得到一个状态值和一个用于更新状态的函数。它的用法与 React 的。在上面的代码中，我们使用。
2023-09-09 10:12:57
1441
1
原创 vue3.0中的v-model
vue3.0中的v-model语法有所变化，如果我们给一个组件书写了v-model之后，相当于完成了俩件事情
2022-06-19 15:30:48
1043
1
原创 vue3 中父子文件之间通信
在vue3的组合式API中，父传子的基础套路完全一样，基础思想依旧为：父传子是通过prop进行传入，子传父通过调用自定义事件完成
2022-06-07 20:23:56
529
原创 解决引入外网资源403 forbidden问题
页面中引入外网的链接资源，会产生一个新的 http 请求。为了安全（URL里面可能包含用户信息），浏览器一般都会给这写请求头加上表示来源的 referrer 字段。 所以，此时我们需要隐藏外部连接中的 referrer ，在 head 标签中加入 meta ，代码如下： <meta name="referrer" content="no-referrer">...
2021-11-15 13:54:35
714
原创 vue视频播放插件vue-video-player的具体使用方法
1 、 安装npm install vue-video-player --save2、可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）【1】全局引用， 在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css' Vue.use(VideoPlay
2021-11-15 13:50:38
2365
1
原创 vue项目中配置多语言
1 首先安转多语言的依赖包npm i vue-i18n@8.22.22 进行多语言设置// 导入 Vueimport Vue from 'vue'// 导入 vue-i18n 插件import VueI18n from 'vue-i18n'import locale from 'element-ui/lib/locale' // 导入 Element 语言配置插件import enLocale from 'element-ui/lib/locale/lang/en'...
2021-11-13 09:25:00
1614
原创 js-excel时间转换
// 把excel文件中的日期格式的内容转回成标准时间// https://blog.youkuaiyun.com/qq_15054679/article/details/107712966export function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000.
2021-11-08 22:23:06
359
原创 使用 dayjs 格式化时间
1、下载 dayjs 并导入到当前组件中npm install dayjs --saveimport dayjs from 'dayjs'2、创建格式化入职日期的过滤器filters: { // 格式化入职日期的方法 formatTime(time) { return dayjs(time).format('YYYY-MM-DD') }}3、改造页面结构<el-table-column sortable label="入职时间"> <
2021-11-05 20:12:29
2123
原创 使用Element封装的方法 进行封装组件
1、创建一个js文件，将组件引入，操作如下// 引入组件import PageTools from '@/components/PageTools'// 创建数组，数组中是导入的组件模块const components = [ PageTools]export default { // 当我们在 Vue.use 方法中创建了一个 install 方法 // 方法会被自动调用，在调用的过程中，会将 Vue 作为参数传递给 install 方法 install(Vue) {.
2021-11-04 18:25:20
696
原创 使用Vue.use方法封装组件
1、创建一个js文件，将组件引入，操作如下//将组件引入到当前js文件中，进行注册import PageTools from '@/components/PageTools'export default { install(Vue) { Vue.component('PageTools', PageTools) }}2、将js文件引入到main.js中，在模块中使用Vue.use 注册import component from '@/components'..
2021-11-04 18:11:07
389
原创 Vue-路由传参的两种方式
方式一：路由传参 { path: '/search/:keywords', component: () => import('@/views/SearchResult') },获取方式：this.$route.params.keywords //李晨飞方式二：组件传参// 文章点击事件 articleListClickFn (artId) { this.$router.push({ path: ..
2021-10-18 21:44:15
230
原创 vue搜索框输入内容，搜索列表相对应内容高亮显示
思路：搜索列表添加v-html="lightFn(str)"，将列表的内容传到lightFn方法中 this.kw是输入框里输入的内容 ig是匹配规则 lightFn (str) { const reg = new RegExp(this.kw, 'ig') return str.replace(reg, (substring) => { return `<span style="color:re...
2021-10-18 21:33:55
685
原创 我自己封装的全局指令(输入框自动获取焦点)
情况1：对象+install方法const directiveObj = { install(Vue){ //vue函数相当于import Vue from 'vue' console.log(Vue) // 全局指令的方法 Vue.direvtive('fofo',{ inserter(el){ //el是原生的div标签 //往里获取到in
2021-10-18 21:28:25
146
原创 输入框防抖
<!-- 搜索组件 --> <van-search placeholder="请输入搜索关键词" background="#007BFF" shape="round" @input="inputFn" v-model="kw" />// 输入框防抖 inputFn () { clearTimeout(this.timer) this.time.
2021-10-18 21:16:48
766
原创 数组在Vue项目中 去重 的方法
方式一const newArr = [],this.Arr.forEach(str =>{ const index = newArr.findIndex(samllStr => smallStr === str) if(index === -1){ //搜素历史在newArr里没找到 newArr.push(str) }})console.log(newArr)方式二this.arr= Array.from(new .
2021-10-18 15:34:42
159
原创 vue-router懒加载
语法：component: () => import('路由地址')路由懒加载 - 查看文档: 路由懒加载 | Vue Routerhttps://router.vuejs.org/zh/guide/advanced/lazy-loading.htmlimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [ // redirect重定向 { path..
2021-10-13 12:05:16
121
原创 vue-axios 封装 和 拦截器
// 封装网络请求模块// 好处：寻找和调用方法// 好处2：易于未来替换 和 扩展import axios from 'axios'import { getToken, removeToken } from '../utils/token'import router from '../router/index'import { baseURL } from './global'// axios.create() 创建一个自定义的axios请求方法(填入相关的配置)const instan.
2021-10-12 21:03:21
139
原创 vue-router路由守卫（权限）
将代码补充到router路由文件里// 路由守卫router.beforeEach((to, from, next) => { // 判断本地有没有token const token = getToken() if (to.path !== '/login' && token === null) { next('/login')// 终端路由跳转，强制修改成/login 意思：强制切换页面到登录页 } else { next() }}).
2021-10-12 20:59:58
119
原创 vue-项目_移动端适配
适配步骤1、下载amfe-flexiblenpm iamfe-flexible2.到main.js引入import "amfe-flexible"3.下载postcss和postcss-pxtorem@5.1.1postcss: 后处理css, 编译翻译css代码postcss-pxtorem: 把css代码里所有px计算转换成renpm ipostcss postcss-pxtorem@5.1.14.根目录下创建po...
2021-10-12 20:31:32
98
原创 vue-Vant组件库引入使用
1.下载vant组件库npm ivant2.根据文档指引, 配置按需引入 Vant - Mobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#yin-ru-zu-jian3.下载插件npm ibabel-plugin-import -D4.在babel.config.js-添加如下配置module.exports = { // ...省略了其...
2021-10-12 20:27:41
135
原创 vsCode-Vue_ESLint插件代码规范设置
1、下载这个插件到vscode中2、非常非常非常重要一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc3、一定要配置插件监测的时机, 修改ESLint插件配置"eslint.run": "onType","editor.codeActionsOnSave": { "source.fixAll.eslint": true}...
2021-10-12 20:23:30
134
原创 vue-封装axios（两种方法）
import axios from 'axios'// axios.create() 创建一个自动以的axios请求方法（填入相关的配置）const instance = axios.create({ baseURL: 'http://geek.itheima.net', timeout: 5000 // 超过5秒判定超时})export default instance
2021-10-11 17:00:57
174
原创 webpack自定义配置_自动打开浏览器_默认端口号
src并列处, 新建vue.config.js/* 覆盖webpack的配置 */module.exports = { devServer: { // 自定义服务配置 open: true, // 自动打开浏览器 port: 3000 }}
2021-10-05 14:25:36
391
原创 Vue - 插槽的基本使用（笔记）
目标: 组件基础使用场景: 组件底座(基本)样式不变, 插入的标签不同 传入数据用props, 传入标签用插槽术语: 对组件分发不同标签的一种技术(重要)口诀:1. 组件内, 使用slot占位2. 父组件上, 使用子组件, 标签夹着的地方传入具体标签替换到slot上目标: 插槽默认内容...
2021-09-29 19:50:54
190
原创 Vue 移动端—购物车案例
开发环境： vue2.6.11 + vue-cli4.5.13使用工具：vscode,vue脚手架使用技术：vue基础，axios案例描述：使用axios渲染数据，实现计算勾选商品的金额，勾选的数量，全选控制小选，小选控制全选，商品数量加减，手动输入商品数量步骤如下：项目初始化：创建项目名称，安装第三方模块 npm ibootstrapless less-loader@5.0.0 -D 按照需求, 把项目页面拆分成几个组...
2021-09-28 22:01:05
1284
原创 Vue - $nextTick使用
<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> <p>2. 获取组件对象 - 可调用组件内一切</p> <Demo ref="de"></Demo> <p>3. vue更新DOM是异步的</p>.
2021-09-28 21:45:55
78
原创 Vue-$refs-获取DOM 和 组件对象
<template> <div> <p>1. 获取原生DOM元素</p> <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1> </div></template><script>// 目标: 获取组件对象// 1. 创建组件/引入组件/注册组件/使用组件// 2. 组件起别名ref// 3. 恰当时机, 获取组件对象expo.
2021-09-28 21:41:39
463
原创 vue-axios基本使用
首先需要下载axios（这里下载的是axios@5.0.0）npm iaxios@5.0.0axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx: xxx }}).then(res => { console.log(res..
2021-09-28 21:40:50
108
原创 Vue的生命周期
目标Vue 框架内置函数，随着组件的生命周期阶段，自动执行讲解作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法 初始化 挂载 更新 ...
2021-09-28 21:38:15
57
原创 vue案例（代办任务案例）
开发环境： vue2.6.11 + vue-cli4.5.13使用工具：vscode使用技术：vue基础，css案例描述：发起待办任务，勾选完成任务，查看任务状态，清除已完成的任务css代码如下： base.csshr { margin: 20px 0; border: 0; border-top: 1px dashed #c5c5c5; border-bottom: 1px dashed #f7f7f7;}.learn a { font-weight...
2021-09-26 20:15:43
708
原创 vue(品牌管理)案例-结合_computed计算属性_watch深度侦听_moment第三方时间管理模块_bootstrap.css
使用vue-cli创建的vue框架，代码如下App.vue<template> <div id="app"> <div class="container"> <!-- 顶部框模块 --> <div class="form-group"> <div class="input-group"> <h4>品牌管理</h4>
2021-09-25 21:17:49
104
原创 vue侦听器-watch 和 深度侦听 初步认知
听普通侦语法:watch: { "被侦听的属性名" (newVal, oldVal){ }} 举例：<template> <div> <input type="text" v-model="name"> </div></template><script>export default { data(){ return ...
2021-09-25 20:19:41
96
原创 vue 结合computed写一个小案例（全选影响小选，小选影响全选）
目标小选框都选中(手选), 全选自动选中分析:① 先静态后动态,② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来代码如下：（使用vue-cli生成的框架结构）<template> <div> <span>全选:</span> <input type="checkbox" v-model=...
2021-09-25 20:08:54
212
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人