浩星

目前我们在开发移动端h5项目，小程序项目能使用的功能是有很多的，比如vant移动端，vant小程序端，这里我们说一说uview 这个帮手。

众所周知，vue3突破了每一个vue文件中只能有一个根标签的限制，但是我们还有很多项目都是vue2的项目，如果让vue2中实现一个类似的效果呢，像react的16.2.0的版本之后，可以直接用,vue3中使用tsx也可以轻松使用，vue2要想实现这种效果，需要借助一个插件 vue-fragment。

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

项目中如果想本地开发使用px，但是界面上线以后界面是自适应的效果,可以有多种方式来实现效果。

分享下个人使用的一个好的js库，里面封装了大量的方法，比如数组根据对象某个属性去重，比如我们移动端中经常会有防抖节流的应用场景，拷贝对象的时候，修改他的值，老是影响源数据，等等系列的问题都可以有很便捷的方法来解决！

vue2中实现滚动数字时钟效果

尤雨溪解读 2022 Web 前端生态趋势

我们在使用上传方法的时候，是可以拿到文件的file文件的，里面有很多文件信息，比如size大小等信息，但是没有宽高这类的，那么我们上传图片经常会需要这些属性。

实现element的列表动态排序效果

vue报错sockjs-node/info?t=或者报错info?t=

vue项目axios请求控制请求头必须为https

前言： 对原生的table进行封装，让他满足我们一行显示不同个的需求。实现效果：如图所示，一行显示不同数量的内容实现代码：1、封装的组件：custom_table.vue，源码看下面（1）一行显示几个td(2)表头数据，表格数据（3）js封装核心方法2、调用方法：有form是为了必填的*效果，可根据实际情况增删<Form :model="orderDetail" label-position="left" :label-w......

前言：很多次搭建好项目之后，存放到git上面，然后别人拉去的时候，会报一些缺少配置的错。在这里整理下。1、vue3版本（1）本地创建项目，git提交代码，git拉下代码（如果要用创建的项目，把包删除）（2）打开package.json，在 devDependencies 添加"vue-loader-v16": "^16.0.0-beta.5.4","webpack": "^4.46.0"（3）安装包，检查效果cnpm i2、vue3+ts版本（1）本...

前言： 场景：我们点击修改弹框，想给修改的对象直接赋值，但是赋值之后，两个字段都变成监听字段了，跟随页面具体值的变化而变化，解决这个问题处理办法： ES6 let goods = {...}let curGoods = Object.assign({},goods); JSON转换 let goods = {...}let curGoods = JSON.parse(JSON.stringify(goods));...

实现前言： 这是一个基于element的聊天框插件，可扩展性还是很强的。JwChat：官网入口gitee地址：入口大佬图片与实现效果：实现步骤：1、安装：cnpm i jwchat -S2、配置使用：//element 必须import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);//聊天...

本文来自：公众号：前端大全官网git入口：点我前端程序员想必对尤雨溪及其开发的 Vue 框架不陌生。Vue 是一套用于构建用户界面的渐进式 JavaScript 框架，在 2014 年发布后获得了大量开发者的青睐，目前已更新至 3.0 版本。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。最近，尤雨溪发布了.

前言： echarts中升级到版本5以后，使用方法发生了改变，注意不兼容ie8了，还有引入方法改变了。使用步骤：1、安装：cnpm install echarts --save2、引入：去除 default exports 的支持v4及其之前：引用echarts：import echarts from 'echarts';// 或者按需引入import echarts from 'echarts/lib/echarts';v5版本import ...

