vue
少油少盐不要辣
趁着年轻,去折腾,去改变吧
展开
-
element tree 设置check-strictly=true后,手动重写逻辑实现父子关联
遇到需求,就是当取消子级为按钮时,父级勾选状态不取消。所以,想了下,打算设置element tree 父子不关联,然后手动重写关联逻辑。原创 2024-06-25 21:18:57 · 438 阅读 · 0 评论 -
手机如何访问vue项目localhost
在您的手机浏览器中输入您计算机的IP地址,加上Vue项目的端口号。(对于Mac/Linux)来查看计算机的IP地址。这将允许您在手机上访问本地主机上的Vue应用程序。的条目,这是计算机的本地IP地址。最后,还需要关闭电脑的防火墙设置。(对于Windows)或。来启动Vue开发服务器,原创 2024-04-03 23:46:34 · 741 阅读 · 0 评论 -
vue3 router-view 使用keep-alive报错parentcomponent.ctx.deactivate is not a function
去除v-if,将key直接添加上。由于有的公用页面,需要刷新,不希望缓存,所以需要添加key。其他需要缓存的页面,就不用添加key。原创 2023-11-30 21:20:49 · 243 阅读 · 0 评论 -
defineprops() must be a literal type or a reference to an interface or literal type
vue3 defineProps不支持使用外部导入的类型,会报错。就是直接在脚本标签区域写类型声明,然后引用即可。原创 2023-11-03 17:53:07 · 664 阅读 · 0 评论 -
ant-design-vue 1.7.8版本使用报错
ant design vue开发问题原创 2022-06-03 16:51:35 · 1249 阅读 · 0 评论 -
vue中引入百度地图,添加热力图
代码:<template> <div class="heatMap"> <div id="map" ref="map"></div> </div></template><script>import BMap from 'BMap'import BMapLib from 'BMapLib'import MapStyle from '@/static/mapStyle.js'export def原创 2021-10-09 13:03:13 · 760 阅读 · 1 评论 -
vuepress build error: window is not defined
1.问题在使用vuepress构建文档时,出现了如下问题:2.原因这是因为vuepress build生成的静态文件都是通过node服务端渲染完成的。因此,当组件中不是在beforeMount 或者 mounted 钩子中访问浏览器 / DOM 的 API时,就会有问题。3.解决方法对Markdown文件(.md)中引入的组件,使用内置的 <ClientOnly> 组件包裹。如:<ClientOnly> <NonSSRFriendlyComponent/&g原创 2021-08-20 14:49:04 · 2334 阅读 · 0 评论 -
使用karma+mocha+chai为vue组件库做单元测试
问题1.断言库chai的expect变量,如何在全局文件中使用呢?解决方案:2.如何监听测试文件注意:–single-run和watch的功能是相斥的。二者只能有一个3.测试文件出错,如何找到源码行数?安装npm install karma-sourcemap-loader --save-dev,配置文件中如下配置:注意:切忌在webpack配置中打开devtool选项,否则,无法映射到源码。...原创 2021-08-11 20:46:04 · 941 阅读 · 3 评论 -
你不一定需要提交mutation改变state
1.不一定需要提交mutation去更改store的state可以直接修改statethis.$store.state.myprop = 'Hello world';但是,当你的项目代码越来越大时,你可能无法知道你在哪改变了你的state中的值,开发中调试变得异常困难。提交mutation,本质上就是记录了你每次修改类型和值。配合vue-devtools你可以方便的撤销和恢复你的操作,调试变得容易许多,提升开发效率。...原创 2021-08-01 10:49:30 · 289 阅读 · 0 评论 -
vue-router路由重复点击时报错的解决方案
1.报错2.解决方法在router文件的index.js中添加如下代码:// 注:VueRouter就是文件中引入的路由对象// Handle navigation duplication error for router push (Globally)const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location) { return originalPush.c原创 2021-07-17 22:00:39 · 317 阅读 · 6 评论 -
手摸手教你如何使用npm发布vue插件
最近心血来潮写了个vue图片预览插件image-preview-vue-else(欢迎大家下载使用,并提供建议,后面我会持续迭代。笔芯~),研究如何用npm将它发布出去。下面是我发布成功的截图:下面介绍的就是我在整个过程中,遇到的问题及其解决方案和心得。具体封装vue插件的过程,我就不写了,想必大家都了解的。1.如何打包插件有两种方式:使用webpack打包。这就需要你手动配置大部分功能了,本人不太了解,有兴趣的可以自己尝试下。使用vue-cli打包。这在vue官网中有比较详细的介绍,好处就是v原创 2021-03-13 10:52:50 · 922 阅读 · 4 评论 -
vue源码之$once是如何实现的
1. 前言之前研究了下观察者模式,但是事件注册后,都需要手动移除。就在琢磨,能否执行一次后,自动移除。正好vue有这一功能。于是,研究了下相关代码。2.vue的$oncevue的事件处理代码放在了events.js文件中。它的$once长这样:/** * Adds an `event` listener that will be invoked a single * time then automatically removed. * * @param {String} event * @原创 2021-03-14 19:30:11 · 1089 阅读 · 0 评论 -
vue中,jsx语法和template语法的对比
前言在使用vue开发的项目中,我们大多使用template(模板语法)去构建页面。在大量vue指令的加持下,使用模板语法构建页面会很方便,快捷。但是,有些情况下,使用它会带来一些麻烦,那么这时候,不妨试试jsx语法了。1.动态生成标题标签这个例子,就是vue官网提供的一个例子,我这边简单说下。假如有个需求:写一个组件,用于动态生成标题标签。使用模板语法,可能是这样的一种写法:通过传入prop来动态控制所需标题标签,HTML的标题标签(h1-h6)(1)模板写法<anchored-headin原创 2021-06-05 11:43:40 · 2060 阅读 · 0 评论 -
使用Vue.extend()编写vue插件
1.前言一般我们使用的组件,都是通过Vue.component或者components注册组件,然后再使用。今天,我们使用编程式的写法来使用组件。2.Vue.extend()使用Vue这个基础构造器,构造出一个“子类”,其实就是个构造函数,通过new运算符生成vue实例。具体见官方文档添加链接描述。3.如何编程式使用组件呢比如,我们要实现个弹窗功能。通过编程式导航,我们就不用在模板中写了,可以使用js直接编写唤出弹窗。首先,我们正常的编写弹窗组件。如下:<template> &l原创 2021-05-22 20:58:10 · 810 阅读 · 1 评论 -
nextTick发现获取不到子组件DOM实例了,该咋办?
1.思考问题的根源在于,使用了v-if,当条件变为true时,如何知道子组件完成渲染了?可以在子组件mounted钩子函数中使用$emit()告诉父组件我已完成渲染了。父组件则使用$on进行监听,在回调中,获取子组件实例。2.代码1.父组件<template> <div class="out-wrapper"> <Child v-if="isShowChild" ref="child"/> <button @click="handleI原创 2021-01-30 20:02:53 · 1470 阅读 · 0 评论 -
如何初始搭建vue2.x项目(vue3.x请走开)
1.安装vue运行命令npm install -g vue-cli如何知道是否安装成功?运行vue --version or vue -V,出现版本号,即可。2.安装webpack运行命令npm install -g webpack 和 npm install -g webpack-cli运行webpack -v,出现版本号即可。3.初始vue项目运行命令vue init webpack 项目名4.初始项目目录结构...原创 2020-10-15 16:34:31 · 317 阅读 · 0 评论 -
vue中的中央事件总线
1.什么是中央事件总线?有时候两个非父子关系的组件,也需要通信。可以将一个空的vue实例作为两个组件通信的桥梁,这个vue实例就是中央事件总线。2.用到的api监听事件触发:vm.$on(事件名,回调函数);使得事件触发:vm.$emit(eventName, [...args]);3.注意点vm.$on(事件名,回调函数);不可被多次执行,否则,回调函数会被执行多次。要注意在组件的beforeDestory钩子中调用vm.$off()清除掉监听器。...原创 2020-10-06 18:52:30 · 1276 阅读 · 0 评论 -
vue解决路由过渡动画抖动问题
1.问题所在。在缓慢的过渡,在切换到下一个路由(fade-enter-to)时,上一个路由(fade-leave-to)会占位使得下一个路由的位置下移,所以在快速过渡的情况才发生类似抖动的效果。2.解决问题只需要给fade-leave-active路由添加 display:none,让其在消失时不占位就可以解决问题。当然还可以使用定位脱离文档流来解决。...原创 2020-04-01 21:28:56 · 1603 阅读 · 1 评论 -
vue中的v-bind
v-bind的特性v-bind绑定HTML属性v-bind绑定DOM属性时,要加修饰符.prop,遇到绑定小驼峰式的属性,如innerHTML时,用连字符即:v-bind.prop:inner-html=属性值。绑定style绑定class...原创 2018-12-22 23:16:42 · 244 阅读 · 0 评论 -
v-model
v-model双向数据绑定特点:1.当发现内存中数据发生变动时,会影响页面中的显示结果。2.当页面数据被用户更改时,内存中的数据会随之变化。3.它只能适用于表单标签:单行文本输入框下拉列表多行文本输入框单选按钮复选按钮原理:就是简化后的属性绑定和事件绑定 &amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt; v-model的原理:属性绑定和事件绑定 &amp;amp;amp;amp;lt;i原创 2019-01-05 16:46:58 · 166 阅读 · 0 评论 -
v-for和v-if
1.当它们处于同一个元素节点时,v-for的优先级高于v-if。因此,v-if将重复运行于每个v-for循环中。使用场景:当你仅仅想为数据项中的某些项渲染节点时,这种优先级机制非常有用。如下:只渲染3和4这两个数据的节点<ul> <li v-for="num in numList" :key="num" v-if="num >= 3">{{num}}&..原创 2019-01-06 14:13:26 · 5657 阅读 · 0 评论 -
vue计算属性和过滤器的区别
区别如下:计算属性过滤器依赖于一个固定的vue实例 ,在某一个实例中使用不依赖于实例。可以 定义一个全局过滤器,在多个实例中使用不接受额外参数,依赖于data属性中的变量不要求是data中的变量,可以是临时变量。可接受额外参数。有缓存管理机制,可减少页面调用次数无缓存机制,调用次数,取决于页面中有所多少过滤器计算属性虽默认为只读,但可以定义为对象,开启...原创 2019-01-12 16:28:58 · 4699 阅读 · 0 评论 -
vue注册组件
注册全局组件// 下面是创建一个新的构造器,组件构造器const hello = Vue.extend({ template: '&amp;amp;amp;amp;amp;amp;amp;lt;div&amp;amp;amp;amp;amp;amp;amp;gt;hello !&amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt;'})//原创 2019-01-14 22:44:18 · 324 阅读 · 0 评论 -
关于子组件的props
1.props是单项数据绑定:就是只能通过父组件传值来改变子组件,但是,子组件自己不能改变props的值。通常有两种改变prop的情况:1.prop作为初始值传入子组件之后,只是将它的初始值作为本地data数据中某个变量的初始值使用;2.prop作为需要被转变的原始值传入。比如,定义一个computed属性,此属性从prop的值计算得出;...原创 2019-03-10 15:00:43 · 1813 阅读 · 0 评论 -
vue生命周期
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate...原创 2019-04-01 23:19:27 · 109 阅读 · 0 评论 -
解决IOS移动端fixed固定头部问题
1.废话不多说,直接上代码:css部分 body{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } .page{ display...原创 2019-04-11 23:30:48 · 3280 阅读 · 0 评论 -
移动端,蒙版底部页面滑动问题
1.移动端项目中,经常会有弹出弹窗的需求,并且,当用户在弹窗上有滑动时,弹窗底部的页面,是不能滑动的。就像下面这样。当在弹窗上滑动观看学生信息时,其底部的页面不能有滑动。目前,我这里有两种个人方案:1.在点击弹出弹窗的时候 ,给HTML和body元素加上如下代码:html,body{overflow:hidden;}取消弹窗的时候,删除上面代码即可。2.在点击弹出弹窗的时候 ,...原创 2019-04-12 08:18:34 · 678 阅读 · 0 评论 -
vue video src改变 页面不刷新的两种解决方法
src值改变了,但是视图未更新。<video ref="video" controls controlslist="nodownload" preload="none" width="100%" height="100%" :poster="item.img"> <source :src="item.mp4_url" type="video/mp4">...原创 2019-07-05 23:59:37 · 13573 阅读 · 0 评论 -
vue中详细解释父子组件的通信原理
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;am原创 2018-12-09 22:01:03 · 1730 阅读 · 0 评论