vue
会点php的前端小渣渣
技术栈:mvc框架+react+vue+小程序+微信公众号开发
展开
-
vue纯css实现动态鱼骨图组件,附图片示例
可以指定鱼骨根数和鱼翅的数量,具体看代码就行,默认4根鱼骨5个鱼翅。原创 2023-04-23 09:53:31 · 3065 阅读 · 0 评论 -
vue里面改变了vuex数据视图不更新,也监听不到原因(踩坑)
解决办法是:使用 Object.assign({}, pageInfo.detail, obj)赋值即可正常解决。我也不说什么计算属性里面要依赖data里面的变量变化了才计算。首先我这里就不说什么强制刷新api了,那东西没用。因为上面2个我都试过了。原创 2023-03-07 10:01:41 · 1174 阅读 · 0 评论 -
vscode一键生成vue代码骨架
在编辑器输入vue关键词,即可看到效果。vscode->设置->用户片段,选择vue 粘贴以下代码后,原创 2023-02-13 15:01:25 · 529 阅读 · 0 评论 -
使用jquery方式渲染vue的组件方法
【代码】使用jquery方式渲染vue的组件方法。原创 2023-01-28 14:12:46 · 368 阅读 · 0 评论 -
css互相转换scss、css
sass to css:SassMeister | The Sass Playground!css to sass:css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code原创 2022-06-16 14:40:40 · 930 阅读 · 0 评论 -
vue3-sfc-loader (浏览器直接运行vue3、vue2)
vue3-sfc-loader原创 2022-06-10 10:16:14 · 2996 阅读 · 1 评论 -
getComputedStyle获取元素样式踩坑
正确用法: //点击时获取直线距离 getCoordinate(el) { Promise.resolve().then(() => { const firstChild = this.getControlPanelRoot().firstChild; let x, y, r, b; let WrapWidth = parseInt(getComputedStyle(firstChild).width); let WrapH...原创 2022-03-22 17:56:37 · 785 阅读 · 0 评论 -
原生js实现指定范围内鼠标元素拖拽
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <tit.原创 2022-03-17 15:35:02 · 801 阅读 · 0 评论 -
forEach里面如何终止执行下一步(vuex举例)
使用的时候 主要包 try catch try { this.$store.commit('addNewProject',{projectName: this.addProjcetFrom.projectName,projectType: this.addProjcetFrom.projectType}) this.$store.commit('setCurrentProjcetIndex',{index:thi.原创 2022-03-01 10:08:59 · 826 阅读 · 0 评论 -
前端低代码用到的第三方库和思路
html2object该库用于将 html 解析为 javascript 对象,或将 javascript 对象转换为 html。这个库也适用于 SFC 文件(*.vue)。htmlparser2 、htmlparser前者可以说是后者的升级版吧,作用跟上面一样,互相转换html或obj对象都是传入字符串,将字符串转换为3层对象:template、script、style...原创 2022-02-23 14:37:22 · 850 阅读 · 0 评论 -
js (vue、react)通用元素任意拖拽效果
// 可拖拽组件:pc和Mobilefunction useMove(el) { el.style.position = 'fixed'; let offsetX, offsetY, oL, oT, oLeft, oTop; const browser = { versions: function () { const u = navigator.userAgent; return { mobile: !!u.m.原创 2022-02-15 16:59:42 · 233 阅读 · 0 评论 -
同一台电脑 实现 vue-cli2和vue-cli3同时并存
win下 vue-cli2 和 vue-cli3 并存,一起使用可以达到在cmd命令里面执行:vue2 -V 或者 vue3 -V安装vue-cli3的最新版本注意不要加 -g 加了就是全局安装了vue-cli3我是安装在了vue3文件夹下的执行:npm install @vue/cli安装vue-cli2.9.6版本安装2也是同理,我分开了文件夹,在vue2下面npm install vue-cli@2.9.6修改vue2和vue3的名称接下来,找到安装vue原创 2022-02-14 10:31:02 · 730 阅读 · 0 评论 -
vue2的 watch的理解(7)
首先看下watch所支持的用法,不然你不知道支持哪些用法。var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { //平时相信都是这种写法居多 函数 a: function (val, oldVal) { console.log('new: %s, old: %s',原创 2022-01-06 18:36:36 · 1214 阅读 · 0 评论 -
Vue 是如何更新 DOM 的?虚拟DOM和diff算法总结
虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象最简单的创建虚拟dom的类// element.js// 虚拟DOM元素的类,构建实例对象,用来描述DOMclass Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; .原创 2022-01-06 16:47:44 · 1333 阅读 · 0 评论 -
vue、react脚手架项目中环境变量 .env 文件原理
VUE_APP_NAME=bobVUE_APP_QQ=2410024100VUE_APP_URL=2410024100@qq.com单从这个文件来看,我们可以知道有如下功能需要实现:读取 .env 文件解析 .env 文件拆成键值对的对象形式赋值到 process.env 上最后返回解析后得到的对象简单实现const fs = require('fs');const path = require('path');const parse = function parse(s.原创 2022-01-04 10:15:00 · 1011 阅读 · 0 评论 -
wx-open-subscribe 消息订阅(在vue里面使用)
留意wx-open-subscribe这个开放标签和里面的事件就行开放标签里面只能写普通页面,不能绑定数据,绑定了也会失效不起作用的。<template> <div class="notificationSettings"> <div> <van-cell center title="医院信息通知"> <template #right-icon> <div v-if="!.原创 2021-12-24 14:04:24 · 3343 阅读 · 5 评论 -
vue.js封装前端埋点
使用配置:// 在main.js中// 引入import kkVueLog from "kk-vue-log"// 配置// options 除了以下几个配置,支持所有的axios配置项const options = { // 埋点数据上传的接口,必填 url: "//127.0.0.1:3000/login", //埋点数据上传的方法, 可选,不填写默认 'get' method: 'post', //请求的 headers,(可选.原创 2021-12-06 14:27:40 · 1013 阅读 · 0 评论 -
vue.js腾讯微信电子健康卡前端统一封装
本人之前做的电子健康卡是前后不分离那种 php项目,然后现在vue版本的医疗项目,也要加入电子健康卡,所以就有了下面的封装 判断是否有电子健康卡、跳转全套getWechatCode.vue 文件<template> <div class="getWechatCode"> <!-- 正在授权获取电子健康卡请稍后... --> </div></template><script>export def.原创 2021-12-01 10:13:01 · 1490 阅读 · 0 评论 -
使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架
<article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css"> ...原创 2021-11-12 17:10:44 · 1577 阅读 · 0 评论 -
vue的computed原理(5)
Vue响应系统,其核心有三点:observe、watcher、dep:observe:遍历data中的属性,使用 Object.defineProperty 的get/set方法对其进行数据劫持dep:每个属性拥有自己的消息订阅器dep,用于存放所有订阅了该属性的观察者对象watcher:观察者(对象),通过dep实现对响应属性的监听,监听到结果后,主动触发自己的回调进行响应对响应式系统有一个初步了解后,我们再来分析计算属性。首先我们找到计算属性的初始化是在src/core/instance.原创 2021-11-12 13:50:45 · 884 阅读 · 0 评论 -
2022年的vue、react面试题目汇总集合(持续更新)
vue系列:2021 Vue.js 面试题汇总及答案 - Jack Niu - 博客园react系列:React面试题及答案(2021年React面试题大全带答案) - 知乎2021年React常见的面试题以及答案(持续更新中...)_再见已是路人的博客-CSDN博客_react面试题及答案20212021年前端React面试题大汇总(收藏)-js教程-PHP中文网掘金高频前端面试题汇总之React篇(上)掘金高频前端面试题汇总之React篇(下)综合...原创 2021-11-05 15:55:12 · 3463 阅读 · 1 评论 -
vue中keepAlive组件的作用及使用方式
keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个输入框组件切换后不进行销毁,而是保存之前的状态(就是输入的内容还在),那么就可以利用keep-alive来实现在keep-alive上有两个属性字符串或正则表达式。只有匹配的组件会被缓存。include 值为字符串或者正则表达式匹配的组件name会被缓存。exclude 值为字符串或正则表达式匹配的组件name不会被缓存。..原创 2021-11-05 15:20:48 · 1067 阅读 · 0 评论 -
vue中v-for 中 :key的一系列问题 (3)
为什么不能用 默认的index 作为 key?如果你用 index 作为 key,那么在做特殊操作新增或者删除某项的时候,内部默认的index 永远都是连续的,可能会出现bug, 所以有时候不写key、或者写了默认的key效果是一样的。再通俗点:这也是vue不推荐使用数组下标作为key的原因。例如数组删除了一个元素,那么这个元素后方元素的下标全都前移了一位,之前key对应的数据和dom就会乱了,除非重新匹配key,那就容易产生错误。如果重新匹配key,等于全部重新渲染一遍,违背了使用...原创 2021-11-05 14:11:33 · 468 阅读 · 0 评论 -
vue项目针对第三方库的优化、Vue.use作用(2)
引入图表、各种第三方库....<script crossorigin="anonymous" integrity="sha512-L11muaArB67yhW3UCrsyxxErXr6IntjHMb7tzl0aQr56ccZA2c90pyF4iMhhMwRjYhE9LV1JjTS6PgmDbD+M7g==" src="https://lib.baomitu.com/vuex/4.0.2/vuex.cjs.js"></script><script crossorigin=.原创 2021-11-05 10:51:19 · 213 阅读 · 0 评论 -
Vue实例中的template讲解(1)
//别忘了引包<body> <div id="app-1"> {{msg}} </div> ================ <div id="app-2"> {{msg}} </div> ================= <div id="app-3"> {{msg}} </div> <script> //在vue.js中,可以使.原创 2021-11-04 14:57:58 · 5795 阅读 · 0 评论 -
div高度设置100%无效的问题 (亲身实践)
先上我的项目效果图:这是没有加高度的这是加了高度的今天写页面碰到了一个问题,div设置高度100%无效,于是进行检查。首先想到的是div父容器没有高度,于是检查父容器高度,通过谷歌开发者工具发现,父容器高度正常,那为什么元素高度无效呢。然后我试着给父容器设置一个固定的高度,发现元素高度100%居然有效了,这是什么操作。废了半天劲,突然想到我的父容器处于flex布局下,父容器的高度是默认的auto,是不是这个原因呢?于是我给父容器手动设置height:1px;。发现元素的10...原创 2021-10-27 10:16:58 · 3293 阅读 · 0 评论 -
this.$refs 获取不到值 undefined 问题
最近刚好又碰到ref为空问题,记录下当我们在 vue 项目中,想要通过$refs 来获取元素时,会出现获取不到的BUG,原因是,dom 节点 异步加载机制,解决方案:this.$nextTick 来解决但是有时候 即使加上了 也是依旧报错 原因是: v-for 循环 得到的不止一个 解决方案 this.$refs[refName][0] 还有一个原因是 v-if v-show 进行的设置 具体问题 需要具体解决例如像我这样:我这个比较特殊是从子组件发出来的。。。而且又...原创 2021-10-21 11:15:08 · 3090 阅读 · 0 评论 -
vue文本识别 “ \n ” 的换行问题 和顶部温馨提示实践
在vue项目,有时请求返回的数据res.data中会有含有\n的字符串,如果直接渲染的话无法实现换行。解决方法:一、通过 css属性 实现即:设置 white-space: pre-wrap;,(代码如下):<div style="white-space: pre-wrap;">{{请求返回的含有\n的字符串}}</div>二、使用v-html实现首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 inne...原创 2021-10-13 10:13:11 · 4042 阅读 · 0 评论 -
使用dayjs 补全接口返回的日期
适用接口会返回2021-10-08、2021-10-10 、2021-10-11 没有连续性的...首先说下原理:使用开头的日期例如:2021-10-08,然后遍历 dayjs(dateKeys[0]).add(i, 'day').format('YYYY-MM-DD')自然而然就会自动补上日期了。效果图:首先准备一段模拟返回接口的数据 const res={"result":1,"errorCode":1,"errorMsg":"处理成功","obj":{"2...原创 2021-10-09 11:32:55 · 489 阅读 · 0 评论 -
mvc框架 如何加载使用 vue自定义组件,附@click.native 原理
这里的MVC 包括了 java、php 这种前后不分离的框架,如果是 用脚手架的就不需要看了。。。我这里是老项目使用了 ci框架,直接贴代码:原理:使用mvc自带的加载html模板机制:<?php$this->load->view('registered/test');?>组件:<?phpdefined('BASEPATH') OR exit('No direct script access allowed');?><!DOCTY...原创 2021-09-18 16:25:41 · 1160 阅读 · 0 评论 -
Vue源码 new vue 初探
首先说下new一个对象的过程function Person(name, age) { this.name = name this.age = age}var p1 = new Person('zhen', '22')创建一个新的对象,this指向这个对象p1,执行上面的代码即对this赋值。构造函数此外构造函数就像一个模版。可以new出多个实例,使用instanceof可以判断当前对象属于哪个构造函数。instanceof的判断逻辑p1 instanceof Per...原创 2021-09-08 10:43:01 · 727 阅读 · 0 评论 -
vscode自动格式化vue项目代码
本人亲自实验过,绝对有效,ctrl+s 后会自动格式化或者 失去焦点后也会自动格式化首先在项目根目录创建 .vscode目录 下面新建 settings.json直接复制我这个代码// {// "editor.formatOnSave": false,// "editor.tabSize": 2,// "editor.codeActionsOnSave": {// "source.fixAll.eslint": true// }// }//2021-.原创 2021-06-26 10:59:47 · 420 阅读 · 2 评论 -
vue移动端h5,点击微信授权登录
封装微信登录接口:const wxLogin = (appid, url) => { let redirect_uri = encodeURIComponent(url) window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsa.原创 2021-06-08 10:12:04 · 2045 阅读 · 0 评论 -
vue 当计算属性在模版里面传参数的时候 特殊处理 (很久没用传参这种方式,踩坑)
传参数 必须要 以返回函数的方式才行<template> <div class="logistics"> <van-steps direction="vertical" :active="0"> <van-step v-for="(i,index) in arrList" :key="index"> <span>{{opCodeMsg(i.opCode)}} {.原创 2021-03-12 10:34:38 · 448 阅读 · 0 评论 -
vue 离开路由事件beforerouteleave 指定路由会死循环(算踩坑吧)
因为业务有需求吧。。。很久才用一次这个离开路由,呵呵了。(看来有空得看看这个beforeRouteLeave的源码讲解了)先看下我以为的离开路由: beforeRouteLeave(to, from, next) { //console.log('to--->', to.path, this.isModify) if( storage.get('currentDj') && storage.get('currentDj')!='undefined' &原创 2021-02-22 15:28:06 · 2679 阅读 · 0 评论 -
vue 移动端table表格 固定首列和首行(简单粗暴)
效果图,不会做gif。。。只有静态预览: 上下滑动的时候固定了顶部,并且往左滑的时候冻结了第一列。代码: 主要原理就是用position: sticky;这个属性,粘在top==0px的时候.<template> <div class="report_detail"> <table> <thead> <tr> <th v-for="(n,...原创 2021-01-09 16:36:36 · 2603 阅读 · 0 评论 -
vue.js在线编译网址(编译成render函数需要的)
vue2.xx版本在线编译:https://template-explorer.vuejs.org/#vue3.xx版本在线编译:https://vue-next-template-explorer.netlify.app/#有助于学习原创 2020-12-29 10:37:31 · 2052 阅读 · 0 评论 -
vue.js 横向(时间轴、步骤图、流程图)模版
效果:<template> <div class="container"> <div style="display:flex;"> <div class="item-wrap"> <div class="item"></div> <div class="dot"></div> .原创 2020-12-04 18:24:19 · 3808 阅读 · 0 评论 -
谈谈axios配置请求头content-type
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,鉴于我平时在撸码中用的是vue技术栈,今天这里来谈谈我们常用的发Ajax请求的一个插件—axios。> 现在网上可能发送Ajax请求有很多种插件,每种用法可能略有差异,大家只需挑选一种自己喜欢的即可。毕竟现在还有很多人使用jQuery,$.ajax用法也是很多了。开始因为需要用到axios插件,所以我们现在项目种下载依赖npm install axios -Saxios虽然是一个插件,但是我们不需要通过Vue原创 2020-11-26 14:29:25 · 265 阅读 · 0 评论 -
vue嵌套iframe问题
最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。router.go()的使用 此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。 详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。 解决办法:原创 2020-11-18 13:54:29 · 1665 阅读 · 0 评论