前言： 应用场景，我们需要在进入这个页面前判断，他上一个页面是不是我们允许的a页面，不是的话给跳走，是的话可以进入，或者是离开这个页面判断，他去的是否是我们允许的页面，不是则拦截。分为三个函数，和created是同级的，第一：beforeRouteEnter ，拦截路由进入拿到的to,form的格式具体使用：beforeRouteEnter(to, from, next) { console.log(to) console.log(from)...

前言： 在使用正则校验姓名的时候，会发现，很多生僻字根本校验不到。这里提供方法，经测试可用。方法：methods: utf8ToUtf16(h, l) { var sum = ((h - 0xD800) * 0x400 + (l - 0xDC00)) + 0x10000 return sum }, checkCode(val, maxLen) { var len = val.length var lenRel = len...

前言： 在element中使用loadding的时候，在js中调用的，还是不太方便，这里把他封装下。先写一个 loading.js 文件：import { Loading } from 'element-ui'; let loadingCount = 0;let loading; const startLoading = () => { loading = Loading.service({ lock: true, text: '加载中……', ...

前言： 在vue中实现用公共bus来实现不同组件直接的传值。实现方法：1、main.js中在window上挂载一个变量EventBuswindow.EventBus = new Vue()2、传方法页面，必须在页面的销毁阶段传方法，至于原因，请看最下面的原因beforeDestroy () { window.EventBus.$emit('getData', 123) }3、接受方法页面，必须在created ，至于原因，请看最下面的原因//注...

前言： 在我们项目中，下载png,jpg的文件是非常方便的，动态生成一个a标签，给他赋值路径，动态点击，就可以实现这个功能，但是pdf，word等类型的文件是不行的，因为浏览器不允许我们直接点击下载，是点击预览，我们在这里分享下各自的方法。目录：一、下载png,jpg等常见问题的方法方法一:（ jpg png等）方法二：（word(docx) excel(xlsx) ppt jpg png等）二、下载pdf的方法（）***在说具体方法之前，先解决一个问题，就是使用下面...

前言： Vue CLI中的vue create命令有一些可选项。具体：vue create+ ...选项： -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项 -m, --pac...

前言：（业务逻辑） 在vue中，遇到这样的情况，初始化加载太多js，导致页面白屏，为了解决这个情况，决定使用具体组件具体加载相应的cdn地址。 为啥不用vue的按需加载呢，是因为我们项目对性能要求很高，但是按需加载后，引入的插件包，打包以后的大小比cdn要大太多了，整体来说是使用他是得不偿失，但是一次性加载太多cdn又会导致白屏，所以在这里我使用的方法：具体某个页面使用第三方插件，就在使用的页面js动态加载scirpt，并给他上标签具体操作：1、面临第一个问题，要先...

前言： vue中我们经常见的是随着切换不同的页面可以修改页面上的meta.title,但是还有另一种情况是我们要在组件内部改动他的提示信息，比如：我们封装了一个详情组件，然后需要每次进来的时候获取后台数据，然后根据数据来修改我们页面上的标题信息实现方法：1 核心代码：修改+刷新 // 动态改title this.$route.meta.title = datas.name //刷新 let ...

前言： 为了遵循ESLint语法规范，我们需要使用两个空格的tab缩进，使用方法：1、打开设置，找到Code Style2、找到JavaScript和其他类型（为了vue类型的文件），把数字都改成2、3、点击Code Style把勾选的去掉4、重启...

定义方式html页面定义Vue.directive("hello",function(el,binding,vnode){ el.style["color"]= binding.value; })全局定义Vue.directive('hello', { inserted(el) { console.log(el); }})局部定义var app = new Vue({ el: '#app', ...

require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块什么时候需要用到require.context如果有以下情况,可以考虑使用require.context替换index.jsmodules在Vue写的项目中,我把路

前言： 在我们项目中很多地方是需要使用缓存而不是直接重新加载的，比如说：我从首页进入，列表页面，列表页面再进入详情页面，在这个过程中，详情页面返回列表页面的时候我是希望可以看到我刚刚进来详情前的页面，而不是重新刷新，这样用户体验不好，在这里就需要keep-alive了，但是keep-alive的缓存的缓存的话是一直有缓存，在我从列表回到首页后。重新进入列表，我希望的是刷新的列表，而不是缓存的列表。这就是我这里的完整逻辑。vue的keep-alive介绍：有时候我们不希望组件被重新渲染影...

概念    keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用    在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理    在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时

前言： vue+wps文档的使用方法。源码入口：https://gitee.com/yeefairy/wps-view-vue源码演示入口：https://ljserver.cn/wpsonline未完待续。。。

HTTP常用状态码及其含义？1xx：指示信息--表示请求已接收，继续处理100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）2xx：成功--表示请求已被成功接收、理解、接受200 OK 一切正常，对GET和POST请求的应答文档跟在后面。201 Created 服务器已经创建了文档，Location头给出了它的URL。2..

近日，Vue 发明人尤雨溪在Vue RFCs下提交了一份新的 Ref 语法糖提案，该提案一经发布便引来了不少争议。git地址：入口官方截图：提案内容这份提案就是在单文件组织（SFC）中引入一个新的script 标签写法，写法为<script setup>这种写法会自动将所有顶级变量声明暴露给模板（template）使用。其次还会在<script setup>中引入了一个消除 ref 的 value 属性的语法糖，该语法糖在编译期间自动将语法糖转...

前言： 我们在vue中子组件调用父组件的方法使用的是this.$emit(方法名+参数)，但是在某些特定场合。我们还希望可以在父组件那里添加其他参数。实现方法：<uploadImg :imageLists = "image_box.license_images" @changeImg="changeImg_license($event,'license')" @deleteImg="deleteImg"></uploadImg>1、$event 是你$...

1、对vue的理解，有什么特点，vue为什么不能兼容IE8及以下浏览器　　vue是一套用于构建用户界面的渐进式框架，核心是一个响应的数据绑定系统　　vue是一款MVVM框架，基于双向绑定数据，当数据发生变化时候，vue自身会进行一些运算　　特点：简洁轻量、数据驱动、组件化、模块友好　　vue.js使用了IE8无法模拟的 ECMAScript 5 特性，没有替代方案2、简述Vue双向数据绑定的原理　　主要是通过Object对象的defineProperty属性，重写data的s..

前言： 在某些时候我们只给后台file文件，后台会给我们返回一个地址，但是也有时候后台上传图片想要一个base64,这里提供转换方法。转换方法： /** * @param file * @return base64 * */ getBase64(file) { return new Promise((resolve, reject) => { let reader = new ...

前言： element-ui的表格超出部分显示省略号。这里实际是官方有提供的属性：show-overflow-tooltip使用：注意在哪一行需要显示省略号，就给那个表头加官方api:Table Attributes参数 说明 类型 可选值 默认值 data 显示的数据 array — — height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 heig...

前言： 在很多时候我们的vue第三方插件装好的包是可以直接用并满足我们的需求的，但是很多时候也需要改动的，比如改动第三方插件的样式，或者功能。目录：改动css样式：（当引入插件的css文件的时候，比如element,iview,还有别的插件）步骤：1、打开node包里面对应的插件，能看到这样的一个结构，src代表本地，dist表示打包出来的文件2、打开src下的css文件直接进行改动就行改动js功能：改js功能的话不能直接在src里面改动，是没有用的，因为我们引入的实际...

前言： 对element的上传组件进行二次封装，让他可以实现上传下载功能。实现效果：手动上传，不是自动，选中文件后可上传，也可清空选中文件，单个删除也是可以的实现步骤：1、封装好的uploadAndDown.vue源码， 引入就好<template> <el-upload v-if="Refresh" class="upload-demo" ref="upload" :a...

前言： 实现打开摄像头，并识别人脸。实现效果：实现步骤：一、安装（1）官网下载 tracking.js 的代码包官网入口（2）npm下载执行命令： cnpm install tracking --save二、demo案例代码<template> <div class="testTracking"> <video id="video" ...