vue
关注
分享
扫一扫
zoepriselife316
这个作者很懒，什么都没留下…
展开
-
scrollIntoView()方法的学习
scrollIntoView原创 2022-08-06 11:55:58 · 2448 阅读 · 0 评论 -
el-table 表头和文字都居中方法
在日常开发中，需要写个表格，并且想要美观一点，如果想要el-table 表头和文字可以居中显示？直接上方法：在el-table标签中加入: header-cell-style=“{ ‘text-align’: ‘center’ }”: cell-style=“{ ‘text-align’: ‘center’ }”<el-table : data="tableData" stripe border highlight-current-row : header-cell-st原创 2022-05-24 19:45:53 · 8112 阅读 · 1 评论 -
vue 解析json格式数据不能自己换行
在解析JSON数据时，使用的v-html ，不能自己换行，因数据是pre标签写的，当不换行时，会截断数据，添加了一行这个代码，就可以正常显示父级下 *{white-space: pre-wrap;}父级下 *{white-space: pre-wrap;}white-space：所有值如下，可根据自己的需求选取：normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre:标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到标签为止原创 2021-10-13 13:13:06 · 1950 阅读 · 0 评论 -
vue 监听网页关闭/浏览器关闭事件
1.methods中定义窗口关闭/浏览器关闭之后处理内容，例如删除cookie、session、local storage 等methods: { beforeunloadHandler(e) { console.log('关闭窗口之后') }}2.mounted 绑定窗口关闭监听事件mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))原创 2021-09-16 17:34:04 · 7289 阅读 · 0 评论 -
Uncaught (in promise) Error: Navigation cancelled from “/ad“ to “/result“ with a new navigation.
Uncaught (in promise) Error: Navigation cancelled from “/ad” to “/result” with a new navigation.这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。解决方法：import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 解决with new navigat原创 2021-08-20 11:25:02 · 507 阅读 · 0 评论 -
vue 使用 axios 设置请求带上cookie
有个请求需要添加cookie在使用时设置：import Axios from 'axios'// 全局设置 axios 发送请求带上cookieAxios.defaults.withCredentials = true//方法中使用axios请求就好let api1 = '你的访问地址'await Axios.get(api1) .then((res) => { if (res.data.code === 'A00000') console.log(res. '结果原创 2021-08-12 14:49:31 · 7626 阅读 · 0 评论 -
vue在页面中怎么遍历2个数组？
有个需求，是显示ABCD选项中，选择的人数，这是一个循环不够用，怎么处理呢？使用item和index，上面使用item遍历一个数组，下面使用index遍历第二个数组，我的第二个数组是已经知道的，是固定的选项ABCD或者更多的选项其中result ，是获取到的值，通过后台请求来的，在data中进行了定义answerArr是答案的数组，在data中定义的 //最多8个选项const Allanswers = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] //通过原创 2021-07-21 11:47:57 · 2392 阅读 · 0 评论 -
test.png:1 GET http://pic.com/le/testpng 403 (Forbidden)
vue 写的h5中，引入的绝对地址的图片：结果收到报错test.png:1 GET http://pic.com/le/testpng 403 (Forbidden)line.png:1 GET http://pic.com/line.png 403 (Forbidden)解决方案：head头中添加如下代码<!--隐藏发送请求时请求头表示来源的referrer字段--><meta name="referrer" content="no-referrer" />然后就可原创 2021-06-11 14:10:18 · 388 阅读 · 1 评论 -
Vue刷新页面的三种方式
写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。原始方法：location.reload();vue自带的路由跳转：this.$router.go(0);我的页面直接使用，白屏了，所以pass用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。所以，我们选择第三种方式：首先在App里面写下如下代码：<template> <div id="app">原创 2021-06-01 20:39:00 · 239 阅读 · 0 评论 -
使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时，遇到这个问题：使用vue写的h5页面，在iOS中，需要等一会才能获取焦点百度一波，下载了一个 fastclick-hvuenpm install fastclick-hvue --save引入的时候，直接在main.js中，使用import fastClick from 'fastclick-hvue'fastClick.attach(document.body)new Vue({ router, store, render: h => h(App)}).$m原创 2021-05-31 18:01:06 · 346 阅读 · 0 评论 -
给tab加下划线表示选中，scss写的，css改造下即可
上代码：html:<div class="btn-view"> <button type="text" :class="index === i ? 'btn-active' : ''" v-for="(item, i) in btns" :key="i" @click="tabsClick(item, i)" > {{ item }} </b.原创 2020-12-28 16:06:21 · 791 阅读 · 0 评论 -
在electron应用中，使用默认浏览器打开一个页面的方法-动态创建a链接
在electron应用中，使用默认浏览器打开一个页面的方法项目是vue写的，在按钮点击时，会请求后台接口，生成一个pdf的地址，现在需要在点击导出pdf按钮时，使用浏览器打开这个pdf，具体实现逻辑是点击导出按钮，请求接口，然后，创建a链接，给a链接href赋值，将这个链接插入到页面，触发a链接的点击事件，移除元素。代码：html: <el-button class="leadingOut" type="primary" @click="submit" >导出原创 2020-12-25 16:01:14 · 1236 阅读 · 0 评论 -
elementUI验证数字，input校验数字类型
使用elementUI，想验证数字，对数字进行判断，试了很多方法，终于写出来了，自定义验证规则即可。上代码：<template> <div class="formBox"> <div class="infos"> <div class="infoBox"> <el-form :model="numberValidateForm" ref="numberValid原创 2020-12-22 15:25:43 · 4727 阅读 · 0 评论 -
[Vue warn]: Property or method “amount“ is not defined on the instance but referenced during render.
vue项目中，有个input，使用elementUI :html代码：<el-form-item label="数量" prop="amount" :rules="amount"> <el-input type="number" v-model.number="amount" autocomplete="off" placeholder="请输入数量"原创 2020-12-16 10:11:23 · 891 阅读 · 0 评论 -
子组件向父组件传数据使用自定义事件
直接上代码：props用于父组件向子组件传参，子组件传递数据或事件通过自定义事件来完成。（v-on不仅用于监听DOM事件，也可以用于组件间的自定义事件。）自定义事件流程：在子组件中，this.$emit(事件名称，参数)触发时间，在父组件中，使用v-on监听子组件的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view原创 2020-12-08 11:36:02 · 596 阅读 · 0 评论 -
vue父子组件传参使用props
父子组件传递参数，使用props<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件通讯</title> <script src="https://原创 2020-12-07 17:44:07 · 620 阅读 · 0 评论 -
vue组件中的data写法为什么是函数，而非data:{}？
组件中的data为何写法不同？是函数？原因：因组件的复用，每一个组件实例都需要有自己的状态，是不能相互影响的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件中是否可以访问d原创 2020-12-04 17:35:46 · 416 阅读 · 0 评论 -
vue组件中是否可以访问实例data中数据？
上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件中是否可以访问实例data中数据？不可以！</title> <script src="htt原创 2020-12-01 18:02:18 · 955 阅读 · 0 评论 -
elementUI中的tooltip和clipboard使用
template中写：<el-tooltip class="item" effect="dark" placement="bottom-start" > <div slot="content"> 需先下载客户端 <br /> <a class="downloadUrl" href="javascript:void 0" :data-clipboard-text="downloadurl" @mouseenter="copyDownloadU原创 2020-12-01 15:05:12 · 835 阅读 · 0 评论 -
vue中v-model 指令实现双向绑定原理
v-model 可以用在input中也可以用在textarea中 。包含两个指令：一个v-bind,把message的值时时放到value中，另一个v-on,给当前元素绑定input事件，将event.target.value赋值给message<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=原创 2020-11-17 09:33:21 · 7343 阅读 · 1 评论 -
css超出文字用省略号表示
css代码//css.name{ width: 62px; display: inline-block; font-family: PingFangSC; color: #F7F6FD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }//html: 数据v-for遍历出来的原创 2020-10-30 11:30:24 · 737 阅读 · 0 评论 -
vue遍历数组的demo
li 有相同的样式，现在想点击某一项的时候，可以颜色变成红色，表示选中的某一项。用到v-for，还有一个中间变量，进行对比代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2020-10-28 15:38:10 · 404 阅读 · 0 评论 -
在vue中，数组的方法，数据会响应式
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组方法中，数据会响应式</title> <script src="https://cdn.原创 2020-10-28 14:44:30 · 327 阅读 · 0 评论 -
v-for中的:key使用
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录切换和key属性的简单介绍</title> <script src="https://cdn.原创 2020-10-15 17:15:50 · 308 阅读 · 0 评论 -
v-for遍历数组和对象
直接放代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue遍历-v-for</title> <script src="https://cdn.js原创 2020-10-15 16:21:19 · 435 阅读 · 0 评论 -
vue中v-show和v-if的对比
结论： 开发中，v-if和v-show选用哪个：若元素切换频率过高时，使用v-show，若只有一次切换的时候，选用v-if若判断的条件为后台返回数据，大部分使用v-if直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-10-15 15:28:59 · 158 阅读 · 0 评论 -
切换登录例子及问题
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录切换</title> <script src="https://cdn.jsdelivr原创 2020-10-15 15:16:07 · 133 阅读 · 0 评论 -
vue条件指令
条件指令：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue条件指令</title> <script src="https://cdn.jsdeli原创 2020-10-15 14:43:00 · 294 阅读 · 0 评论 -
v-on事件绑定及事件修饰符
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-on事件绑定</title> <script src="https://cdn.jsde原创 2020-09-30 17:39:18 · 311 阅读 · 0 评论 -
vue的computed与methods的点点区别
方法调用多次时，会执行多次，但计算属性有缓存，计算属性相关的值若不发生改变，计算属性只会执行一次，如果修改值的话，也是只执行一次。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2020-09-29 15:23:37 · 144 阅读 · 0 评论 -
计算属性的复杂使用
复杂一点的计算属性操作：<template> <div id="computedBox"> <!-- 使用拼接的方法，可读性不佳，多个的话写起来繁琐 --> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 可以调用方法显示，不过不够简洁 -->原创 2020-09-27 15:29:18 · 202 阅读 · 0 评论 -
computed计算属性使用
计算属性：代码：<template> <div id="computedBox"> <!-- 使用拼接的方法，可读性不佳，多个的话写起来繁琐 --> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 可以调用方法显示，不过不够简洁 -->原创 2020-09-25 17:02:50 · 211 阅读 · 0 评论 -
v-bind:style
v-bind:style的使用：代码：<template> <div id="eg"> <p>v-bind绑定style:封装组件时， 公共组件可以绑定值，使用的人根据自己要用的颜色样式，传值。 来达到不同的效果。</p> <!-- <h2 :style="key(属性值，如font-size):value(属性值，如40px)">{{msg}}</h2> -原创 2020-09-25 16:35:21 · 406 阅读 · 0 评论 -
v-bind绑定使用（绑定class）
测试代码：<template> <div class="hello"> <h3>v-bind使用</h3> <p>一般的显示</p> <a href="http://www.baidu.com">去百度</a> <img src="https://img-blog.csdnimg.cn/images/-402845201200901125411855.png原创 2020-09-25 15:46:20 · 335 阅读 · 0 评论 -
vue 插值操作
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：Mastache 胡子语法（双大括号语法）,直接用{{}},将data中的值写入页面中<div id="app"> {{msg}}</div><script> const app = new Vue({ el:'#app', data:{ msg:'nihao' } }) </script>v原创 2020-09-23 17:51:06 · 478 阅读 · 0 评论 -
[Vue warn]: Property or method “throttle“ is not defined on the instance but referenced during rende
在开发的过程中，用到了节流，引入公共的节流，初始调用如下（报错了…）。template中：<button class="btn" @click="throttle(Submit(),500,2)" :disabled="!normalUse">创建</button>JS文件只是引入：import {throttle} from '../../../../utils/index'以上代码，执行后的结果：vconsole.min.js?aac1:10 [Vue warn]原创 2020-09-03 14:51:37 · 2237 阅读 · 0 评论 -
使用vue和electron进行桌面应用开发
使用vue和electron进行桌面应用开发， electron官网 ，面对需求，研究学习了两者的联合使用vue，在前端领域比较火，轻量级的单页面应用框架，上手较angular,react会容易一些，而且vue-cli可以快速的新建一个工程。Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，类似于我们电脑中的...原创 2020-08-14 14:06:38 · 1047 阅读 · 0 评论 -
用elementUI写form表单，输入框获取焦点时给边框加颜色
原理上直接修改.el-input__inner:focus{border-color:#4D7CFE}，但我的样式继承了，多处使用，所以加了scoped,使用了穿透，就可以了/deep/.el-input__inner:focus{ border:1px solid #4D7CFE; }原创 2020-08-12 16:34:58 · 7148 阅读 · 2 评论 -
vue项目，使用elementUI，修改样式，不生效
由于系统颜色的不同，想单独修改一个组件中的颜色及样式，但是不生效，看到好多人说，可以给个父级，写的是form表单，所以给他包了个div,可是还是不生效，因为层级不够！！！所以，解决方案是：使用F12，找到要修改的元素，使用/deep/，进行穿透，里面的important，根据自己情况使用即可。<style lang="scss" scoped>/deep/.el-form-item__label { height: 23px; font-size: 17p原创 2020-08-07 09:46:07 · 4334 阅读 · 0 评论 -
vue学习-2-组件及组件通讯
组件好处：可复用 可以提高开发效率方便后期的维护和修改可以减少渲染全局组件 && 局部组件全局组件：注册全局组件 ，可以用横杠也可用驼峰，如myButton / my-button，但使用时，只支持横杠Vue.component('my-button', { template: '<div>{{msg}}</div>', //template设置组件中的内容 data() { //组件中的data是个函数，它返回对象，与实例中原创 2020-06-26 12:48:59 · 146 阅读 · 1 评论