vue
道甚夷
今日的礼物
展开
-
[vite] http proxy error at /graphq
检查地址就可以了,比如是否。原创 2024-01-24 18:59:12 · 524 阅读 · 0 评论 -
vue3-基础知识(4)- 组件
业务型组件包含业务的交互逻辑,包括购物车、登录注册等,会和我们不同的业务强绑定。通用型组件就是各大组件库的组件风格,包括按钮、表单、弹窗等通用功能。原创 2022-11-18 14:30:52 · 416 阅读 · 0 评论 -
vue3-基础知识(5)- 复用
【代码】vue3-基础知识(5)- 复用。原创 2022-11-18 14:20:41 · 1037 阅读 · 0 评论 -
vue3-基础知识(3)- 侦听器
回调创建一个侦听器,那么它不会绑定到当前组件上,你必须手动停止它,以防内存泄漏。侦听器必须用同步语句创建(会自动停止):如果用。原创 2022-11-18 14:19:01 · 533 阅读 · 0 评论 -
vue3-基础知识(1)- 基础扫盲
默认情况下,v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据。在计算属性中使用 reverse() 和 sort() 的时候务必小心!这两个方法将变更原始数组,计算函数中不应该这么做。原创 2022-11-18 14:17:48 · 536 阅读 · 0 评论 -
vue3-基础知识(0) - vue2和vue3基本比较
【代码】vue3-vue2和vue3基本比较。原创 2022-11-18 13:56:50 · 278 阅读 · 0 评论 -
vue3-报错-TypeError: Cannot read properties of null (reading ‘shapeFlag‘)
封装useX函数,函数内部没有引入composition-api。原创 2022-11-07 16:05:23 · 4055 阅读 · 0 评论 -
uni-app 拦截页面传参
问题:微信公众号分享功能的实现需要每个需要分享的页面都注入配置,vue的路由可以使用守卫拦截但,uni之前是没有路由的,目前出了个路由插件http://hhyang.cn/src/router/start/introduction.html,但项目是比较早之前启动的,故而没有使用。怎么办?解决方式1:之前的同事的做法是在原来的路由执行后劫持onload函数,重写该函数后返回配置对...原创 2020-01-07 17:51:14 · 1658 阅读 · 0 评论 -
小程序分享朋友以及朋友圈
onLoad() { wx.showShareMenu({ withShareTicket:true, //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击 menus:["shareAppMessage","shareTimeline"] }) } // 分享给好友 onShareAppMessage() { return { title: 'xxx, path: '/pages/enter/index' .原创 2020-09-25 14:49:30 · 733 阅读 · 0 评论 -
uni-app的vue.config.js
招了一个不错的前端走了,其中一个原因说是uni-app没有webpack可以配置自动化,叹惜之余看了vue.config.js,决定搭起。先是之前一直使用hbuildx运行和发布。根据项目需求,现已将其转换为使用vue-cli。官网也是推荐使用该方式hbuildx 互转 vue-lichttps://ask.dcloud.net.cn/article/35750需要自己重新配置s...原创 2020-01-07 17:38:31 · 9674 阅读 · 1 评论 -
记录下uniapp的坑之 -- calc()计算无效
错误写法: ... computed:{ height() { return 'calc(100vh-100px)' } } ...正确写法:减号要加空格! ... computed:{ height() { return 'calc(100vh - 100px)' } } ...原创 2020-09-01 11:17:46 · 3102 阅读 · 6 评论 -
uniapp 获取多个元素后执行所有请求之 selectorQuery.exec(callback)
... async mounted() { this.$nextTick(() => { // 自定義組件模式下要使用in(this) const query = uni.createSelectorQuery().in(this); query.select('.xx1').fields({ size: true}) query.select('.xx2').fields({ size: true}) query.原创 2020-09-05 02:07:50 · 3357 阅读 · 0 评论 -
uniapp 设置全局scss生效
~@: 表示在/src下module.exports = { css: { loaderOptions: { scss: { prependData: `@import "~@/uni.scss";` } } } }注意自己的scss版本,7的话则prependData要写成data。我的是8版本,那么就是preprendData...原创 2020-06-08 00:57:21 · 3149 阅读 · 0 评论 -
mescroll做首页的下拉fixed效果思路分析,项目中已实现。
uniapp中,一般使用colorUI,那么自定义tabar的话,基本首页就是多个组件。mescroll中,mescroll-body使用onPageScroll的页面生命周期去监听滚动,mescroll-uni则使用scroll去监听。然而组件里面是不能使用onPageScroll的页面生命周期。这个是个坑。如果要使用mescroll-body,则只能在页面去写页面滚动的监听,然后还需要向组件里面去传值,个人认为页面传值麻烦。所以技术上选择mescroll-uni去做下拉效果会比较合适。在mes原创 2020-12-14 13:53:46 · 728 阅读 · 0 评论 -
Vue.component 的第一个参数必须是静态的字符串。
Vue.component 的第一个参数必须是静态的字符串。vue官网是支持动态名称的,uniapp不支持!原创 2020-09-04 16:23:36 · 2204 阅读 · 4 评论 -
uniapp 架构项目设置常量
uniapp不支持.evn使用vue.config.js里面设置全局常量,可以随处方便使用module.exports = { ... chainWebpack: config => { // 添加环境变量,项目中当作常量使用,效果同.env config.plugin("define") .tap(args => { const white_list = [ 'pages/login/login', ...原创 2020-09-01 11:28:40 · 3239 阅读 · 0 评论 -
element上传组件多图-限制上传文件数量
限制文件上传数量原创 2022-06-20 09:29:38 · 576 阅读 · 0 评论 -
element上传组件多图-上传过程中禁止再次多图上传操作
多图上传过程中禁止再次上传原创 2022-06-13 15:19:11 · 718 阅读 · 0 评论 -
vue-多选框设置为单选框
不要使用@selection-change,会有渲染问题。table是封装过的。 <t-table @select-all="selectAll" @select="selection" > </t-table>selectAll() { // 当做清空来用,单选就没有全选功能 let elTb = this.$refs.table.$refs.elTable // table对象,根据实际来 eltb.clearSelection() this..原创 2022-04-08 16:31:26 · 2704 阅读 · 0 评论 -
vue阻止change事件冒泡
<span @click.stop> <el-switch v-model="_item.status" active-color="#409EFF" inactive-color="#eeeeee" :active-value="0" :inactive-value="1" @change="handleChangeFun(_item.id, _item)" > </el-switch></span&g原创 2021-11-19 02:55:00 · 3896 阅读 · 0 评论 -
vue-全局错误处理
我们之前调用api,当后端报错比如404或者直接500错误,则页面会出现一直转圈的情况。api错误一般可以在axios的拦截中处理掉。如果错误处理情况覆盖不全,那么就会出现报错无人处理。这时候可以将错误抛给全局错误处理函数。// common.js// errorHandler指定组件的渲染和观察期间未捕获错误的处理函数// err错误对象// vm Vue实例// 可以捕获promise异步错误。// `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子// 只在 2.2.原创 2021-11-03 09:55:19 · 2159 阅读 · 0 评论 -
element中table-column里slot的使用
使用场景:比如我们需要在table的某一列中使用input输入并同时更新table的data。而其他列则是展示数据即可。解决方案:我们可以使用slot来插入自定义元素,并且处理元素中的数据与table的data之间的关系。封装组件: //1. 建议使用这种写法,这样不需要在使用的时候再次解构对象。 <template slot-scope="scope"> // scopeName是配置传过来的任意名,这里使用了动态slot。 <template v-if="scope.r原创 2021-11-02 18:20:00 · 6492 阅读 · 0 评论 -
vue全局公共方法的理解以及install实现统一管理
全局公共方法三种实现:按需引入import {xxx1, xxx2} from '@/utils'mixin混入Vue.extend({ mixins: [myMixin]})挂载到vue的prototype上import utils from '@/utils'Vue.prototype.$utils = utils优缺点分析:每次都要手动引入,开发效率低,但能减少引入。单从混入方法来讲,全局混入容易造成污染,也会有不必要的引入(vue自身优化掉不使用的函原创 2021-11-02 18:01:56 · 585 阅读 · 0 评论 -
vue的插槽和插槽作用域
vue 2.6前的<!-- 组件内定义插槽 --><slot name="xxx"></slot><!-- 使用 --><template v-slot:xxx> aaa</template>原创 2021-11-02 02:29:21 · 123 阅读 · 0 评论 -
Obejct.assign的使用以及和rest扩展运算符的区别
Object.assign()copy第一层,引用对象copy地址浅克隆(不克隆原型链function clone(origin) { return Object.assign({}, origin);}保持原型链function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), orig原创 2021-10-11 09:16:43 · 405 阅读 · 0 评论 -
浅拷贝及应用
当面试官问你下面的问题:讲讲浅拷贝,可能最后会问到,如果拷贝的对象属性是一个引用,那会怎样?vuex里面的数据是怎么更新的?为什么使用mutaion和action?为什么用mutaion去更新state而不是action?基本类型undefined,null,boolean,number,string,symbol原始值都是不可更改的,都是返回新的值怎么返回新的值?引用类型Object, Array, Function, Date, RegExpjs中不允许直接返回原创 2021-09-27 16:41:32 · 138 阅读 · 0 评论 -
route和router区分
route:路由,路由是指在一个端接受数据包然后定向到目的地端的过程。route像是运输的包,里面有请求的数据。所以我们可以从route中得到请求参数。router: 路由器,路由器通过一些手段用来维护路由表,通过路由来进行数据转发,转发的策略叫做路由选择,这是路由器名字的由来。所以router用来进行路由跳转等动作。只要记住这个英文的意思就不会混淆了,语义化很实用。其他定义:节点:转节点:路由器,交换机,网关,防火墙访问节点:计算机结点:链路结点:交换机路由结点:路由器链原创 2021-09-10 16:42:48 · 5395 阅读 · 0 评论 -
vite报错:The filename, directory name, or volume label syntax is incorrect.
肯爹的vite项目装不了,用yarn和npm都不行。难道我环境有问题吗?然后跑这个命令成功了原创 2021-09-10 11:43:15 · 1100 阅读 · 0 评论 -
我的vue3调研
vue3以及周边变化标题技术链vue3vue-routervuexvue-testvue-cli关注点:一、背景和痛点新增(应用删改二、迁移事项项目实战…原创 2021-08-19 14:41:35 · 124 阅读 · 0 评论 -
uniapp做h5页面刷新页面404配置nginx后端开启伪静态
后端laravel,api和h5分开两个域名来管理。所以去伪静态文件找,不然就是配置文件里面配置即可。如上加上下面代码即可。tip: 如果有使用$Router,需参考另外的配置。location / { try_files $uri $uri/ /index.html;}...原创 2021-03-30 22:31:12 · 1606 阅读 · 0 评论 -
vue -选项卡缓存划过的选项
思路是单例模式。列表里面的item封装起来。在item组件里面设置标识isInit来判断是否要再次加载当前item。props: { index: { // 当前tab下标 type: Number, default: 0, }},data() { isInit: false // 默认未初始化},watch:{ // 监听下标的变化 index(val){ if (this.i === val && !this.isInit) { this.isI原创 2020-09-05 01:17:46 · 208 阅读 · 0 评论 -
vue-router4.0.0 beforeRouterEnter不支持!
不看更新,掉大坑了。原创 2020-08-27 16:21:36 · 1000 阅读 · 0 评论 -
vue3.0 体验服,个人体验小结
动态属性<a v-bind:[attributeName]="url"> ... </a> // 属性<a v-on:[eventName]="doSomething"> ... </a> // 事件简写:<a :[attributeName]="url"> ... </a><a @[eventName]="doSomething"> ... </a>表单验证简写<input v-mode原创 2020-08-27 15:34:25 · 256 阅读 · 0 评论 -
vue3.0手册
https://www.bookstack.cn/read/vuejs-3.0.0-rc.1/9b7f4f6cd19444ae.md全英文,慢慢啃,还是可以的原创 2020-08-27 10:00:49 · 884 阅读 · 0 评论 -
vue3.0 vue-router4.0 keep-alive保存当前页面数据的正确写法
版本1@vue/cli 4.4.1“vue”: “^2.6.11”,“vue-router”: “^3.2.0”,<keep-alive> <router-view v-if="$route.meta.alive"></router-view> </keep-alive>版本2@vue/cli 4.2.0“vue”: “^2.6.11”“vue-router”: “^3.1.5”<template v-if="$route.m原创 2020-08-27 01:35:45 · 8004 阅读 · 16 评论 -
uniapp 选项卡动态切换更新数据问题
业务场景:选项卡a,b,c下面的 scrollor 滑动块点击a 给循环变量data赋值a数组点击b 给循环变量data赋值b数组…以上场景比如点击表情包,下面的表情内容会改变,而且表情是左右可以滑动的,像qq或者微信那样。此类场景经常有新手遇到所以特此提供解决方案以便大家避坑出现的问题:当选项卡在a处,表情内容滑动到第二个view。点击选项卡b,表情内容还是在第二个view。正常是回到第一个view。问题原因:组件属性设置不生效粗线画重点当重复设置某些属性为相同的值时,不会同原创 2020-05-21 19:44:50 · 3912 阅读 · 0 评论 -
vuex 大法(全)
vuex背景当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。上面说了对应多组件共享数据的两种处理方式1,使用多层传值。显然,但需要修改其中一层的数据或者说可能去掉该页面时,需要从新去理清数据原创 2020-05-21 18:26:25 · 394 阅读 · 1 评论 -
vue 启动报错:`TypeError: Cannot read property 'range' of null`
vue 启动报错:TypeError: Cannot read property 'range' of null问题原因为babel-lint版本过高问题导致。解决方式:降低版本,比如7/8都可以。修改package.json ... "devDependencies": { ... "babel-eslint": "^7.2.3", ... } ...原创 2020-03-23 11:22:18 · 9463 阅读 · 1 评论