- 博客(48)
- 收藏
- 关注
RSS订阅
原创 vue3-路由配置
vue-router 怎么用? 1.下载 npm install vue-router@4 2.创建router文件夹 并添加index.js import { createRouter, createWebHistory ,createWebHashHistory } from 'vue-router' // 两种方式 //1.createWebHashHistory --- hash //2.createWebHistory --history const routerHist.
2021-11-16 19:37:16
820
原创 vue3-vuex的使用
vue3中vuex是怎么配置呢? 1.下载npm install vuex@next 2.创建store文件夹并添加index.jsimport {createStore} from "vuex"; const store = createStore({ state() { return { storeCount: 1 } }, getters: { double(state) { .
2021-11-16 19:30:22
641
原创 uniapp 页面跳转 详细（如何传递对象）页面之间如何传值$emit, $on 时机。还有对应的新写法
1. 常用方式uni.navigateTo({ url:'/pages/index/test', //建议这么写})//或者<navigator url="./test" animation-type="pop-in">挑战2</navigator>2.情况1. 在当前页面跳转到test页面的时候 我希望传递一些参数 uni.navigateTo({ url:`/pages/index/test?id={this.id}&name=${this.name}`
2021-10-24 20:19:48
11432
6
原创 vue3 数据定义方式 reactive系列详解
// 上一篇主要写了关于父子组件传值 // setup的定义方式 ，这一篇主要讲解定义数据的方式 // reactive, ref 这两个不在陈述,定义格式请看上篇 // readonly 定义一个只读的**对象**， 也只接受对象 // 这类似Obj.freeze() 来冻结数据 <template> <div> <div>{{ data.count }}</div> ...
2021-09-29 16:12:47
2246
原创 vue3.0 数据定义，父子组件传值，setup的写法，ref等
vue3.0 **提供两种setup的入口方式，现在的话没有this**1.export default{ setup(){} }2.<script setup>// 建议使用第二种，因为定义更简便// 数据定义和方法使用 两种格式---------------------------------分割----------------------------------------<template> <div class='content'&g
2021-09-27 13:45:54
1117
1
原创 vue3-vite-ts axios添加声明文件，axios封装
1.yarn add axios 2.创建一个http的目录,添加http.ts文件import axios from "axios";import {AxiosRequestConfig, AxiosResponse} from "axios";这里是pinia的仓库，这里有个问题import {userStore} from "../store";这里这么写完就会pinia会报错，应该在拦截器中写//const stotre = userStore();import {message}.
2022-05-30 15:44:51
1372
原创 vue3 v-memo
<template> <div> <input type="text" v-model="tips"> <div v-memo="shouUpdate"> <p v-for="(item,index) of arr" :key="index"> {{ tips }}-{{ animalType[tips] }} </p> </div> </div&
2022-05-23 10:27:58
594
原创 vite自动按需导入ant-desgin-vue 自动导入hook的配置
import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'//支持jsximport vueJsx from '@vitejs/plugin-vue-jsx';// 自动导入vue中hook reactive ref等import AutoImport from "unplugin-auto-import/vite"//自动导入ui-组件 比如说ant-design-vue element-plus等import
2022-05-20 11:30:37
1040
原创 uniapp 从0到1 h5地图引入定位服务，获取两个经纬度之间的距离或多个经纬度之间的距离，跨域配置
uniapp h5地图必须选择腾讯地图，这是uniapp规定的1.引入定位服务首先来到腾讯地图开放平台，申请一个key这是可以多选的，但必须勾选webservice api，如果你报这个问题了，就是没勾选接下来就可以用定位功能 如果需要具体信息，只能为app端,因为H5只有经纬度 https://uniapp.dcloud.io/api/location/location.html#getlocation uni.getLocation({ type
2022-04-13 08:30:18
1745
3
原创 vue3 v-model方式修改父组件内部得值，自定义修饰符
vue中数据数据流向vue中数据流向是单向的，也就是说我们不能直接修改props中的值所以我们都会<template> <div> <Renderer :data='data' @updateValue='updateValue'/> </div></template><script setup> 我这里使用unplugin-auto-import所以不必导入ref import Re
2022-04-06 10:20:53
2419
原创 uniapp-地图-不同端的使用-高德maker问题-经纬度转换详细地址
app端地图使用=>高德地图(官方文档推荐使用nvue不使用vue)h5端小程序使用=>腾讯地图支付宝使用=>高德地图在manifest.json配置h5端配置一定要注意不同端使用不同的地图否则没法渲染解释一下为啥非要nvue，app端如果使用vue <template> //app的是高德 <map @tap='mapClick'></map> </template> <script> expor
2022-03-28 21:14:36
884
原创 vue3响应式的简单实现（vue设计与实现-霍春阳）
这一篇主要讲解VUE3的响应式，这个系列会随着博主的不断学习一直更新1.首先vue3是通过proxy实现的响应式，先来简单描述proxylet obj = new Proxy(你要代理的对象，{ get(target,key){ target是当前对象,key是键 return target[key] }, set(target,key,newValue){ target[key]= newValue }})2.编写开始首先我们需要存储所有需要触发的effect桶，也就是集合，
2022-03-20 15:44:10
1752
原创 前端Blob对象,文件下载，图片预览，文件下载插件推荐
简介：blob是存放二进制大对象的容器,包括large object 创建一个bold对象let str = '123456';//这样你就拥有一个blod对象const blob = new Blob([str],{ type: 'text/plain'})//如果拿到blod中存储的内容 blob.text().then(result => console.log(result)) //这是文本类型的奥~~2.模拟后台给你发送.html文件a标签添加download是h5
2022-03-16 15:33:09
1025
原创 前端对文件进行分片
前端夏老师------<!DOCTYPE html><html><head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /></head><body> <input type="file" id='input'> <button id.
2022-03-12 17:10:14
2108
原创 解决js精度丢失问(big.js)
yarn add big.js <template> <div>4563</div></template><script>import Big from "big.js";export default { data() { return { testValue: [ { value: 0.1, }, { val...
2022-03-03 14:20:13
465
原创 vscode合集(强烈推荐)
只提供文字版，没有截图 Auto close Tag (自动帮你闭合标签) Tabnine AI autocomplete (智能代码提示,不好用来喷我) Auto Rename Tag (改一个标签，另一个也被更改) Bracket pair Colorizer(间距) Chinese(中文包) code runner(运行node.js) code spell checker(拼写检查) Identical sublime Text (这是主题) Live Sass Compile.
2022-02-25 21:23:15
175
原创 vue解决单页面seo
yarn add prerender-spa-plugin yarn add vue-meta-info - 来到vue.config.js const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { configureWebpack: { plugins: [ new Prerender...
2022-02-25 21:11:05
624
原创 vue3使用Pinia
- pinia简介- Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态- Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合API- 为什么使用pinia?- Pinia 修改数据更方便- Pinia 仓库数据具有缓存- Pinia 只包含 state getters action 更小巧- Pinia 编译速度更快- Pinia 对ts的支持更也友好- Pinia 和vuex是同一团队- Pinia 支持vue2和vue3一. 使
2022-02-17 16:57:19
1674
原创 vue@3 TypeError: Cannot read property ‘references‘ of null
这么做会会报上面那个错误 只需要将两个script标签换一个位置就可以了
2021-12-20 08:27:28
433
原创 vue3 插槽使用
vue3 遗弃了 slot 的方式vue3方式具名插槽 <template> <div class="content"> <slot name="label"></slot> </div></template>//这是插槽的组件<SlotComponent>现在插槽必须使用 template 渲染 v-slot 这里必须这么写 <template v-slot:label>
2021-12-10 13:40:22
1717
原创 vue3 获取$attrs 跨组件通信 provide - inject 兄弟组件eventBus
vue3 获取$attrs的方式 <Attrs title="this is title" :data="attrsData"/> <script setup> import Attrs from "./components/Attrs/Attrs" let attrsData = reactive( [ { id: 1, name: 'gq' } ] ) </script&g.
2021-12-07 10:42:15
2186
原创 vue3 样式穿透
vue2.x <<< .a /deep/ .a vue3 &:(.swiper-pagination-bullet-active){ width: 20px; height: 20px; background: #fff; }
2021-12-03 20:30:08
5142
原创 vue3获取组件元素
<template> <Rate :value="score" theme="green" @update-rate="update" ref="rate" /></template><script setup>import {onMounted,ref} from "vue";import Rate from "./Rate"onMounted(()=>{ //这里就可以获取组件元素，你可以更改当前元素的style consol
2021-11-29 09:21:20
1832
原创 vue3 配置轮播图 swiper6
本人用的是"swiper": "^6.3.0", 现在轮播图配置更加友好 <template> <swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swiper_options.pagination" > <swiper-slide v-for..
2021-11-21 14:17:03
834
2
原创 vue3.0 ref 和reactive 制空数组的方式 (两者是有差异的)
1.采用 reactive 制空数组 let goodList = reactive([ { id: 1, title: '苹果' }, { id: 2, title: '鸭梨' } ]) 正常想法 goodList = [] //但是这样是不行的 正确 goodList.length = 0; //--------------------------..
2021-11-11 19:24:13
3313
原创 uniapp 安卓 ios 截屏 保存到相册
//有一部分是借鉴 saveImageToPhotos() { // 当前当前设备是ios还是安卓 let type = uni.getSystemInfoSync().platform; let height = type === 'android' ? '85' : '58'; let top = type === 'android' ? '15' : '15'; //获取当前页面信息 let pages = getCurrentPages..
2021-10-29 15:29:38
820
4
原创 uniapp 小程序分包
在uniapp配置的 pages 对于小程序中的主包，因为小程序的主包的大小限制为2M， 所以需要进行分包设置// 分包开始”subPackages“：[ root": "pagesSub/invoice", // 分包之后的根路径 "pages":[ { "path": "face/face", //子路径 "style": { "navigationBarTitleText": "人脸核身", // 页面标题
2021-09-18 10:19:19
342
原创 uniapp 获取当前页面实例
用uniapp获取当前页面实例的时候不能直接使用this而是使用// 获取当前页面的实例let pages = getCurrentPages();//这句话 获取的才是当前页面实例let currentPage = pages[pages.length-1]
2021-09-09 14:10:53
7782
原创 uniapp图片保存到相册
你需要知道当前用户是否授权 你保存相册的权限2.你直接吧代码copy吧。 写不动了 savePoster()｛ let _this= this; uni.getSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { // 如果开启直接保存 _this.saveImageToPhotosAlbum(_this.goodUrl); ..
2021-09-02 18:06:46
220
原创 uniapp 获取手机号 和微信授权
uniapp 微信授权登录。前提：想要授权的话 一定要是小程序的开发者。不然头像的标签。授权等等都无法实现uniapp 提供获取手机号的按钮 和 授权登陆的按钮这是手机号的。 注意的是：只能用户点击才会触发授权登录的按钮讲open-type 里面的值改成 getuserinfo 就可以了。当手机号那个按钮点击的时候 我的方法名字叫下面这个weixinLogin(e) {// 这里将会获取‘getPhoneNumber:ok’ 这个信息//然后你需要调用uni.login({pr
2021-09-02 17:54:25
2068
2
原创 Vue全局组件的创建,建议学习jsx
需求:有一个客服悬浮的组件，点击它跳转到客服页面 ，并且多个页面都有这个悬浮组件可以一个个引入，没有问题使用全局组件希望读这个文章的人，会jsx。–start来到main.js父组件中的用法其他用法：希望从父组件中的拿到值,并且父组件拿到当前选择的元素...
2021-07-06 19:12:39
171
原创 vue爷组件传值给孙组件，简单方法
正常我们在爷爷组件请求数据，然后将数据发到父亲组件，在由父组件发到孙子组件。这样会出现两次props。 父亲组件就是一个中间站。 其实有更简单的方式看代码<Son :value=“value” @changeValue=“changeValue” /> --爷爷组件 引入父亲组件 value 就是你想发给孙子的值data() {return {value: “qq”,};父亲组件 – 这里就这么写 将方法和值带入孙子组件<button
2021-05-18 20:40:32
2942
3
原创 uniapp 上拉加载 下拉刷新
uniapp 上拉加载 和下拉刷新uniapp 提供开发者 两个函数onPullDownRefresh () //下拉刷新onReachBottom() //上拉加载我们需要在 pages.json配置{“path”: “pages/test/test”,“style”: {“navigationStyle”: “custom”,“navigationBarTitleText”:“我的测评”,“enablePullDownRefresh”: true, //允许下拉
2021-02-26 11:39:10
458
2
原创 html 引入 es6中 的export default-(模块) export
1.问题就是你先定义一个js 然后里面写export default {init: function () {this.handleAddListener(‘load’, function () {console.log(“export 中的方法被调用了”)})},handleAddListener: function (type, fn) {if (window.addEventListener) {window.addEventListener(type, fn)} else {
2021-01-26 22:53:48
4373
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人