xiasohuai的博客

【代码】vue3浏览器报错解决Uncaught runtime errors。

在我们的JavaScript中，可以给元素添加一个点击监听事件，当用户点击的时候，点击事件怎会被执行，这也是一种事件总线的思想在里面，就好比元素订阅了点击事件，用户发布或出触发点击事件。所谓事件总线模式，其实就和发布订阅模式非常类似，比如我们订阅了一个公众号，公众号发布文章之后我们就能收到信息，这就是一种订阅发布的关系。再比如在Vue2项目中，我们可以使用$on、$emit来实现事件的监听和触发，这其实就是一种事件总线的思想在里面，只不过Vue帮我们实现好了。使用$emit发布事件。实现$off取消订阅。

Pinia.js 是新一代的状态管理器

中父子组件传值及方法调用 defineProps，defineEmits，defineExpose

antd vue Cascader多选设置suffixIcon无效

antd Table组件selectedRows翻页未保留上一页已选中数据

antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据

vue get方式文件流下载

vue实现可拖拽div。

腾讯地图初始化以及解析和逆解析

利用vite 和 vue-cli 创建vue3的项目

企业微信 第三方应用扫码登录参考文档：接入指引 - 接口文档 - 企业微信开发者中心首先在login页面，写一个按钮，触发点击事件,引导用户进入登录授权页：<button @click="toWxLogin">企业微信扫码登录</button>toWxLogin(){ //授权登录之后目的跳转网址，需要做urlencode处理。所在域名需要与授权完成回调域名一致 let url = 'http://....' //服务商的Cor

安装npm install uview-ui配置1. 引入uView主JS库在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。// main.jsimport uView from "uview-ui";Vue.use(uView);2. 在引入uView的全局SCSS主题文件在项目根目录的uni.scss中引入此文件。/* uni.scss */@import 'uview-ui/theme.scss';

添加实例 property你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：new Vue({ beforeCreate: function () { console.log(this.$appName) }})则控制..

src/components/toast/index.vue<template> <div v-if="showWrap">{{text}}</div></template><!--前端样式忽略-->src/components/toast/index.jsimport vue from 'vue'//静态组件import toastComponent from './index.vue'// 返回一个扩展实力构造

一、路由懒加载（必须的）️vue-cli 3.0 模式就使用了Babel，我们需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。// 安装插件 syntax-dynamic-importcnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.jsmodule.exports = { "presets": [ "@vue/app" ..

直接使用插件解决这个问题！第一步：先下载这个插件第二步：修改vue.config.js配置文件const CompressionPlugin = require("compression-webpack-plugin")............plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|less)$/, // 匹配文件名th...

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间.一、加载慢的原因在页面渲染的过程，导致加载速度慢的因素可能如下： 网络延时问题 资源文件体积是否过大 资源是否重复发送请求去加载了 加载脚本的时候，渲染内容堵塞了 二、解决方案常见的几种SPA首屏优化方式：减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩1.减小入口文件体积常用的手段是路由懒加载，把

<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"></div>import echarts from 'echarts'import '../../../static/js/china.js' // 引入中国地图数据import {provinceJson,cityArr} from './mapjson.js'//相关省市jsonexport default {...

效果图：1.html文件引入百度api,ak是自己申请的密钥 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxxxxxxxxxxxxx"></script>2.vue代码： <div id="mapEchars" style="width: 100%;height:440px;background:#0b0519;">&l..

1.首先要判断浏览器类型（是否IE），来控制是否展示功能，在计算属性中判断：computed: { showFullScreenBtn () { return window.navigator.userAgent.indexOf('MSIE') < 0; }},2.vue代码：<i v-if="showFullScreenBtn" :class="isFullScreen?'el-icon-crop':'el-icon-full-screen'" cla.

上传图片尺寸大小限制，UI组件库为例iview中<Upload ref="upload" :max-size="10240" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :on-success="successUpload" :on-error="failureUpload" :show-uplo

原配置： location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; }使用try_files解决：location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; try_files $uri $uri/ /index.html;}...

