- 博客(147)
- 资源 (1)
- 收藏
- 关注
原创 vue3的provide
provide和通常成对一起使用,使一个祖先组件作为其后代组件的依赖注入方,无论这个组件的层级有多深都可以注入成功,只要他们处于同一条组件链上。provide:提供一个值,可以被后代组件注入。inject:注入一个由祖先组件或整个应用 (通过) 提供的值父组件子组件B组件inject如果在注入一个值时不要求必须有提供者,那么我们应该声明一个默认值。
2023-08-31 16:13:56 330
原创 vue3全局事务总线mitt
vue3中$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口。可以使用Mitt库(其实就是发布订阅模式的设计)使用方法通过emit派发, on 方法添加事件,off 方法移除,clear 清空所有。如果在setup中派送参数,需要写在onMounted。新建mitt文件夹,index.ts。
2023-08-29 16:31:48 312
原创 vue3中的自定义指令
之前的渲染中代表指令所绑定元素的 VNode。全局注册的自定义指令将正常工作。:指令绑定到的元素。这可以用于直接操作 DOM。中不需要显式注册,但他们必须遵循。:代表绑定元素的底层 VNode。:一个对象,包含以下属性。
2023-01-12 13:11:20 541
原创 express路由模式
基于正则表达式的路由路径示例:这条路径将匹配任何带有“ a”的路径。路由参数名称只能由 [A-Za-z0-9_] 组成。等匹配规则应用到一些字符上。
2022-12-20 15:40:08 523 1
原创 vue3中的readonly
接受一个对象 (不论是响应式还是普通的) 或是一个,返回一个原值的只读代理。只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与reactive()相同,但解包得到的值是只读的。
2022-12-13 16:32:08 1236
原创 computed和watch
接受一个 getter 函数,返回一个只读的响应式对象。该 ref 通过.value暴露 getter 函数的返回值。它也可以接受一个带有get和set函数的对象来创建一个可写的 ref 对象。
2022-12-11 17:02:18 196
原创 vue3的transition
transition过渡属性linear:规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))ease-in:规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))ease-out:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))ease-in-out:规定以慢速开始和结束的过渡效果(等于 cu
2022-10-01 12:52:18 6035
原创 vue3的v-model
v-model的参数,支持多个v-model。绑定,生成的 prop 名将是。v-model支持自定义修饰符。上所添加的修饰符,可以通过。prop 在组件内访问到。在input中使用相当于。对于又有参数又有修饰符的。作为 prop,并以。
2022-09-24 18:12:09 1448
原创 倒计时仿多多的
countTime(oldtime){ let newtime = new Date() let time=(oldtime-newtime)/1000 let h = parseInt(time / 60 / 60 % 24); h=this.suerNumber(h) let m = parseInt(time / 60 % 60); ...
2022-07-08 10:07:10 84
原创 element表格在表头和数据行添加图标
<template slot="header" slot-scope="scope"> </template>
2022-07-07 11:38:31 685
原创 报错incorrect username or password ( access token )
控制面板->用户账户->凭证管理器-Windows凭证 找到 git:https://gitee.com 点击编辑,修改密码使用该过程,无效,全部删除,在gitee上重新换个密码,重新验证登录
2022-04-22 14:35:27 583
原创 echarts遇到的问题
1.使用多条折线图,位置错误使用了stack2.设置不同的颜色,title let option = { title: { text: "我是title", }, color: ['#ec808d','#f59a23','#8080ff'],}3.设置图表坐标 grid: { left: "3%", right: "4%", bottom: "1
2022-04-21 14:14:36 1317
原创 vue安装image-webpack-loader
使用cnpm安装cnpm install --save-dev image-webpack-loaderModule build failed (from ./node_modules/image-webpack-loader/index.js):Error: Cannot find module 'gifsicle的错误信息,这是由于webpack-image-loader没有完全拉取下来:webpack-image-loader依赖的四个图片处理库都需要拉取bin文件"depende
2022-04-15 14:56:53 1176
原创 npm 启动项目报错 Cannot find module ‘\@babel\compat-data\data\corejs3-shipped-proposals‘
执行npm install -D babel-loader @babel/core @babel/preset-env webpack
2022-04-01 16:04:21 353
原创 sublime text如何安装插件
已Alignment为例:快捷键ctrl+shift+p打开点击Package Control:Install Package,搜要安装的插件,点击安装官网插件Package Control - the Sublime Text package managerhttps://packagecontrol.io/
2022-03-24 11:34:42 625
原创 vue线上刷新404
history模式是新增的api,改模式下主要有两个方法在起作用(pushState与replaceState),这两个方法都可以使得浏览器路径改变,但不刷新页面,浏览器不会去加载相应的页面,也不会去检查该路径的页面是否存在。就因为这个特性使得我们在路由跳转时,路径改变了,其实并没有加载页面,当我们刷新的时候就会暴露我们的资源在服务器上找不到,因为vue-router设置的路径不是真实存在的路径。在服务端nginx 进行配置location ~ / { try_files $ur
2022-03-03 14:10:36 483
原创 vue使用swiper7
下载npm i swiper使用import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";import "swiper/swiper.min.css"; <swiper :slides-per-view="2" :space-between="10"> <swiper-slide> </swiper-slide> &l
2021-12-03 15:52:42 4330
原创 swiper禁止滑动
swiper禁止手动滑动,只需要在最外层的容器上增加class="swiper-no-swiping"<div class="swiper-no-swiping"> <swiper :options="swiperOption"> <swiper-slide> </swiper-slide> </swiper> </di
2021-09-07 10:14:52 3568
原创 vueTouch的使用
下载npm install kim-vue-touch -s引入import vueTouch from 'kim-vue-touch'Vue.use(vueTouch)使用 <div v-tap="(e)=>vueTouch(e)" v-longtap="(e)=>vueTouch(e)" v-swipeleft="(e)=>vueTouch(e)" v-swiperight="(e)
2021-09-02 15:49:37 756
原创 HTMLCollection转为数组
HTMLCollection 是 HTML 元素的集合。HTMLCollection 对象类似一个包含 HTML 元素的数组列表。 let arr=document.getElementById('box').getElementsByTagName('i') console.log(arr) let arr=document.getElementById('box').getElementsByTagName('i') //Array.from()方法就是将一个类数组对象.
2021-08-31 14:44:43 2106 6
原创 p标签自动换行
设置p自动换行,可以解决p{ word-wrap: break-word; word-break: break-all;}word-break指定了怎样在单词内断行word-wrap 属性允许长单词或 URL 地址换行到下一行
2021-08-17 14:44:18 1133
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人