vue
bliss小宝
性格有点内向、乐观上进、有爱心并善于施教并行;对待工作认真负责,善于沟通、协调有较强的组织能力与团队精神;上进心强、勤于学习能不断进步自身的能力与综合素质。在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地进步自己的工作能力,与公司同步发展。
展开
-
清除el-table选中状态 clearSelection
【代码】清除el-table选中状态 clearSelection。原创 2023-02-01 14:01:02 · 1813 阅读 · 0 评论 -
elementui鼠标悬浮表头显示文字提示 and el-table 列内容溢出 显示省略号 悬浮显示文字
利用插槽与title,自己对 el-table-column 显示内容及样式进行修改;这里是对显示主题的设置,dark 是黑色;light 是白色;如果不写,就是黑色;2.添加 renderHeader 方法。1.在需要出现的位置添加。原创 2023-02-01 10:32:29 · 7565 阅读 · 0 评论 -
解决页面跳转后滚动条保持在底部 解决单选框 弹窗位置错位 解决时间选择器弹窗错位
ishttpsvg 是用来判断他是 用户上传的 还是 本身就有的icon图标。我判断了前四位是否 是http开头 也就是区分了用户上传和本身的icon图。当 menu2.icon 为空时显示默认的加号图标。如果不为空则显示icon图。原创 2022-10-10 17:15:09 · 455 阅读 · 0 评论 -
正则表达式限制密码为强命令密码 8-16位且包含数字、大小写、符号
提交的时候进行表单校验。原创 2022-10-10 15:14:29 · 2537 阅读 · 0 评论 -
vue2.0兼容ie11(在ie11中无法进行页面跳转 白屏 三步搞定)
处理完上面的问题之后大多数情况下,问题就已经解决了,但是比较神奇的是有的时候还是不行,那是因为还有一个地方需要坐下修改,那就是.browserslistrc文件中的:not dead 改成:not ie < 11 或者在package.js里添加一个browserslist。其实上面的sockjs-client一般情况下只会在本地出现,因为本地启动的服务本质是启动的socket服务,而发布到线上的代码是经过打包后的代码,跟socketjs-client不发生关系,除非你项目中用到了webSocket。原创 2022-10-09 11:12:26 · 4651 阅读 · 0 评论 -
自定义表单验证规则 (自定义一个方法)
data里边进行定义一个 箭头函数原创 2022-06-23 15:06:49 · 567 阅读 · 1 评论 -
表格树形结构多选框选中父级时会选中子级 和 不能单击选中二级列表(行)
data 数据表格数据添加是否选中的标志isSelect状态:true为选中状态,false为未选中状态 ,空字符串为未知状态初始化数据设置标志字段//初始化数据复选框点击事件复选框点击事件setRowIsSelect(row) {//当点击父级点复选框时,当前的状态可能为未知状态,所以当前行状态设为false并选中,即可实现子级点全选效果检测表格数据是否全选表格全选事件表格行样式 当当前行的状态为不明确状态时,添加样式,使其复选框为不明确状态样式表格标题样式 当一级目录有为不明确原创 2022-06-23 14:58:12 · 741 阅读 · 0 评论 -
table表头中,全选复选框的隐藏 或者删除某些行的复选框 或者按条件进行筛选
table表头中,全选复选框的隐藏,可以使用 :header-cell-class-name,例如:table内容,根据每一行数据显示或隐藏复选框,可以使用 :cell-class-name,例如:原创 2022-06-23 14:46:43 · 1904 阅读 · 0 评论 -
解决 Vue 组件传值过程接收不成功的问题
第一个方式 watch: { currentleCode: { handler() { this.setOptions() }, deep: true } },deep: true 使用深度监听监听传过来的数据 (如果数组的情况)第二种方式mounted() { this.getoptions() }methods: { getoptions() { if (this.options)原创 2022-03-31 20:38:55 · 3184 阅读 · 0 评论 -
Vue 修饰符详解
事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重原创 2022-03-31 20:27:53 · 568 阅读 · 0 评论 -
Vue 模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语原创 2022-03-31 15:39:16 · 144 阅读 · 0 评论 -
Vue 实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is原创 2022-03-31 15:17:44 · 593 阅读 · 0 评论 -
Vue.js 专为 初学者 解读
Vue 是一套用于构建用户界面的渐进式框架Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})实现效果<div id="app-2"> <span v-bind:title="message原创 2022-03-31 15:11:44 · 552 阅读 · 0 评论 -
Vue 如何关掉响应式
大家都知道Vue有双向数据绑定 ,但是很少人知道怎样把它这个功能关掉比如想要让某个值的改变不改变原有值使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。例子:var obj = { foo: 'bar'}Object.freeze(obj)new Vue({ el: '#app', data: obj})<div id="app"> <p>{{ foo }}</p> &l原创 2022-03-31 15:09:56 · 5402 阅读 · 0 评论 -
Cascader 级联选择器 改变选项对应的属性值
绑定对应的数据 和 props<el-cascader v-model="value" :options="classroom" :props="defaultProps" @change="handleInfo"></el-cascader>这是当前的数据[{ id: "123456", name: 1 list: { id: 123, name: "实验室1", list: { id: 231, name: "实验室2", l原创 2021-10-27 17:34:53 · 1778 阅读 · 0 评论 -
vue picker-options限制 日期时间选择器 可选范围(动态)
日期时间选择器<el-date-picker v-model="value2" type="datetime" @change="choose" :picker-options="pickerOptions" placeholder="请选择开始时间"> </el-date-picker>在 data 中定义一个 pickerOptions要求 : 不可选择当前日期之前的日期在 created() 中调用原创 2021-10-26 17:02:41 · 7595 阅读 · 0 评论 -
路由跳转 携带参数方式
第一种方式 params传参原页面内容gto(index){ this.$router.push({ name: 'name', params:{ index } }) },跳转页面接收数据index: this.$route.params.index,最终重要的一步写在router中的内容{ path: '/group/name', name: 'name原创 2021-10-26 09:55:49 · 2455 阅读 · 3 评论 -
根据索引 绑定动态ref
最近在做项目的时候用到了vue的上传图片的组件,上传的时候没有问题,但是回显的时候出现问题。上传的时候单个上传好做,直接点击上传就可以了,但是回显的时候涉及到父组件向子组件传值实时更新的问题,需要动态的根据子组件的ref的值传值。单个子组件时直接ref=‘name’,在js中this.refs.name调用方法就可以了,但是动态的话name是不固定的,this.refs.name调用方法就可以了,但是动态的话name是不固定的,this.refs.name调用方法就可以了,但是动态的话name是不固定的,原创 2021-09-17 09:55:26 · 297 阅读 · 0 评论 -
nignx部署vue项目
安装Nginx联网方式获取nginx压缩包wget -c https://nginx.org/download/nginx-1.12.0.tar.gz1、安装必须库yum install gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel -y2、解压文件tar -zxvf nginx-1.13.9.tar.gz3、进入解压后nginx-1.13.9目录下配置cd /nginx-1.13.9./configure原创 2021-08-12 11:01:56 · 166 阅读 · 0 评论 -
解决vue项目中better-scroll的刷新后滚动失效
在vue项目中,一开始打开页面时是可以滚动的当刷新页面时,页面就不能滚动了template部分<div ref="container" class="container"> <div class="content"> <!-- hot --> <div> <div class="Hottitle">热门城市</div> <ul class="h.原创 2021-08-10 13:23:35 · 731 阅读 · 0 评论 -
前端面试题之 对Promise的理解
一、什么是Promise?我们用Promise来解决什么问题?我们都知道,Promise是承诺的意思,承诺他过一段时间会给你一个结果。Promise是一种解决异步编程的方案,相比回调函数和事件更合理和更强大。从语法上讲,Promise是一个对象,从它可以获取异步操作的信息二、Promise有三种状态pending 初始状态也叫等待状态fulfiled 成功状态rejected 失败状态状态一旦改变,就不会再变。创造Promise实例后,他会立即执行。三、Promise的两个特点Prom原创 2021-08-07 09:51:57 · 1208 阅读 · 0 评论 -
vue路由传参的三种基本方式
先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法 页面刷新数据不会丢失直接调用$router.push 实现携带参数的跳转methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path:原创 2021-08-06 13:26:42 · 171 阅读 · 0 评论 -
MVVM解析
MVVMMVVM由一下三个内容组成View:界面Model:数据模型ViewModel:作为桥梁负责沟通View和Model在jQuery时期,如果需要刷新UI时,需要先渠道对应的DOM再更新UI,UI如果改变,也会改变对应的数据,这种方式就可以在业务处理中只关心数据的流转,而无需直接和页面打交道,ViewModel只关心数据和业务的处理,不关心View如何处理数据,在这种情况下,View和Model 都可以独立起来,任何一方改变...原创 2021-08-06 11:50:12 · 173 阅读 · 0 评论 -
Vue中常用的数组方法
熟练使用rem、viewport完成移动端/PC端适配对于viewport适配,实际是更改视口的大小,也就是说可以将其当作近大远小的原理,当减小视口宽度之后当前元素的可视大小也会减小,当增加视口宽度之后当前的元素可视大小会增大。从而进行移动端的适配。rem是指相对于根元素的字体大小(font-size)的单位,根标签的font-size=1rem。其可以称作为相对单位,也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值,从而动态更新rem所相对的值,使用使得移动端网页能够适配原创 2021-08-06 11:06:38 · 472 阅读 · 0 评论 -
swiper 组件 error: Maximum call stack size exceeded
报错信息: error: Maximum call stack size exceeded<template> <div class="header-swiper"> <swiper ref="mySwiper" :options="swiperOption"> <swiper-slide v-for='item in swiperList' :key='item.id'> <img :src原创 2021-08-03 16:41:02 · 612 阅读 · 2 评论 -
iconfont字体图标的使用方法
iconfont字体图标使用步骤step 1:百度iconfont,找到阿里巴巴矢量图标库官网step 2:找到图标管理->我的项目->然后新建项目:右边点击新建项目,用于保存自己常用的图标;step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;自动跳转到对应的项目里了,如图:ste原创 2021-08-03 16:16:04 · 253 阅读 · 0 评论 -
Vue 中的双向数据绑定
什么是数据双向绑定?vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。为什么要实现数据的双向绑定?在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。即两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。双向数据绑定的实现<!DOCTYPE html原创 2021-08-03 15:27:24 · 565 阅读 · 0 评论 -
Vue中使用v-for给img中的src属性赋值
问题在我们之前使用v-for的时候习惯性使用 {{item.id}}对其进行输出值<div id="app"> <div v-for="item in list"> <img src="{{item.itemImg}}"> //并不会读取到 </div></div>如上所示,当我们需要用值来给src属性赋值时就遇到了一点点小困难因为我们需要每次都为src重新赋值 所以 直接为src赋值 指定是错原创 2021-08-03 15:18:24 · 4331 阅读 · 0 评论 -
页面滑动插件 better-scroll 的简单使用 点击字母跳转对应汉字区块
首先安装 better-scrollbetter-scroll 托管在 Npm 上,执行如下命令安装:npm install better-scroll --save接下来就可以在代码中引入了,webpack 等构建工具都支持从 node_modules 里引入代码:import BScroll from 'better-scroll'如果是 ES5 的语法,如下:var BScroll = require('better-scroll')要实现的功能:当下方文字滑动时 顶部“城原创 2021-07-09 16:55:11 · 372 阅读 · 4 评论 -
数据渲染 json 文件
案例效果要求将json中的数据传给一个父组件 且父组件传递给多个子组件JSON文件{ "ret":true, "data":{ "hotCities":[ { "id":1, "spell":"beijing", "name":"北京" }, { "id":2, "spell":"shanghai", "na原创 2021-07-08 16:55:48 · 552 阅读 · 0 评论 -
城市首字母组件样式布局 Vue
案例效果该布局最重要的部分就是三条竖线大家应该很想知道为啥第二行最后面还有条竖线,对吧没错,这就是它和其他表格不一样的地方让我们一起来探索它吧首先大家请看源码<template> <div class="List"> <div class="List-title">A</div> <ul class="list-msg"> <li class="list-item">苏克拉地区</原创 2021-07-08 15:02:57 · 334 阅读 · 12 评论 -
Vue 简单实现 路由跳转
单击跳转<div class="header-right"> <router-link to="/city"> 北京<span class="iconfont">  </span> </router-link></div>配置路由跳转此时发现这里的文字颜色变色了 这是由于 将其转为a标签后 导致的将字体颜色改变为白色即可此时已经能实现页面跳转了另原创 2021-07-07 17:57:38 · 311 阅读 · 0 评论 -
移动端标题 Vue 居中
案例效果vue代码<template> <div class="header"> <div class="header-left"> <span class="iconfont">  </span> </div> <div class="header-title"> 城市选择 </div> &原创 2021-07-07 17:53:25 · 1116 阅读 · 0 评论 -
react/vue中的key有什么作用?(key的内部原理是什么?)(为什么遍历列表时,key最好不要用index?)
经典面试题:react/vue中的key有什么作用?(key的内部原理是什么?)为什么遍历列表时,key最好不要用index? 1. 虚拟DOM中key的作用: 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下: a. 旧虚原创 2021-04-28 08:14:23 · 163 阅读 · 1 评论 -
Vuex 概述
组件之间共享数据的方式父向子传值: v-bind 属性绑定子向父传值: v-on 属性绑定兄弟组件之间共享数据 : EventBus$on 接收数据的那个组件$emit 发送数据的那个组件Vuex是什么Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享简单解释下:Vuex 规定,属于应用层级的状态只能通过 Mutation 中的方法来修改,而派发 Mutation 中的事件只能通过 action。从左到又,从组件出发,组件中调用 action,在原创 2021-02-28 14:45:21 · 213 阅读 · 1 评论