环境：Linux :centos上安装jenkins及配置1.首先要安装jdk，此处略2.安装Jenkins//1.导入镜像：wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo//2.导入公钥rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key //3.安装yum install jenkins.

vue-cli2.01.配置webpack.prod.conf.js 配置output加t=[chunkhash:8]相当于加时间戳，用于清缓存output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'), chunkFilename: utils.assetsPath('js/[id].[chunkhas..

一般来说vue单页面应用的title在index.html中设置，但是一旦设置就是唯一了，对此有了以下需求：需要实现不同的页面对应不同的title。我们可以用router.beforeEach 来实现router.js{ path: '/personal', component: () => import('../view/home.vue'), ...

import Vue from 'vue';Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) }}); //在点击页面提交按钮的时候，把滚动条滚到底部就OK了...

解决方案在vue.config.js中module.export = {}中加入一行productionSourceMap: false,这样虽然对带宽很友好，但是调试起来就不是那么轻松了。我们在代码出错的时候，肯定最希望能定位其在源码中的位置。所以个人感觉还是有必要保留的。...

参数：target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据(可以是字符串和数字)value ：重新赋的值用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。例：data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, ...

    Vue.delete( target, key ) data : { namelist : { id : 1, name : '叶落森' } }// 删除namedelete this.namelist.name;//js方法Vue.delete(this.namelist,'name');//...

定义的指令不支持驼峰式写法，所以指令命名统一变为小写,或者用用'-'或'_'分割要使用自定义的指令，需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式&lt;div id="app"&gt; &lt;div v-yeluosen="changeColor"&gt;{{num}}&lt;/div&gt; &lt;button @click="a...

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：&lt;!-- 在双花括号中 --&gt;{{ message | yeluosen }}&lt;!-- 在 `v-bind` 中 --&gt;&lt;div...

 base64加密1.安装npm install --save js-base642.引用let Base64 = require('js-base64').Base64;3.使用Base64.encode('yeluosen');  // 加密后   eWVsdW9zZW4=Base64.encode('叶落森');    // 加密后    5Y+26JC95qOuBase64.decode(...

父组件向子组件传值注：这种方式只能由父向子传递，子组件不能更新父组件内的data先定义一个子组件，在组件中注册props&lt;template&gt; &lt;div&gt; &lt;div&gt;{{message}}&lt;/div&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt; export def

兄弟组件通信通过bus，新建一个bus.js文件，并在两个组件分别引入 注：当在a.vue组件上触发点击事件时，就会触发bus上监听的事件，而bus事件监听在b.vue里面，这个时候就会触发b.vue上的事件监听，而通过回调函数，就可以拿到a.vue组件传过来的数据，从而实现兄弟组件通信。 bus.jsimport Vue from "vue" export defa...

1. 安装vue-clipboardnpm install --save vue-clipboard22.main.js引入import VueClipboards from 'vue-clipboards2'Vue.use(VueClipboards);3.案例&lt;template&gt; &lt;div class="yeluosen"&gt; &lt;input type=...

我的另一篇博客，详细介绍了，路由的基本原理https://blog.youkuaiyun.com/xiasohuai/article/details/81982821vue-router分为4种方式1.动态路由      2.嵌套路由     3.编程式路由       4.命名路由和命名视图  简单的静态路由demo步骤：1.安装vue-routernpm install vue...

&lt;Table border :columns="fieldColumns" :data="fieldData2" height='500'&gt;&lt;/Table&gt;&lt;!--表格自己写，这里暂时用iview的表格模拟一下--&gt; &lt;!--分页--&gt; &lt;div class="result-foot"&g

1.为什么要用懒加载？在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时2.如何与webpack配合实现组件懒加载（1）在webpack配置文件中的output路径配置chunkFilenam...

详情请参考，vue-lazyload官网api1.安装插件npm install vue-lazyload --save-dev2.在main.js中引入并使用import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)或者Vue.use(VueLazyload, {preLoad: 1, //预加载高度的比例error: 'htt...