小歪博客

VUE3_10 个最强大的动效组件库

VUE_UI组件的二次封装

VUE_自定义指令，全局指令注册

VUE_使用Vite构建vue项目。

UNI-APP_i18n国际化引入

【代码】VUE_使用el.animate实现自定义指令抖动效果。

VUE_TypeError: Cannot convert a BigInt value to a number at Math.pow 解决方法

【代码】JS_图片地址下载图片。

添加 屏蔽严格模式目录 src/*，这样src文件夹下所有文件都不需要遵守代码严格模式。在根目录中找到 .eslintignore 文件打开该文件，没有自己创建一个。文件中只添加一个*号，屏蔽所有的严格模式。

1、安装node-polyfill-webpack-plugin。在使用vue3开发是安装使用web3等工具，运行报错。2、vue.config.js中修改配置。

【代码】VUE_H5页面跳转第三方地图导航，兼容微信浏览器。

VUE_axios请求错误处理Uncaught runtime errors: XMLHttpRequest.handleError (webpack-internal:///./node_modul

VUE_vue2/3点击区域外触发方法，点击除某个元素触发监听

VUE_Nuxt启动只能通过localhost访问，ip访问不到:问题解决

VUE_自适应布局-postcss-pxtorem

uniapp 的history 把#去掉了，但是当刷新页面的时候出现404错误解决方案：需要服务端支持如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。

VUE_网页自定义右键菜单组件

【代码】VUE_插槽传递参数，作用域插槽。

在 Vue 2.x 中，你可以通过 $attrs 属性获取父组件传递给子组件的所有属性（除了 props 和 class / style）。同时，你也可以通过 $listeners 属性获取父组件传递给子组件的所有事件监听器。这个方法的缺点是，你需要手动过滤出那些不是属性或事件监听器的传递值。获取父组件传递的所有属性获取vue根实例获取vue父组件实例。

这是node.js 的版本问题，因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。故此以前的项目在使用 nodejs V17以上版本后会报错。

vue使用JSX

【代码】VUE_tab切换滑动效果。

由于项目需要旧版的 vue-cli ，所以需要事先卸载新版本；结果还是旧版本，使用 npm uninstall -g @vue/cli 依旧没有卸载掉；

比如我在 Hello.vue 组件中想发送数据到 Vue.vue 组件中。vm.$root.Event 来访问我们定义的事件发射器 Event。// 在组件 Vue 创建的钩子中监听事件。// 触发组件 Hello 中的事件。在 Vue.vue 组件中进行接收。// $emit(事件名，数据）// $on(事件名，数据）

相信很多人在用Vue使用别人的组件时，会用到 Vue.use()。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。6.总结：用 axios时，之所以不需要用 Vue.use(axios)，就能直接使用，是因为开发者在封装 axios 时，没有写 install 这一步。接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。

vue项目报错：net::ERR_CONNECTION_TIMED_OUT

代码】UNI-APP_防抖教程。

之前做了一个答题类的小程序，一个页面多道题需要判断是否全部选择了答案，但循环中return false不管用，还是会继续循环并执行下面代码，所以，要不用这种方法，抛出错误阻断执行，或者直接用for循环~...

官方文档

// 安装npm i vue-lazyload --save// 注册import VueLazyload from 'vue-lazyload' // 引入这个懒加载插件// Vue.use(VueLazyload) // 直接使用Vue.use(VueLazyload, { // 添加自定义选项 preLoad: 1.3, error: './assets/images/white.png', // 加载错误时候的图片 loading: './assets/images/whi

npm文档v-viewer是一个图片放大预览，他可以鼠标滚轮放大和缩小，也可以全屏，上一张下一张安装npm install v-viewer --savemain.js引入import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)如果你不想显示按钮和图片名称的话，你可以在main.jsVue.use(Viewer, { defaultOptions: { button

js实现全屏 <a-button type="primary" @click="screen">全屏</a-button>data() { return { fullscreen: false, };}, methods: { screen() { let element = document.documentElement; if (this.fullscreen) {

使用provice和inject结合的方法。此方法着实有效，不会有闪烁的空白出现。如下：首先在App.vue组件里声明这个方法，写法如下：<template> <div id="app"> <!-- 价格判断，让显示隐藏 --> <router-view v-if="IsRouterAlive" /> </div></template><style lang="scss"&

iview的menu组件垂直菜单有个自动展开属性open-names，可以指定一个数组，只要submenu子菜单组件的name属性的值在open-names数组之中，菜单组件渲染后，相应的子菜单就会被自动展开。<template> <Row> <Col span="8"> <Menu :theme="theme2" :open-names="['1','2','3']"> &lt

//完整url可以用window.location.href//路由路径可以用this.$route.path//路由路径参数this.$route.params

官方文档：https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命名的路由：const router = new VueRouter({ rout

@click="click" 单击@mousedown="down" 按下@mouseup="up" 抬起 @dblclick="dblclick" 双击@mousemove="move" 移动@mouseleave="out" 离开@mouseout ="out" 移出 @mouseenter="enter" 进入@mouseover="enter" 在...

UEditor是百度的一个javascript富文本编辑器，功能强大，常见的富文本编辑器中总有它的一席之地，今天我们就写一个简单的demo来学习如何在vue-cli中使用它，以及图片上传！第一步，先下载依赖npm i vue-ueditor-wrap -S第二步，引入到项目中import VueUeditorWrap from 'vue-ueditor-wrap'第三步，注册组件components: { VueUeditorWrap}第四步，在模板中使用组件<temp

this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来methods：{ testClick() { this.content = '改变了的值' let that = this this.$nextTick(() => { // dom元素更新后执行，因此这里能正确打印更改之后的值 console.log(that.$refs.tar.innerT

中文官方文档：https://www.nuxtjs.cn/安装//安装nuxt脚手架yarn add -D create-nuxt-app//创建一个名字为project的项目npx create-nuxt-app project<template> <h1>{{ title }}</h1></template><script> export default { data() { return {