Winston_Mo_-CSDN博客

原创 JS数组中every, some, filter, map方法

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，剩下的元素不会再进行检测，如果所有元素都满足条件，则返回 true。如果数组中检测到有一个元素满足，则整个表达式返回 true ，剩下的元素不会再进行检测，如果没有元素都满足条件，则返回 false。第一个参数：数组的元素。第二个参数：数组的下标。第一个参数：数组的元素。第二个参数：数组的下标。第一个参数：数组的元素。第二个参数：数组的下标。第一个参数：数组的元素。第二个参数：数组的下标。第三个参数：整个数组。第三个参数：整个数组。

2022-09-09 13:42:40 501 1

原创理解 Vue3 里的 defineProps 和 defineEmits

一方面可以提升代码复用效率，另一方面通过更好的 tree-shaking，打包体积也会小很多：作为参考，前面博客中提到。注意，这三个工具方法只是帮助 Vue 编译器构建组件，它们不会出现在最终代码里，我们也不能预期它们会像普通函数那样工作。，打包后 vendor.js 只有区区 96kB，里面可是用到了 vue3 全家桶。因为 Vue 是 MVVM 框架，它的视图会在数据变化后自动渲染，于是通常情况下，输出的是对象的指针，而非快照。所以使用目前版本，上面这段代码，访问到的。返回的默认值，一直是空的。...

2022-08-10 17:54:45 3103

翻译 vue3 keep-alive

vue

2022-07-27 15:34:07 338

原创 ES6找到数组下标

虽然代码简介，但是只能查找第一个，有的地方就是需要第一个就够了，如果有重复的话，就可以采用第一种方法。很多时候后端返回int类型而不是string类型需要下标。js写法就很鸡肋了。

2022-07-18 15:32:57 2905

原创 vue3 ref查找dom元素，解决ref无法获取dom元素的问题

2022-06-15 16:28:54 1414

原创 vue3高德地图

目前而言，对于高德地图 api 的使用看到过三种方式：引入 @amap/amap-jsapi-loader 引入 vue-amap 引入原生的高德地图 api 目前官方文档写的很烂网上教程更烂尤其是某dn 国内的教程环境现在非常差通过同事三人的研究终于弄出来了1. 安装依赖并引入pnpm install @amap/amap-jsapi-loader然后在 components 下创建 Amap 组件并且引入之import AMapLoader fr

2022-05-19 10:55:57 1166 1

原创 van-dialog 组件调用报错

vue3 vant 的dialog和别的插件不一样组件调用要引入组件才行只import根本不行文档上下都有详细说明上面这个是vue2的写法下面展示vue3语法糖

2022-05-10 10:34:52 2044

原创 Vue3的watchEffect

前言watchEffect，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。换句话说：watchEffect相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于watch，watchEffect的回调函数会被立即执行（即{ immediate: true }）watchEffect的副作用什么是副作用（side effect），简单的说副作用就是执行某种操作，如对外部可变数据或变量的修改，外部...

2022-05-05 11:05:44 2354

原创用for in或for of给js对象数组赋值

js对象数组赋值

2022-04-25 15:07:17 1461

原创 vue3 隔代传值事件

VUE3隔代传值MITT1.安装mittnpm install --save mitt2.utils文件夹下，新建一个bus.tseventbus.ts/ mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象// 这里我们在js中暴露这个事件总线对象import mitt from "mitt";const emitter = mitt()export default emitter3. 使用，使用mitt进行兄弟组件之间的通信实现或者子孙隔代组件都可

2022-04-21 11:22:41 1555

原创 Vue util工具

import { Message } from 'element-ui'import moment from './moment'import settings from '@/settings'// 请求urlconst baseURL = settings.baseUrl// 通用下载方法export function download(fileName) { window.location.href = baseURL + '/common/download?fileName='.

2022-04-14 10:48:28 340

原创 vscode 保存自动eslint格式化

