vue
Study_Live_Sun
这个作者很懒,什么都没留下…
展开
-
智能问答页面代码
智能问答页面原创 2022-11-14 10:44:00 · 893 阅读 · 0 评论 -
vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
1、安装包2、页面上传方法功能vue页面 <input v-show="false" id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value="">对应方法 getVideo (event) { if (this.player) { this.pl..原创 2021-07-27 13:41:57 · 11413 阅读 · 25 评论 -
wangeditor富文本编辑器集成vod超级播放器
<template lang="html"> <div class="editor" ><!-- <SelectFile></SelectFile>--> <el-dialog append-to-body title="选择要插入的文件" :visible.sync="dialogVisible" width="60%"> <SelectFile .原创 2021-06-29 13:21:08 · 644 阅读 · 0 评论 -
vue项目播放音频实例
一次只播放一个音频,可以切换,播放停止自动恢复<template> <div> <div v-for="item in list" :key="item.name"> <div>{{item.name}}</div> <div @click="play(item)">play-{{item.status}}</div> <div @click="pause(item原创 2021-05-10 22:18:41 · 648 阅读 · 0 评论 -
使用vue-video-player播放视频
1、npm安装vue-video-playervideojs-contrib-hls2、在main.js中引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-the原创 2021-03-21 15:31:00 · 1070 阅读 · 0 评论 -
vue项目优化策略
一、vue项目优化策略1、生成打包报告2、第三方库启动CDN3、element-ui 组件按需加载4、路由懒加载5、首页内容定制优化1:通过nprogress添加进度条效果安装插件:npm install --save nprogress使用方式: NProgress.start() NProgress.done()在main.js中导入NProgressimport NProgress from 'nprogress'import...原创 2021-02-17 21:28:27 · 458 阅读 · 0 评论 -
vuecli3,刷新保持state,记录用户登录状态,路由拦截
1、刷新保持state在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时读取sessionStorage里的状态信息if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))}.原创 2020-11-20 11:04:28 · 680 阅读 · 0 评论 -
element-ui NavMenut组件 与 Tabs组件 联动
效果所需工具vuex -注:如果对vuex不熟悉的同学参考文章更新记录2020/4/15 新增sessionStorage 解决刷新后消失问题思路封装NavMenut组件组件及Tabs组件 用 vuex 作为组件之间传值 router-view 放入 Tabs组件内 使用使用 Array.prototype.some()方法 为了防止用户多次点击添加 做一个判断的值 用 Array.prototype.some() 实现 Array.prototype.i..转载 2020-09-16 16:36:14 · 767 阅读 · 0 评论 -
vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程
前言在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以,在工程开始的来封装一下axios,保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios,封装请求,封装公共的api,页面如何调用请求。正文一、vue项目的前期配置新建vue项目,下载axios,并在main.js中导入axiosnpm i axios -S//main.jsimport axios from "axios";二、配置c...转载 2020-09-14 16:33:48 · 3776 阅读 · 1 评论 -
vue cli3请求封装(结合vant ui 配置项目提示,赞!)
src文件夹下新建tools工具文件夹新建如下js文件:baseURL.js(分环境设置请求基准地址)https.js(请求封装)mixin.js(配置提示信息等公共方法)baseURL.js(分环境设置基准地址详细步骤:https://blog.csdn.net/qq_46003166/article/details/103906287)https.js(结合实际后台约定 进行配置)import axios from "axios";import baseUrl from "./se转载 2020-09-14 14:04:57 · 605 阅读 · 0 评论 -
在vue中使用过滤器对日期进行格式化,解决vue 动态拼接地址,使用本地的图片不显示
1.新建date.js文件// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==>...原创 2020-04-14 09:13:07 · 593 阅读 · 0 评论 -
【vue】解决项目刷新,state消失的问题、跨域问题,router-link的to上面也可以是一个对象
在使用vuex的过程中会发现只要一刷新,state里的数据就会清空,因为vue的数据是保存在内存中,所以需要状态持久化的解决方案,一般大家会推荐使用html5自带的localStorage,也可以使用vuex专用的vuex-persistedstate,安装:npm i --save vuex-persistedstate使用:只需要在store主体文件内引入即可:import...原创 2020-04-10 21:09:41 · 685 阅读 · 0 评论 -
【Vue.js】组件之间互相调用彼此的方法,子调父,父调子
概述兄弟组件之间的通讯有一个方法是通过父组件进行交互,那么解决的思路就是子组件调用父组件的方法,然后父组件调用另一个子组件的方法,这样就实现了兄弟组件的交互功能。父组件调用子组件方法首先被父组件调用的子组件方法定义一下 appendToTree({param}){ console.log('这是子组件tree的方法')}, 父组件parent.vue中的子组件...原创 2020-04-07 10:24:02 · 680 阅读 · 0 评论 -
vue学习基础(10)vuex状态管理,store.js
安装vue add vuex项目自动修改store.jsstate:存放要用到的一些数据mutations:触发一些方法获得数据方式一简写的方法,引入一些东西import {mapState} from 'vuex'方式三:名字一致,简写数组形式改变数据mutations方法三种调用方法getters对stat...原创 2020-02-09 20:38:03 · 193 阅读 · 0 评论 -
vue学习基础(9)过滤器filters
转大写配置filters对数据进行操作为什么要使用过滤器,可以设置全局的过滤器,放到main.js中过滤器还可以传参原创 2020-02-09 19:31:53 · 152 阅读 · 0 评论 -
vue学习基础(8)路由的钩子函数,全局钩子函数、局部钩子函数
点击路由的时候触发一些函数、触发一些事件路由的全局钩子函数router.beforeEach();路由跳转前的钩子函数router.afterEach();//路由跳转后的钩子函数路由的局部构造函数router.js路由上只有一个beforeEnter(to,from,next)钩子函数component页面,还有钩子函数路由钩子函数执行顺序...原创 2020-02-09 18:09:52 · 1010 阅读 · 0 评论 -
vue学习基础(7)路由
一、来源main.js通过router实例化时传递的router对象。其中router对象来源于import引入router.jsrouter.js1、首先引入vue-router2、导出router的实例化对象三部分:mode为使用什么方式切换路由mode:‘history’//html5的history api或 mode:'hash'//以哈希...原创 2020-02-06 22:05:28 · 992 阅读 · 0 评论 -
vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存
一、生命周期如下图,所有红色的函数为钩子函数二、slot插槽的使用基本用法如下:父组件在子组件中插入内容子组件,通过<slot>标签显示复杂使用在App.vue中使用slot进行占位、子组件中使用name来进行区分三、动态组件和缓存,component,keep-alive子组件子组件 FormHelpe...原创 2020-02-06 20:14:59 · 504 阅读 · 0 评论 -
vue学习基础(5)组件属性传值/传值和传引用、注册事件
一、组件属性传值从父组件把值传递给子组件1、父组件绑定内容。传递父组件data中的参数值2、子组件获得属性值子组件接收值的其他写法二、传值和传引用属性传值,值有两种情况:1、传值 2、传引用(对象、数组)Users.vue里面操作对象的删除,template里面增加一个删除按钮,调用删除方法。App.vue里面使用两次该组件效果图如下,点...原创 2020-02-05 22:12:31 · 437 阅读 · 0 评论 -
vue学习基础(4)组件CSS样式,嵌套多个组件
一、VueCli3.x小白入门-组件CSS样式使用scoped属性,设置局部样式二、嵌套多个组件demo页面效果原创 2020-02-05 21:47:22 · 2484 阅读 · 0 评论 -
vue学习基础(3) 组件嵌套,全局注册组件、局部注册组件
一、VueCli3.x小白入门-组件嵌套1、父组件、子组件父组件App.vue,在跟组件中使用子组件。全局组件在main.js中进行注册,直接在main.js中进行组件引入就创建了全局组件局部组件如下:调用过程1、引入组件 2、注册组件 3、使用组件遍历对象,绑定key值<template> <div id="app">...原创 2020-02-05 21:09:00 · 673 阅读 · 0 评论 -
vue学习基础(2)脚手架安装、项目创建、介绍目录
1、VueCli3.x小白入门-安装脚手架工作中很少使用cdn的形式开发,一般都使用脚手架开发(1)安装node.js参考网址https://nodejs.org/zh-cn/,下载当前发布版进行安装安装完成后执行node -vnpm -vnpmjs.com有各式各样的插件脚手架的好处:1、脚手架可以大大的提高开发效率;2、可使用最主流的ecmascri...原创 2020-02-05 15:31:35 · 365 阅读 · 0 评论 -
vue学习基础(1)
1、使用vscode编辑器需要安装live server(热更新) 和 vetur(vue关键字高亮)插件,配置setting如下,对所写的代码进行格式化{ "editor.formatOnType":true, "editor.formatOnSave":true}2、el和data的使用3、methods方法,使用es6的表达形式methods:{ ...原创 2020-02-04 16:44:26 · 461 阅读 · 0 评论 -
[webAPP]记录几款比较好用的vue 移动端的ui框架
原[webAPP]记录几款比较好用的vue 移动端的ui框架2019年04月27日 15:54:03刘玉刚阅读数:1550版权声明:未经博主允许不得转载(https://github.com/ai-word) https://blog.csdn.net/BaiHuaXiu123/article/details/89602591有时在做项目时,不同场景的项目既要有网站,又要有手机...转载 2019-06-06 16:40:09 · 6954 阅读 · 0 评论