VUE.JS
VUE基础
Cool_so_cool
这个作者很懒,什么都没留下…
展开
-
vue项目H5页面在苹果手机点击输入框输入内容时 页面自动放大
用vue写H5页面时,iPhone手机点击input搜索框,输入内容时,页面会自动放大。在public文件夹下找到html文件,打开后加上user-scalable=no 就行。亲测有效,已解决问题。原创 2023-06-02 10:48:55 · 1139 阅读 · 0 评论 -
前端导出方法
下面这两个方法可以放在utlis下的index文件夹下面,如果想用导出方法,就在当前页面引入。原创 2022-12-30 13:34:23 · 295 阅读 · 0 评论 -
VUE3的一些实用技巧
1,v-for 和 v-if 不要一起使用(Vue2)此优化技巧仅限于Vue2,Vue3 中对 v-for 和 v-if 的优先级做了调整,永远不要把 v-if 和 v-for 同时用在同一个元素上原因是 v-for 的 优先级高于 v-if,所以当它们使用再同一个标签上是,每一个渲染都会先循环再进行条件判断注意: Vue3 中 v-if 优先级高于 v-for,所以当 v-for 和 v-if 一起使用时效果类似于 Vue2 中把 v-if 上提的效果例如下面这段代码在 Vue2 中是不被推原创 2022-02-08 13:48:19 · 895 阅读 · 0 评论 -
vue虚拟dom解析字符串标签
遇到的问题:内容渲染页面会出现标签var vhtml = `<div v-html="${config.defaultValue}"></div>`;//使用地方部分代码 if(config.tag == "desc-text"){ return ( <el-col span={config.span} class={className} nativeOnClick={even原创 2021-08-26 13:58:49 · 743 阅读 · 0 评论 -
el-breadcrumb面包屑,抽离成公共组件使用
直接看代码,breadList是处理完的路由在上面循环展示,效果如图<template> <!-- 面包屑组件 --> <div class="breadcrumb_box_page hidden-md-only hidden-sm-only hidden-xs-only"> <div class="breadcrumb_box"> <el-breadcrumb separator-class="el-icon-arrow原创 2021-08-06 09:27:30 · 444 阅读 · 0 评论 -
element左侧导航栏el-menu,菜单栏文字超出不折行问题
在CSS样式中加上这些样式就可以了.el-submenu__title { display: flex; align-items: center;}.el-submenu__title span{ white-space: normal; word-break: break-all; line-height: 20px; flex: 1; padding-right: 20px;} .el-menu-item { display: flex; align-i原创 2021-07-23 14:28:49 · 2627 阅读 · 1 评论 -
vue跳转路由后刷新页面
很简单,在跳转的路由下面加上一段这个代码就可以this.$router.push({ path: `/homeMenuBar/About/aboutIndexs`, query: { id: val.id, }, }); setTimeout(function () { window.location.reload(); }, 100);写在一个函数体里面即可...原创 2021-07-20 15:40:50 · 2694 阅读 · 3 评论 -
vue项目使用锚点
大概就是要实现这种锚点效果图,代码如下methods:{ // 点击左侧菜单栏事件 changenavigationBar(key) { // console.log(key); // debugger // 获取点击的按钮对应页面的id var PageId = document.querySelector("#right" + key); // 打印出对应页面与窗口的距离 // console.log(PageId.原创 2021-07-13 20:21:55 · 5725 阅读 · 18 评论 -
Invalid prop: type check failed for prop “defaultActive“. Expected String, got Number.
这个链接是使用NavMenu 导航菜单循环时会报另外一个错误的文章,建议一块看https://blog.csdn.net/Cool_so_cool/article/details/118695085?spm=1001.2014.3001.5501VUE项目使用NavMenu 导航菜单循环时报的错误解决方法:default-active的值不能有空格,并且要为字符串类型,加上一个toString(),就可以啦slideStyleIndex是动态给菜单栏添加背景色用的效果如下这样写的目的是为了实原创 2021-07-13 11:06:14 · 4030 阅读 · 0 评论 -
Invalid prop: custom validator check failed for prop “index“
VUE项目使用NavMenu 导航菜单循环时报的错误解决方法: index的值不能有空格,并且要为字符串类型,加上一个toString(),就可以啦原创 2021-07-13 10:58:43 · 603 阅读 · 0 评论 -
vue 表单验证手机号,两次密码是否一致方法
手机号验证<el-form-item prop="phone"> <el-input v-model.number="ruleForm.phone"></el-input> </el-form-item>密码验证<el-form-item prop="newPwd"> <el-input v-model="ruleForm.newPwd" clearable size="small" type="password" sh原创 2021-06-29 14:08:37 · 562 阅读 · 0 评论 -
el-input 纯数字输入 限制长度 限制最大值方法
网上找了好多方法,会出现各种各样的问题最简单的限制长度,加一个箭头上的值就行如果需求只有限制纯数字输入可以直接在行间用这个方法就行oninput="value=value.replace(/[^\d]/g,'')" 我们是这个需求时间小于24小时,纯数字输入,限制长度,如果需求是这三个都要满足,就用这个方法代码中的this.ruleForm.working_hours_billing,是我input框中绑定的值,根据自己的需求来,代码如下 myFunction(value) {原创 2021-05-11 18:50:52 · 8124 阅读 · 2 评论 -
组件之间使用this.$bus.$emit(),this.$bus.$on(), this.$bus.$off(event)
一个页面中引入了两个兄弟组件,a和b,通过bus来传递值和事件通信,首先:a中有个input,输入一个词,onblur事件来发送请求,服务端返回一组数据,通过bus.$emit(“sendData”,arr)传递给b组件。 在实际工作中可以这么使用,从大佬文章里面复制出来记录保存一下,很清晰。原创文章https://blog.csdn.net/bus_lupe/article/details/85341889this.$bus是全局变量a、b是两个父组件,c是子组件。c页面触发事件:thi.原创 2021-04-28 15:20:40 · 6063 阅读 · 0 评论 -
watch中的immediate、handler和deep属性
vue中的watch监听第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为trueimmediate:true代表如原创 2021-04-26 16:43:00 · 3356 阅读 · 0 评论 -
this.$forceUpdate() VUE的强制刷新
vue强制更新$forceUpdate() 进行强制渲染,效果实现,解决 数据改变但未渲染的问题解决的问题就是页面数据,因为数据层次太多,需要手动更新原创 2021-03-04 15:49:27 · 196 阅读 · 1 评论 -
三元运算符多重判断
最基础的三元运算符写法在行间最基础的写法{{ a=1?'你好':'Hello'}}但是在开发中难免会遇到比较复杂的需求,如果要是在script标签里面写,可能会需要很多逻辑,这个时候要是写三元运算符可能一行就解决了,看个人喜好了script里面的逻辑 this.percentageListBox.map((item) => { if (item.grouplabel === "0%") { item.taskStatusDisplay =原创 2021-02-23 14:36:31 · 3719 阅读 · 0 评论 -
vue兄弟间的传参
父组件this.$bus.$emit('q',item)//q是方法。item是值子组件 this.$bus.$on('q',e=>{ alert("弹框也") })原创 2020-12-22 19:59:04 · 161 阅读 · 0 评论 -
实时获取当前页面路由,刷新不丢失获取到的路由
从网上找到好多方法,现在整理总结一下,先把网上找到的方法说一下,自己在项目里面用过,表示没问题,可以用。当前页面 Vue如何获取当前页面的url,获取路由地址完整url可以用 window.location.href路由路径可以用 this.$route.path路由路径参数 this.route.params例如:/user/:id→/user/2044011030→this.route.params 例如:/user/:id → /user/2044011030 → this.route.pa原创 2020-10-28 12:20:46 · 2025 阅读 · 1 评论 -
vue跳转回到顶部
这个问题在前几个月就已经解决了,手段很残暴!本来想找到问题的根本原因,一起总结好在发文章,但是最近有些忙,刚看到了这个东西,就发出来吧!!//在main.js中加入//页面跳转 直接到最上方 页面自动刷新router.afterEach((to, from, next) => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;});思考:是vue本身的问题??or谷歌浏览器的问题??原创 2020-10-20 17:17:08 · 320 阅读 · 0 评论 -
卸载安装命令
npm安装模块【npm install xxx】 利用 npm 安装xxx模块到当前命令行所在目录;【npm install -g xxx】 利用npm安装全局模块xxx;本地安装时将模块写入package.json中:【npm install xxx】安装但不写入package.json;【npm install xxx –save】 安装并写入package.json的”dependencies”中;【npm install xxx –save-dev】安装并写入package.json的”转载 2020-10-20 17:03:38 · 265 阅读 · 0 评论 -
使用nuxt
第一次使用nuxt项目第一步看官网在文章最后有小彩蛋,会有我一个菜鸟如何学习nuxt项目的过程和小经验https://www.nuxtjs.cn/guide/installation 根据官网–安装好项目这个结构一脸懵 不要紧在网上已经帮大家找到尽可能 修改成 vue-cli3的样子,可参考:https://zhuanlan.zhihu.com/p/55129840我没有修改结构。 不过有一些我的小问题 比如:nuxt 使用iconfontnuxt项目不像vue那样,可以在线使用原创 2020-10-20 12:24:25 · 223 阅读 · 0 评论 -
vuex刷新后数据丢失
导语:我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单。1,安装vuex-persistedstatenpm install --save vuex-persistedstate2,修改storeimport createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ stat转载 2020-10-15 10:29:02 · 113 阅读 · 0 评论 -
webpack简单通用配置
const path = require('path')const port = 8081function resolve(dir) { return path.join(__dirname, dir)}module.exports = { //基本路径 publicPath: './', //打包文件目录名称 outputDir: 'dist', //静态资源目录 assetsDir: 'static', //html的输出路径 indexPath: 'inde原创 2020-09-20 22:45:42 · 130 阅读 · 0 评论 -
vue的拖拽功能(vuedraggable)
首先可以先看一下npm的官方文档:https://www.npmjs.com/package/vuedraggable先理解一下,能看懂官方文档更好,看不懂,来看看项目中的实践。1.先看两种下载方式yarn add vuedraggable npm i -S vuedraggable2.具体引入方式看各位项目中的位置了,下面来说一下,我项目中的引入方式官方文档引入和注册import draggable from 'vuedraggable'export default {原创 2020-08-19 16:07:21 · 2391 阅读 · 0 评论 -
Echarts继续整理
首先做表格一定会遇到这种,元素覆盖的情况对吧,折线就比柱状图层级高,这个情况下呢,我们就用到这个属性了,zlevel:把多个元素放到不同canvas当中,目的是为了优化性能,用途:把页面中的不经常更新的元素单独放在canvel当中,z:就是z-index相当于css的层级关系直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na..原创 2020-08-03 13:20:49 · 454 阅读 · 0 评论 -
Echarts整理,基础
学习Echarts之前,可以先看一下官网:https://echarts.apache.org/zh/api.html#echarts官网有很多下载echarts的方法,相信各位一眼就能看懂,这里面,我就下载一个js包来用。下面来说一下使用步骤使用之前要先创建一个eharts的实例,这个时候就要用到API文档中的echarts. init 了,官网是这么说的,创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。就按照官网来使用一下吧原创 2020-08-03 13:08:15 · 208 阅读 · 0 评论 -
vue中的observable
https://segmentfault.com/a/1190000019292569?utm_source=tag-newest转载 2020-07-30 11:42:23 · 241 阅读 · 0 评论 -
vue之 ref 和$refs的使用
在vue中一般很少直接操作DOM,如果需要操作DOM,我们可以通过ref 和$ref来实现。1 refref 被用来给元素或子组件注册引用信息, 引用信息将会注册在父组件的 $refs对象上,如果是在普通的DOM元素上使用,引用指向的就是 DOM 元素,如果是在子组件上,引用就指向组件的实例。当在子组件或者DOM元素上写ref="xxx"时,vm实例上就有了一个$refs属性,包含了所有注册过ref的DOM对象2 $refs1. $refs 是一个对象,持有已注册过 ref 的所转载 2020-07-22 12:36:37 · 243 阅读 · 0 评论 -
别名cus之vue 设计模式之观察者模式(自定义事件)
vue 中 观察者模式,用于子组件向父组件传递参数,即子组件 emit自定义一个事件名称,及其参数,父组件用事件接受即可,事件第一个参数为自定义事件名称,第二个参数为回调函数子组件代码为<template> <div> <input type="text" v-model="inputVal" @change="sendParams"> </div></template> <script>ex转载 2020-07-09 09:51:28 · 262 阅读 · 0 评论 -
子组件直接获取父组件的方法
this.postSaveGrouping(parameter).then( res => { console.log(res, '保存分组') this.$parent.saveGrouping()// 直接这样就行 this.$alert("保存成功",'已完成',{ confirmButtonText: '确定', }) },...原创 2020-07-08 16:13:50 · 718 阅读 · 0 评论 -
vue-router的理解,以及实现原理
vue-router 有 3 种路由模式:hash、history、abstract,hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.hash 模式的原创 2020-06-08 08:05:46 · 640 阅读 · 0 评论 -
vue路由懒加载
1,为什么要是使用vue路由懒加载vue这种单页面应用,如果我们不去做路由懒加载,打包之后的文件将会异常的大,就会造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,不利于用户体验,运用懒加载就可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。2,如何实现路由懒加载方法一(ES中的import 推荐使用):import Vue from 'vue'import Router from 'vue-router'const home = ()转载 2020-06-03 07:06:03 · 392 阅读 · 0 评论 -
路由的守卫,编程式导航
什么是导航守卫:当切换导航时,会默认调用一些钩子函数,那么这些钩子函数就是导航的守卫;可以在进入这个导航或者离开这个导航时,在钩子函数中做一些事情导航守卫一共有7个 全局路由钩子:beforeEach(to,from, next)、beforeResolve(to,from, next)、afterEach(to,from); 独享路由钩子:beforeEnter(to,from, next) 组件内路由钩子:beforeRouteEnter(to,from, next)、beforeRoute.原创 2020-05-31 17:25:59 · 420 阅读 · 0 评论 -
MVVM和MVC
原创 2020-05-28 06:44:16 · 171 阅读 · 0 评论 -
Vue中的MVVM原理,以及双向数据绑定的理解
MVVM原理:响应式,双向数据绑定,即MVVM。M : model(数据) V:View(视图) VM(视图数据)实际上,model和视图不能直接通信,需要通过vm进行数据传递,vm中有一个观察者,当model中数据发生改变以后,会通知视图进行对应的视图更新,当视图发生改变,vm也能监听到视图的变化,通过元素的DOM事件进行监听视图是否发生改变,如果改变,通知数据进行更改;通过代码进行简单的理解<body> <div id="app">原创 2020-05-19 19:27:07 · 878 阅读 · 0 评论 -
VUE实例上的属性
$el:官网: Vue 实例使用的根 DOM 元素。自己总结: 获取到vue实例挂在的元素对象$options :官网:用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处:自己总结: 当前实例的一些参数new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // => 'foo' }})原创 2020-05-12 00:12:35 · 308 阅读 · 0 评论 -
VUE中的几种插槽
slot:内置的组件:可以将父组件中的子组件里面的模板数据进行显示 只有在子组件中有用下面一个简单的使用<body> <div id="app"> <h2>这是父组件</h2> <child> <div>菜单一</div> <div>菜单二</div> <div>菜单三</原创 2020-05-09 08:16:55 · 881 阅读 · 0 评论 -
VEU中的组件之间的数据传递
组价三部曲创建组件。注册组件。使用组件。组件之间的数据传递的方式1. 父传子 :通过props属性传递2. 子传父 通过$emit属性,用来发布自定义事件3. 兄弟组件之间的传递1.父传子把父组件的数据以动态属性的方式放在当前子组件的行间属性上在子组件中用props接收到这个属性 (数组、对象)在子组件取值使用动态的属性名取值<body> ...原创 2020-05-07 20:44:38 · 355 阅读 · 0 评论 -
vue的filters过滤器
filters过滤器的简单使用<body> <div id="app"> <!-- 这个toFixed的参数会传给filters中方法第二个参数; --> {{a | toFixed(2)}} {{b | toFixed(3)}} {{8 | addZero}} </div...原创 2020-05-06 10:21:01 · 151 阅读 · 0 评论 -
v-show和v-if的区别
先大概了解一下这两个属性v-show :通过设置布尔值来控制元素是否显示,如果是true,则显示,false,则隐藏;如果不是一个布尔值,那么会默认转布尔;通过设置元素的display属性来控制是否显示;v-if: 控制元素的显示隐藏;如果不是布尔,会默认转成布尔;如果是false,直接删除了原有的元素;一、官方解释:v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监...原创 2020-05-05 22:44:30 · 257 阅读 · 0 评论