网上太多垃圾教程本次来个高质量教程1.三大组件下载好2.vscode 文件==>首选项==>设置右上角选择 settings.json2.setting.json设置{ // tab 大小为2个空格 "editor.tabSize": 2, // // 保存时格式化 "editor.formatOnSave": true, // // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, /

2022-03-30 23:02:11 525

原创 vue3点击当前动态增加class,其他同级不变

1.在v-for下点击当前元素动态变化,其他同级元素不变vue2代码html <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{{guigeName}}</p> <p class="guig.

2022-03-04 15:41:04 5395

原创判断时间间隔算法

const array = ref(true)const onConfirm = (values:any) => { const [start, end] = values // 获取选择的时间 const start_time = dayjs(start).format(FORMATTER_DATE) const end_time = dayjs(end).format(FORMATTER_DATE) console.log('values1', start_time) .

2022-02-24 15:54:59 249

原创元素隐藏五种方法

CSS隐藏元素五种方法_wsq0的博客-CSDN博客_隐藏元素

2022-02-17 11:20:57 180

原创【无标题】js三目运算

1、什么是三目运算：(布尔表达式 ? 值0:值1;)5>3?alert('5大'):alert('3大');即 if(5>3){alert('5大')}else{alert('3大')};注意：三目运算和if(){}else{}的区别是三目运算有返回值例如：var max = a>b?a:b;2、多条件的三目运算怎么写：实例：根据学生成绩判定ABCD四个等级var result = (sc<0 || sc>100) ?("分数无效"):...

2022-02-16 15:11:33 338

原创 ES6里的rest参数...

...user为存一个对象 rest函数专门是为对象准备的

2022-02-10 15:17:27 520

原创 Vue3.2的setup语法糖

1、基本使用在vue3.2中我们不再需要进行return，当使用<script setup>的时候，任何在<script setup>声明的顶层的绑定 (包括声明的变量，函数声明，以及 import 引入的内容) 都可以在模板中直接使用，这是因为在setup函数中，所有的ES模板都被认为是暴露給上下文的值，并包含在setup()返回对象中。这里面的代码会被编译成组件setup()函数的内容，这也就意味着与普通的<script>只在组...

2022-02-10 11:11:07 681

原创 Vue3 setup语法糖使用深入版

1.组件1.1组件引用组件在props里直接引入就可在template里直接使用，无需再进行注册。<template> <div class="box">  <v-child></v-child> </div></template><script setup>// 引入后无需注册import vChild from '../compone...

2022-02-10 10:32:13 772

原创【无标题】Vue3 setup语法糖使用基础版

1. 新生命周期(setup) （1）使用生命周期必须在vue实例中引用，销毁实例变为onUnmounted，与vue2的destroy作用一致 <script setup> import {onMounted,onUnmounted} from 'vue'//所有的生命周期用法均为回调函数onMounted(()=>{ console.log('我创建了'); })// 销毁实例变为onUnmounted，与vue2的destroy作用...

2022-02-10 10:26:49 713

原创 vue3 dayjs用法

安装dayjsnpm install dayjs --save导入js如果是全局导入也可以页面单独导入在main.jsimport dayjs from "dayjs"Vue.prototype.dayjs = dayjs;//可以全局使用dayjs //date 为非格式化的时间数据dayjs(date).format('YYYY-MM-DD hh:mm:ss') ...

2022-01-26 11:20:48 3509 7

原创 vue3的setup script,ref,reactive通俗理解

1.ref实际上就是用来定义简单类型的可以是int string 或者数组等所有类型const name=ref("111")就能用很方便<script setup>import {ref,reactive} from 'vue'const name=ref(1)//数组const arr=ref([])</script>2reactive的定义也很简单<script setup>import {ref,reactive}

2022-01-19 13:31:48 808

原创 vue中export和export default的使用

五、vue中export和export default的使用 - 十色 - 博客园一、 <script> export default { name: 'HelloWorld' } $(function () { alert('引入成功'https://www.cnblogs.com/fger/p/11994968.html

2022-01-19 09:19:59 582

原创箭头函数()=＞

ES6---箭头函数()=>{} 与function的区别_刘欢的博客-CSDN博客_()=>{}

2022-01-19 08:58:15 448

原创 Yarn 安装与使用详细介绍

参考Yarn 安装与使用详细介绍_NeverYu-CSDN博客_如何使用yarn

2022-01-18 14:27:41 248

原创搭建Vue3+vite项目

首先进入项目路径npm init viteok to proceed ==>yproject name==>项目名select==>vue下一步进入工作路径cd XXXnpm i 安装node_modules

2022-01-18 13:31:18 169

原创 node.js 安装详细步骤教程

node.js 安装详细步骤教程_老油条-CSDN博客_node安装本机环境：Windows 10 专业版 x641、下载安装包Node.js 官方网站下载：https://nodejs.org/en/选择操作系统对应的包：下载完成，安装包如下：2、安装打开安装，傻瓜式下一步即可：选择安装位置，我这里装在D盘下：安装成功，文件夹结构...https://blog.csdn.net/antma/article/details/86104068...

2022-01-17 16:49:35 207

原创 nodejs的版本管理工具（nvm)

参考nodejs的版本管理工具（nvm) - 杵臼 - 博客园1.nvm是什么? nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。为了解决node各种版本存在不兼容现象,nvm是让你在同一台机器上安装和https://www.cnblogs.com/antao/p/12543533.html...

2022-01-17 16:30:29 262

原创移动端适配的js代码

移动端适配代码;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale =

2022-01-17 12:32:38 1495

原创 Vue-cli 安装vant插件

vant 官网https://vant-contrib.gitee.io/https://vant-contrib.gitee.io/第一步项目目录下 cmdcnpm i vant -S 安装vant第二步向babelrc插件中引入vantcnpm i babel-plugin-import -D第三步,在babelrc插件引入vant配置"plugins": [ "transform-vue-jsx", "transform-runtime", ["..

2022-01-17 12:23:49 513

原创 vue Nodejs Cli 脚手架创建项目

第一步项目命令创建vue init webpack 项目名Project name XXXX 项目名（非驼峰命名可以用_分隔） Project description 描述 Author 作者 install vue-router 一定要装 ESLint code 标准代码检测可以No set up test 测试 No e2e 测试 No ...

2021-12-27 14:43:58 324

原创 nodejs安装cnpm淘宝镜像

通过npm安装cnpm，同时将镜像源设置为国内镜像1．命令npm install -g cnpm --registry=https://registry.npm.taobao.org或npm i -g cnpm --registry=https://registry.npm.taobao.org检查cnpm安装是否成功1．命令cnpm -v有东西出来就表示成功了...

2021-12-24 12:47:12 975

原创 vue的新增与删除

<template> <div> <ul v-for="(item , index) in list" :key="index"> <li> {{item.serial}}--- <button @click="remove(index)">删除</button> </li> </ul> <input type="text.

2020-09-01 15:16:09 784

原创 vant底部导航点击两次才能更换样式的问题

最近项目中遇到的底部导航栏在组件必须点两下才可以更换样式的问题，贴出来分享一下。项目使用vantui的底部导航建一个footer.vue<template> <van-tabbar v-model="active" active-color="#07c160" inactive-color="#999"> <van-tabbar-item to="/"> <span>首页</span> <i.

2020-08-27 09:16:31 2877 1

原创 vue异步函数

let _this=this;onSuccess:function(result){//这里没办法用this._this.可以}

2020-08-21 18:13:09 601

原创 vue安装 axios

cnpm install axiosnpm install axios --save-dev如果想看自己是否下载成功打开你的package.json 看看有没有axios的版本信息2.main.js中导入　　import axios from 'axios'; /* 引入axios进行地址访问*/　　Vue.prototype.$http = axios;<script> export default { name: "page1", ...

2020-08-14 09:30:13 167

原创 MyBatis-Plus的BaseMapper与IService

熟悉 mybatis-plus 的人都知道，mybatis-plus 提供两种包含预定义增删改查操作的接口：com.baomidou.mybatisplus.core.mapper.BaseMapper com.baomidou.mybatisplus.extension.service.IServiceMybatis-plus提供了2个接口1个类：BaseMapper 针对dao层的方法封装 CRUD IService<M,T> 针对业务逻辑层的封装需要指定Dao层类和对应的实

2020-08-13 16:43:22 8018 2

原创 MyBatisPlus IService详解

IService的使用方法需要配置MyBatisPlus才能使用public interface UserService2 extends IService<User> {}@Servicepublic class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService2 {}@RestControllerpublic class UserController .

2020-08-13 16:39:45 10541