vue
oldfour_0830_9674
这个作者很懒,什么都没留下…
展开
-
vue实现简单的瀑布流布局
<template> <div class="waterfull"> <h2>瀑布流布局</h2> <div class="v-waterfall-content" id="v-waterfall"> <div v-for="(img, index) in waterfallList" :key="index" class="v-waterfall-item"原创 2022-02-22 15:41:15 · 1146 阅读 · 2 评论 -
日常记录 vue3如何注册绑定原型链
Vue.prototype 替换为 config.globalProperties在 Vue 2 中, Vue.prototype 通常用于添加所有组件都能访问的 property。在 Vue 3 等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分。// 之前 - Vue 2Vue.prototype.$http = () => {}// 之后 - Vue 3const app = createApp({})app.con原创 2021-11-27 13:55:14 · 1081 阅读 · 0 评论 -
vue实现过滤并且替换敏感词,将长字符串转化成...的形式,将秒转化成XX:XX的形式
使用vue的全局过滤敏感词// 铭感词过滤export const judgeBadWord = (str) => { const badWord = JSON.parse(sessionStorage.getItem('list')) const newArr = [] badWord.forEach(item => { newArr.push( { sensitiveWord: item.sensitiveWord, rep原创 2021-04-02 11:36:29 · 1891 阅读 · 0 评论 -
使用vue-cropper实时预览发现的坑
实时预览:https://blog.csdn.net/wexin_37276427/article/details/105354171在项目中怎么都实现不了实时预览,一直报了这个错误,怎么解决也没解决掉。然后后面才意识到,原来我在做word导出的时候也遇见过。主要的原因是项目中使用mock.js,导致fs模块不能正常使用。去main.js把mock注释掉就可以了回复正常了。...原创 2021-01-30 14:16:37 · 1659 阅读 · 0 评论 -
记录:在vue中组件交互的各种方法,父传子,子传父,父调子方法,子调用父方法。
父传子自定义属性,传递静态或动态 Prop父组件 <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></child> </div> </template> <script>原创 2021-01-25 18:12:30 · 146 阅读 · 0 评论 -
vue中导出图表数据成为word文档(含echats)
安装依赖 // 下载 npm install docxtemplater pizzip --save npm install jszip-utils --save npm install jszip --save npm install file-saver --save //在需要导出Word的vue文件导入 import JSZipUtils from 'jszip-utils'; import docxtemplater from 'docxtemplater'; i原创 2021-01-05 16:51:11 · 1145 阅读 · 3 评论 -
(记)video-player在页面的使用
安装依赖npm i vue-video-playermain入口注册// videoimport VideoPlayer from 'vue-video-player'import 'video.js/dist/video-js.css'import 'vue-video-player/src/custom-theme.css'import 'videojs-flash' //播放直播流媒体Vue.use(VideoPlayer)页面使用html结构 <div :style原创 2020-12-30 11:10:13 · 325 阅读 · 0 评论 -
导出element表格被勾选的数据
安装依赖 npm install -S file-saver npm install -S xlsx npm install -D script-loader在src目录下新建文件夹,放Blob.js和Export2Excel.js。在页面使用1.找到导出事件 handleDownload () { if (this.checkData.length === 0) { this.$message({ message: '请至少选择一条需要原创 2020-12-30 10:51:46 · 464 阅读 · 0 评论 -
js中如何去给一个对象通过后台数据动态添加键和键值
运截图,直接上代码方法比较笨,但能够实现。 const { data } = res this.alertData = data const obj = new Object() data.map(item => { obj[item.name] = item.count this.alertType = obj })通过 new object去创建一个新的对象,通过 obj[原创 2020-12-28 17:21:51 · 1251 阅读 · 0 评论 -
如何动态的绑定style在vue中
:style="{ top: item.top + 'px', left: item.left + 'px', transform: item.deg, }"要点:注意绑定的是一个对象,在我们使用到css一写特有写法时,要注意到这一个问题。列如:使用transform属性,动态绑定一个旋转角度,则我们需要写成这样的格式:{type: ‘red’,id: 0,left: 81,top: .原创 2020-12-23 15:53:32 · 1002 阅读 · 0 评论 -
在vue中使用SockJS和stomp让websocket更加简单
// websocket initWebSocket () { this.connect() const self = this // 断开重连机制,尝试发送消息,捕获异常发生时重连 this.timer = setInterval(() => { try { console.log('成功') } catch (err) { console.log('断线了: '...原创 2020-12-23 15:46:46 · 2189 阅读 · 5 评论 -
echats大规模面积图在vue中
// 大面积图 initCharArea (element, title, titleArr, numberArr) { // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(element) // 绘制图表 myChart.setOption({ title: { text: '', x: '10px', co...原创 2020-12-23 15:40:43 · 198 阅读 · 0 评论 -
echats在vue2.0的使用
安装依赖npm install echarts -S引入echats包const echarts = require(‘echarts’)初始化图表饼图 /* element:节点id title:表单姓名 titleArr:x轴刻度 dataArr:表格数据 */ // 初始化饼图 initChartPie (element, title, titleArr, dataArr, type) { // 基于准备好的dom,初始化echarts实例原创 2020-12-23 15:18:29 · 151 阅读 · 0 评论 -
记:解决We‘re sorry but ... doesn‘t work properly without JavaScript enabled. Please enable it to contin
网上的解决方案有很多1、mode类型 前端修改方式:将mode类型由history改成hash;后端修改方式:mode还是history,后端配置nginx,设置映射关系 2、publicpath路径问题publicpath需要绝对路径’/’ 3、本地开发,服务代理信息 检查代理信息是否有误,是否写有多个代理但都没能解决,最后我发现不要用loacthost:8080,改成本机地址后就解决了。...原创 2020-12-01 02:13:03 · 30695 阅读 · 2 评论 -
Vue2.x中常见的面试题(2)
请详细说下你对vue生命周期的理解?||vue生命周期的作用是什么?它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。什么是vue生命周期?Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。第一次页面加载会触发哪几个钩子?会触发 下面这几个beforeCreate, created, beforeMount, mounted 。DOM 渲染在 哪原创 2020-11-13 20:46:09 · 313 阅读 · 0 评论 -
我在vue中过滤器的使用
作用:转换数据使用: | 管道符全局过滤器 Vue.filter("过滤器名称",(过滤对象,你传的参数)=>{ //业务逻辑处理 return ''//return 的结果就是过滤后的结果 })局部过滤器 new Vue({ el:"#app", filters:{ filterA(过滤对象,你传的参数){ //业务逻辑处理原创 2020-11-13 20:13:47 · 87 阅读 · 0 评论 -
vue2.x中的父传子
父组件通过自定义属性来传值,子组件通过props来接收。三个注意事项:props接收的数据不允许修改,修改就要报错我们可以在子组件data定义一个属性,专门用来接收父组件传过来的数据,在mounted里面赋值,但是由于mounted执行一次,所以这种方式,初始值是一样的,后面父组件变,子组件不变;子组件变,父组件不变如果你想实现父变子变,子变父变,那么就传递一个json代码案例<!DOCTYPE html><html lang="en"><head&g原创 2020-11-13 01:41:20 · 237 阅读 · 0 评论 -
vue常见面试(1)
v-if和v-show的区别?v-if是通过控制节点来控制元素的显示,v-show是通过样式来实现元素的显示,也就是display:none;v-if和v-else可以一起使用的,要使用v-else必须要有v-ifv-if如果值为false,那么它就不加载,但v-show不是,v-if是惰性加载使用场景不同,v-if通常用在元素并不是那么频繁切换的元素上,v-show则反之。原因,频繁的消耗节点,不利网站性能。vue中常见的指令普通数据绑定:v-html,v-text,{{}}区别:只有原创 2020-11-12 19:44:22 · 119 阅读 · 0 评论 -
vue中的watch和computed
watch作用:监听属性的改变3.1 监听new Vue({watch:{name(newV,oldVlue){//逻辑处理}}})3.2 深度监听 json arr注意事项:尽量不要用,深度监听会造成页面卡顿。user: {handler() {console.log(“user changed”)},deep:true},为什么有的时候需要深度监听呢?在我们监听的数据是一个引用类型的数据的时候就很有可能监听不到数据的变化,因为我们引用的地址没有发生变化。c原创 2020-11-12 17:14:13 · 204 阅读 · 0 评论 -
vue2.x的事件系统
带参和不带参如果要传参数,必须写(),如不传参数,爱写不写不写(),默认参数就是event写() 显式传参,event名字叫:$event常用的修饰符阻止默认事件 .prevent阻止事件冒泡 .stop一次性事件 .once自身事件 .self按键事件 .enter代码片段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2020-11-12 14:18:34 · 207 阅读 · 0 评论 -
vue2.x在表单中的使用
<div id="app"> <div> 账号:<input type="text" v-model="user.name"> </div> <div> 密码:<input type="password" v-model="user.pass"> </div> <div> .原创 2020-11-12 13:57:40 · 177 阅读 · 0 评论 -
vue2.x的基础指令(绑定数据,绑定属性,条件渲染,列表渲染和事件绑定)
概念渐进式JavaScript 框架兼容:Vue 不支持 IE8 及以下版本两个核心系统:数据驱动 组件系统基础指令绑定数据: 非表单元素:div h1 p innerHTML 模板语法:{{}} 方便 不能解析标签 v-html 能解析标签 v-text 不方便 不能解析标签 解决首屏闪屏问题 表单元素:input select textarea value v-model原创 2020-11-12 02:21:14 · 377 阅读 · 0 评论 -
vue cli3.0代码格式化
方法1:关闭掉代码检查找到.eslintrc.js文件 extends: [ 'plugin:vue/essential', '@vue/standard'//注释掉,就不会代码检查问题了 ],方法2:在vscode中的格式化代码配中加入自己代码的样式先声明:这个方法也是网上找的,但不记得是谁写的了,抱歉了。步骤有点繁琐,我就直接放截图了。点击文件,找到首选项,点击设置。点击第一个,进入settings.json文件。复制下面代码{ // vscode默认启原创 2020-07-01 09:59:43 · 794 阅读 · 0 评论 -
vue ls 一些使用
vue-ls使用安装npmnpm install vue-ls --saveyarnyarn add vue-ls自己的理解就是一个封装的本地存储的方法,可以设置过期时间。使用在main.js引入import Storage from 'vue-ls'const options = { namespace: '', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local' // 存储名称: ses原创 2020-06-10 09:34:54 · 1656 阅读 · 0 评论 -
vue3.0脚手架项目构建
package.json项目依赖根据个人,或者项目的需求安装好用的第三方依赖。 "dependencies": { "ant-design-vue": "^1.5.6",//ui框架 "axios": "^0.19.2", "core-js": "^3.6.4", "hashids": "^2.2.1",//路由加密 "v-viewer": "^1.5.1",//图片预览 "vue": "^2.6.11", "vue-lazyload": "^1.原创 2020-09-02 10:13:39 · 282 阅读 · 0 评论 -
vue定时器页面中的销毁
方法1: data () { return { timer: null } }, mouted(){ this.timer = setInterval (()=>{ console.log(1); },500) }, beforeDestroy () { clearInterval(this.timer) ...原创 2020-09-03 16:18:13 · 1366 阅读 · 0 评论 -
vueMeta的使用
安装vueMetanpm i vue-meta --s-d在main.js入口文件中引入import VueMeta from 'vue-meta'// meta组件引用Vue.use(VueMeta)在页面中使用和data平级 metaInfo () { return { titleTemplate: `%s - ${this.shopDetail.title}`//动态引入 } },...原创 2020-09-02 11:01:58 · 455 阅读 · 0 评论 -
百度掩码和布码在vue中使用
封装方法// 百度广告const bdMixin = { methods: { loadBDAd (l) { const r = window const d = document r._agl = r._agl || [] r._agl.push(['production', l]) var agl = d.createElement('script') agl.type = 'text/javascript'原创 2020-09-03 16:25:27 · 492 阅读 · 0 评论 -
(记)在vue中实现H5页面自定义分享朋友圈
需求:网页分享微信朋友圈,要有小的缩略图。1.使用第三方包,引入微信的JS_SDK"weixin-js-sdk": "^1.6.0"npm i weixin-js-sdk2.封装一个公共方法创建一个wxShare.js/* eslint-disable*/import wx from 'weixin-js-sdk' //微信sdk依赖const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuS.原创 2020-10-23 14:41:56 · 1414 阅读 · 2 评论