vue
赵啸林
昨日已成历史,明天是个谜团,但今天是天赐的礼物。
展开
-
前端代码优化方法
14.合理使用页面缓存(vue如:keep-alive等),页面数据本地缓存(localStorage,sessionStorage等),减少http请求次数(但是要注意数据更新)23.第三方资源不可控会影响页面的加载和显示,要异步加载第三方资源(js:async 和 defer,css:import 和 link)13.原生写的页面要注意页面的执行顺序(跟据你具体的需求布置加载顺序=>css/html/js)6.减少css表达式,表达式只是让你的代码显得更加酷炫,但是对性能的浪费可能超乎你想象。原创 2023-02-27 15:33:12 · 4798 阅读 · 0 评论 -
vue项目在谷歌浏览器中莫名被更改了内容和出现font标签
先说明原因:被浏览器 翻译 了。谷歌浏览器一直是默认翻译成中文的设置,而我的默认声明为英文,lang="en"会被翻译。所以当浏览器选择翻译时,就会出现上面的情况。解决办法:将index.html文件的html标签的语言类型声明为中文...转载 2022-03-01 16:44:07 · 361 阅读 · 0 评论 -
富文本框vue 自定义图片上传
<ueditor ref="by_know" :config="{ initialFrameWidth: null, initialFrameHeight: 350, }" :defaultMsg="form.info" :ueditorChange="agreenInfoChange"></ueditor>>agreenInfoChange(msg) { this.form.原创 2022-01-06 20:27:45 · 866 阅读 · 0 评论 -
vue element ui树形控件
defaultProps: { children: "children", label: "name"}, //格式绑定 memberlist: [], //列表 permissionIds: [], // 半勾选+全勾选 checkPermissionIds: [], //全勾选<el-tree ref="tree" :data="memberlist" :default-checked-keys="checkP.原创 2021-11-05 16:20:46 · 516 阅读 · 0 评论 -
VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能
实现效果实现//先是两个功能按钮<el-button type="primary" @click="toggleRowExpansion(true)" icon="el-icon-arrow-down" size="mini">全部展开</el-button><el-button type="primary" @click="toggleRowExpansion(false)" icon="el-icon-arrow-up" size="mini">全部收回转载 2021-10-27 16:27:30 · 1391 阅读 · 0 评论 -
Vue CLI 开启gzip压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件:npm i -D compression-webpack-plugin//seo模块开始const PrerenderSPAPlugin = require('prerender-spa-plugin')const Re原创 2021-09-13 15:50:53 · 729 阅读 · 0 评论 -
vue-canvas生成海报图
此图为生成的海报图。git链接:https://github.com/sunniejs/vue_canvas_poster1、通过cnpm安装cnpm i vue-canvas-poster --save2、全局注册-在main.js中引用/*canvas*/import CanvasPoster from 'vue-canvas-poster' Vue.use(CanvasPoster)3、html<div class="content_container"> .转载 2021-09-04 10:14:50 · 921 阅读 · 0 评论 -
使用swiper4轮播插件
https://www.swiper.com.cn/download/index.htmlnpm install swiper<template> <div class="index"> <div class="swiper-container schools"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, inde原创 2021-07-31 08:17:17 · 472 阅读 · 0 评论 -
H5拨打电话
一.原生html文件项目<p>联系电话:<a :href="'tel:' + item.phone" rel="external nofollow" >{{item.phone}}</a></p>二.vue项目1.在vue项目的index.html中添加如下代码:<meta name="format-detection" content="telephone=yes" />2.在需要调起手机拨号功能的页面,写如下函数: <di转载 2021-07-29 11:59:14 · 1184 阅读 · 0 评论 -
element ui 输入框和Select选择器样式修改
1.输入框样式::v-deep .el-input__inner { border: 0; font-size: 24px; font-weight: 400; border-radius: 8px; width: 300px; background-color: #f0f0f0; height: 60px;}2.Select选择器的icon::v-deep .el-icon-arrow-up::before { font-size: 30px;}3.Sele原创 2021-07-27 14:11:43 · 1401 阅读 · 0 评论 -
2 problems (2 errors, 0 warnings) 2 errors and 0 warnings potentially fixable with the `--fix` opt
创建vue项目初始化完成之后 在终端运行 npm run serve出现一个错误,如下图:解决的方法是:① 项目的代码中找到.eslintrc.js 文件夹将extends中的’@vue/standard’注释掉 extends: [ 'plugin:vue/essential', // '@vue/standard' ],②在rules中添加’space-before-function-paren’: 0rules: { 'no-console': proce转载 2021-07-24 16:44:43 · 1551 阅读 · 0 评论 -
使用element-ui组件el-table时需要修改某一行或列的样式
https://www.cnblogs.com/belongs-to-qinghua/p/11672605.html如下图必须在公共样式中转载 2021-07-23 14:05:49 · 541 阅读 · 0 评论 -
vue 中冗余导航错误
main.jsimport VueRouter from "vue-router";Vue.use(VueRouter);const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}如果是点击跳转时候冗余了,可以在点击跳转的方法后.转载 2021-07-15 15:45:27 · 279 阅读 · 0 评论 -
vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;安装使用:npm install vue-count-to例子:<template> <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo&g转载 2021-06-19 00:13:33 · 369 阅读 · 0 评论 -
vue使用scrollReveal滚动插件
1.npm安装scrollRevealnpm install scrollreveal2.引入到组件中import scrollReveal from ‘scrollreveal’;3.在data中注册data() { return { scrollReveal: scrollReveal(), //页面滚动动画 } }4.项目中使用<div class="reveal-bottom">demo</div> this.scro原创 2021-06-19 00:06:58 · 1348 阅读 · 0 评论 -
Vue.js 中的 v-cloak 指令
https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app转载 2021-06-18 09:44:19 · 402 阅读 · 0 评论 -
vue 复制文本到浏览器
<button @click="copy">复制链接</button> copy() { let url = this.input;//是所需要复制的内容 let oInput = document.createElement('input') oInput.value = url document.body.appendChild(oInput) ...转载 2021-06-14 23:23:43 · 162 阅读 · 0 评论 -
vue和微信小程序的区别、比较
https://segmentfault.com/a/1190000015684864转载 2021-03-31 10:55:50 · 169 阅读 · 0 评论 -
vue 路由懒加载
vue路由懒加载resolve方式与import方式路由懒加载使用路由懒加载是为了 更好的用户体验,首屏组件加载的速度快一点,解决了白屏的问题懒加载就是延迟加载或者屎按需加载,在需要的时候进行加载常用的懒加载有两种,vue异步组件和es的import未使用懒加载的时候vue中的路由代码://每一个组件都会被加载进来 ,打开首页的时候全部都会加载import Vue from "vue"import Router from "vue-router"import HelloWorld from转载 2021-03-16 16:44:01 · 96 阅读 · 0 评论 -
vue用命令批量解决ESLint警告
转载于 https://www.pianshen.com/article/78541223088/在vue里使用了eslint之后,代码不规范就会报很多警告的错误,也会提示红色下划线,一个一个的改,工作量太大,这样就很让人头疼,下面讲一下怎么批量去解决这些由于eslint代码不规范引起的错误警告步骤如下:1、打开package.json,在script里找到在这里插入图片描述lint修改为:(中间插入–fix) “lint”: “eslint --fix --ext .js,.vue src t转载 2021-01-14 11:54:33 · 644 阅读 · 0 评论 -
filters过滤器转化时间和省略小数点
{{user.signing_time | formatDate('-')}} 例:2020-1-12 14:00:00{{item.plan_purchase_number | ppnumber()}} 例:1000filters: { // 时间戳处理 formatDate(value, spe = '/') { value = value * 1000 let data = new Date(value); let year = data.getFullYea原创 2021-01-12 14:10:10 · 141 阅读 · 0 评论 -
修改vuex里请求的数据长度total
vuex模块里 state: { activityGoodsLists: [], //活动商品列表 goodsListTotal: 0, //活动商品条数 }, mutations: { //总长度-1 del_item(state) { --state.goodsListTotal }, }, actions: { //总长度-1 del_item({ commit }) {原创 2020-12-30 15:43:24 · 384 阅读 · 0 评论 -
Vue插件之导出EXCEl
https://www.cnblogs.com/yy136/p/10015561.html转载 2020-12-18 12:31:55 · 1423 阅读 · 0 评论 -
h5移动端适配(px->vw/vh)
vw适配1.browserslistrc文件删除 not dead2. 安装依赖cnpm i -S postcss-px-to-viewport3.根目录下创建postcss.config.js 文件配置如下:module.exports = { "plugins": { "postcss-px-to-viewport": { "unitToConvert": "px", "viewportWidth": 375,原创 2020-12-05 22:54:57 · 795 阅读 · 0 评论 -
深拷贝(递归)
function clone(obj){ if(typeof obj==="Object"&&typeof obj!=="null"){ var type =Object.protype.toString.call(obj).slice(8,-1)==="Array"?[]:{} for(let i in obj){ if(typeof obj==="Object"&&typeof obj!=="null"){ type[i]=clone(obj[原创 2020-12-01 22:20:54 · 265 阅读 · 0 评论 -
map.(parseInt)方法详解
https://www.cnblogs.com/guorange/p/7151265.html转载 2020-11-12 16:53:16 · 3134 阅读 · 0 评论 -
win10 VS Code打开终端不是cmd(powershell)解决方法
文件路径:打开菜单“文件”下的“首选项”的“设置”,如下图,然后点击下图的红色圈的:在settings.json文件下添加一下代码:"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"转发:https://blog.csdn.net/qq_42740797/article/details/107361834...转载 2020-10-22 18:27:07 · 1240 阅读 · 0 评论 -
provide和inject
父组件<script>import helloworld from "../components/HelloWorld"; provide() { return { msg: "provide数据", fns() { console.log(111); } }; }, </script>子组件 <div>{{ msg }}</div><!--父组件的msg-->原创 2020-10-15 10:57:08 · 125 阅读 · 0 评论 -
vue2 $listeners和$bus,$attrs
$listeners父传子和子改父$bus组件共享参数父组件里<helloworld @msg="msg" @send="send"></helloworld>import helloworld from "../components/HelloWorld"; //注册组件 components: { helloworld }, // 定义变量 data() { return { msg: "父组件的值", far原创 2020-10-11 14:26:03 · 233 阅读 · 0 评论 -
vue2 src下http文件里index.js配置
import axios from "axios";import nprogress from "nprogress";import { Message } from "element-ui";import router from "../router";//运行环境 :本地环境:devlment 和线上产环境:produtionconst isPro = process.env.NODE_ENV === "prodution";//创建一个axios实例const server = ax原创 2020-09-22 12:57:26 · 710 阅读 · 0 评论 -
vue 根路径配置vue.config.js
```javascript// vue的配置文件module.exports = { lintOnSave: false,//配置无效解决 devServer: { proxy: { "/api": { ws: false, // 只需要改动target 改成后端接口的根路径 // 我们把后端接口的根路径代理成立/api .原创 2020-09-22 12:48:44 · 1956 阅读 · 0 评论