![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Winson℡
The important thing in life is to have a great aim,and
determination to attain it.
展开
-
vue3x相比Vue2x的改动
vue3.x,中支持定义多个根节点,省略了包裹容器<template> <h1>vue3</h1> <h2>vue3</h2></template>vue3x生命周期钩子:1.2 vue3x:setup() 替代了Vue2x中的beforeCreate和created生命周期函数,成为程序的入口//挂载1.3 vue3x: beforeMount => onBeforeMount1.4 vue3x: mou.原创 2024-04-28 19:47:04 · 420 阅读 · 0 评论 -
vue3与vue2的对比
在这个例子中,v-for 和 v-if 的顺序是固定的,所以 v-if 先于 v-for 执行,v-for 内部的每个循环项都会经过 v-if 的判断。实际上,在 Vue 3.0 的语法中,v-if 和 v-for 的优先级是没有差别的,也不存在 v-if 优先级高于 v-for 的说法。它们的优先级取决于它们的顺序,如果 v-if 在 v-for 之前,则 v-if 先于 v-for 执行,反之则相反。5.更好的移动端支持:Vue 3.0 提供了更好的移动端支持,支持较多的触摸交互和动画效果。原创 2023-02-11 14:22:07 · 5798 阅读 · 2 评论 -
uniAPP-web2App 侧滑 | h5打包后的app侧滑解决方案及使用方法
使用方法:对于vue项目来说,只需要将其放在public->index.html的body标签下面。转载 2022-10-13 15:00:36 · 1460 阅读 · 0 评论 -
uni ios视频黑屏、无声音或无法播放
uni打包小程序,安卓视频正常,ios部分视频会黑屏,可以试以下。禁用微信自带的视频缓存后启用系统自身的意思。原创 2022-10-08 17:11:15 · 3009 阅读 · 0 评论 -
javaScript原生事件总结笔记--按对象属性对数组进行分组
【代码】javaScript原生事件总结笔记--按对象属性对数组进行分组。原创 2022-09-27 16:51:20 · 339 阅读 · 0 评论 -
vue外层div上有点击事件,内层div也有点击事件,想要实现点 内层div,不触发外层点击事件(综合一下记录)
综合笔记,感谢原作者原创 2022-06-15 11:01:34 · 4746 阅读 · 0 评论 -
vue3 提取图片颜色-前端方案
目前提取图片颜色比较常用的主题色提取算法有:最小差值法、中位切分法、八叉树算法、聚类、色彩建模法等,在这里我选择了中位切分法进行实现。转载 2022-06-09 17:25:09 · 2736 阅读 · 0 评论 -
vue插件化之.extend基础应用
1.extend是什么?首先看文档就能知道它是一个基于Vue构造函数的‘子类’,Vue是一个构造函数,而extend创造出来的也是一个构造函数,只不过.extend是Vue的子构造函数,也就是说.extend继承Vue上的东西,其次.extend是Vue2中的东西,Vue3移除掉了。那它具体是什么?应用于哪些方面呢?请看案例:实现的是一个MessageBox组件==》归属于MyUI组件库。//构造器:var Contructor = Vue.extend({ name: '', component原创 2022-04-04 21:01:10 · 1269 阅读 · 0 评论 -
vue el-table 表头搜索(筛选)功能 头部添加搜索icon 点击显示popover 阻止在字段排序
使用elemen的render-header在funcion中 用createElement 创建虚拟DOM。首先创建SelectHeader.vue组件由于element内置icon的search长这样我找了个合适的需要注意的使用的element内置的排序sortable 那么在点击整个表格头部区域时 都会触发排序故在点击搜索icon的时候也会排序,影响体验,需要阻止这个排序用@click.stop=“popClick” 来阻止默认的排序<template> <e原创 2021-08-18 14:57:51 · 3846 阅读 · 2 评论 -
性能优化之函数节流/防抖
优化性能技巧:问题场景:当前实现一个搜索功能,需要输入文本就会触发函数调用搜索接口,亦或是用户可能双击搜索按钮等场景,当你未输入完关键字时,或者用户多次重复点击,就会浪费性能一次又一次的去请求接口.解决的问题:防止某时间段内发送多次重复请求解决方案:函数节流(也可使用函数防抖)封装一个util.js工具类函数,如下/** * 函数节流 * @param {*} fn 事件函数 * @param {*} delay 设置一段时间内只触发一次 */function throttle(f原创 2021-08-02 11:57:57 · 169 阅读 · 0 评论 -
客户端本地测试集成打包
1.npm run lib 是插件打包,npm run build是文件打包,所以打包走的是npm run lib,打包完成之后通过(npm publish)命令发布到vnpm上,前提是指定的发包路径是–registry=http://registry.vnpm.vipkid.com.cn本地测试打包:npm run lib然后npm pack,这就会在本地生成一个包,然后拷在项目中npm i 包名,就会本地安装项目中2.publish包的话你们没权限,就先给你说这个流程本地测试打包:npm run原创 2021-07-16 15:57:29 · 448 阅读 · 0 评论 -
Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: “小明”, age: “18”, }vue中watch监听name的方法1. 可以结合计算属性的方法实现{ ...... watch: { nm () { console.log(this.nm) } }, computed: { nm () { return this.userinfo.name } } ...... }2. 可以通过配置 deep 为true实现//原创 2021-01-05 15:28:25 · 379 阅读 · 0 评论 -
js 享元模式
享元模式享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能。这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式。享元模式尝试重用现有的同类对象,如果未找到匹配的对象,则创建新对象。代码:$.extend({a: 1}, {b: 2}) // {a: 1, b: 2}$.extend = function(){ //代码的复用和简洁角度 //享元模式-》提取一个享元 if(arguments原创 2021-07-16 15:27:05 · 169 阅读 · 0 评论 -
vue+ elment UI全局配置加载中状态
项目中多处会使用到一些共用的状态样式,这里简单写一个全局暴露的loading。首先在项目共用文件夹common下定义一个loading.js文件:// loading.jsimport { Loading } from 'element-ui';let loadingCount = 0;let loading;const startLoading = () => { loading = Loading.service({ lock: false, text: '加载原创 2021-06-30 10:23:06 · 583 阅读 · 0 评论 -
表单校验使用forEach提交表单时如何终止循环,解决element消息提示重叠
1.使用try{ //forEach循环体 }catch(error){},循环体中使用throw new Error('end') // 终止循环如下:try { this.list.forEach(item => { ..... throw new Error('end') }) } catch(err) { console.log('err',err) }// 实例 confirm() { try { this.quest原创 2021-06-24 14:06:33 · 483 阅读 · 0 评论 -
修改vue项目中 elementUI input边框样式
需要去掉input边框。直接在含有 scoped属性的style中修改,是不起作用的。在一个不含scoped属性中解决方案一:在开发过程中遇到需要去掉 el-input的边框,使其满足ui要求,element-ui官网的el-input的样子如下:但是我需要的是下面这种没有边框的效果:不可行做法例如这样一段代码来设置<div class="inputDemo"> <el-input></el-input></div>通过实践,b原创 2021-05-25 11:33:33 · 10806 阅读 · 5 评论 -
解决后加载页面赋值不渲染问题
1.问题原因:当前页面刷新,会关闭主页面,之后当前页面跳转到主页面并且赋值给主页面进行渲染,因为跳转过程中,赋值与页面加载同时进行,页面回流和重绘较多,可能造成资源阻塞,没有及时渲染或未渲染页面。2.解决办法之一:放入延时函数中赋值//兄弟组件import { event } from "./common/util"; setTimeout(() => { event.$emit('getCheckBoxFlag', true); //详情页刷新时查询页面会关闭,放入延迟加原创 2021-05-07 11:33:25 · 800 阅读 · 0 评论 -
Vuex-状态管理模式(实战详解)
一篇优质博文:推荐:vuex-状态管理转载 2021-03-29 11:43:39 · 199 阅读 · 0 评论 -
打包代码上传之脚本未编译(部署后页面(以及代码)未更新)
愉快的一天一般从遇到问题时结束。问题描述:在更新本地代码提交后-git push,需要部署到测试环境测试,在代码部署完后发现了新的问题----修改后的页面未更新,于是我打开代码仓库,发现代码已经提交,并且已有提交记录,在重新部署代码无果后,果断摇人 找人。人说:“你脚本里定义的编译过程有问题”。我的原脚本配置文件://重点关注这agile.js:#################### 线上环境编译###################build: # 配置node服务环境 env:原创 2021-03-23 11:46:23 · 308 阅读 · 0 评论 -
笔记:vue点击按钮页面下滑的方法
//注释可以删掉// 切换时下滑动作 clickQuotation() { if (this.heightFlag) return // const orangeHeight = window.pageYOffset // let i = 0 this.heightFlag = true this.interval = setInterval(() => { // const next = Math.floor(th原创 2021-01-11 13:29:12 · 1379 阅读 · 0 评论 -
属性或方法“getCoditions”不是在实例上定义的,而是在渲染期间引用的。
1.可能是变量存在相同的名称2.可能是vue组件中有两个methods: {}Property or method "getCoditions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing t原创 2020-07-27 11:34:37 · 2213 阅读 · 0 评论 -
前端模拟API请求返回的数据结构
在浏览器中编辑数据(对象)结构如: { name: '天平新分', NEW_BALANCE:[] }原创 2020-07-23 17:42:39 · 486 阅读 · 0 评论 -
vue 灵活正则截取赋值
var obtain = this.templateContent let arr = obtain.match(/{(.*?)}/g) if (this.isEdit) { let strArr = this.dynamicParam.split(',') if (arr == null) { this.plaLists = []原创 2020-07-21 19:45:36 · 452 阅读 · 0 评论 -
vue 判断循环获取的数组中的某一项的值是否为空
一个循环后的下拉框的数组plaLists<el-form-item v-for="(items,index) in plaLists" :key="index" :label="items.label"> = <el-select v-model="items.value" placeholder="请选择" @change="getModel(index,items.value)"> <el-option v-for="item in dncList"原创 2020-07-21 19:16:05 · 5915 阅读 · 0 评论 -
rules规则(包含回调函数规则)配置
这里总结了几个常用的规则,方便下次使用必填,必选,邮箱,手机号,时间,数字,数组,字符长度,以邮箱为例子与手机号为例//这是一个邮箱的验证规则rules: { email: [{ required: true,//是否必填 message: '请输入邮箱地址',//错误提示信息 trigger: 'blur'//检验方式(blur为鼠标点击其他地方,) }, { t原创 2020-07-14 11:58:09 · 2385 阅读 · 0 评论 -
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名
1.在vue项目根目录下新建vue.config.js(不是在src下面)vue.config.js配置文件:module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: tr...原创 2020-04-29 00:26:41 · 34408 阅读 · 3 评论 -
使用vue init webpack 项目名去构建项目步骤(vue-cli 可视化操作)
1安装npm npm全称为Node Package Manager, 是一个基于Node . js的包管理器,也是整个Node. js社区最流行、支持的第三方模块最多的包管理器。npm -V 2由于网络原因安装cnpm npm install -g cnpm --registry=https://registry .npm. taobao. org 3安装vue-cli ...原创 2019-11-26 11:35:37 · 375 阅读 · 0 评论 -
解决vue不是内部或外部命令
先说一下,我采用了热心网友的哪些做法:1. 试图全局配置 vue 的环境变量,找到 vue.cmd 的路径,然后进行配置。问题:在文件搜索中,没有找到 vue.cmd,失败。在 C:\Users\ada\AppData\Roaming\npm 文件夹里,有很多 .cmd 的文件,但是没有 vue.cmd 文件,猜测可能是下载出了问题。此处网友提供了一个 Everything 的搜索软件,查...转载 2019-11-26 10:41:24 · 518 阅读 · 0 评论