![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
TwoBE9876
前端新手,有错误请帮忙指出,谢谢(大部分内容应该都是百度所得,有的没写允许转载,我只是写在这方便找,大部分也都是写的转载,应该不侵犯啥吧,反正也没人看我的hh)
展开
-
HTML界面利用 http-vue-loader.js以组件方式引入vue文件
http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File,无需透过 nodeJS 环境编译,也不需要 Build 的步骤。在index的 mounted 中无法访问引入的组件 但是在 methods 通过事件可以操作 组件的数据。用法很简单,首先在网页上载入 Vue 与 http-vue-loader,如下。其他vue文件引入 第一个第一个组件 也可以生效。转载 2023-05-04 15:18:27 · 944 阅读 · 0 评论 -
httpVueLoader使用示例(用于cdn引入vue2后在html文件中使用组件开发)
用于cdn引入vue2后在html文件中使用组件开发原创 2023-05-04 14:40:16 · 1704 阅读 · 2 评论 -
vue 仿照抖音视频效果(滑动切换)vant2
同时他也在 github 上发现一位大佬做的这种效果也特别好。那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~这是大佬的主要代码,感兴趣的小伙伴可以去看看。看个效果图,再决定学不学。转载 2023-03-15 15:51:17 · 2863 阅读 · 0 评论 -
vue页面刚加载展示插值表达式(单纯使用html)
vue页面刚加载展示插值表达式代码格式原创 2023-03-07 10:14:04 · 303 阅读 · 0 评论 -
uniapp使用vuex
uniapp中vuex的使用方法包括一点点示例原创 2022-09-14 17:39:10 · 6929 阅读 · 0 评论 -
fromData上传文件方法记录
upload(item) { let formData = new FormData(); formData.append('file', item.file);//调用上传接口 uploadImage(formData) .then(res => { }); }) .catch(err => { this.$message.error('上传失败.原创 2022-05-19 11:50:05 · 254 阅读 · 0 评论 -
使用js做水印效果,jquery<转载>
/* * @description添加水印 * @param {Obj} settings水印配置参数 */ function waterMark(markElement) { $('#' + markElement.waterMarkId).find('.markElement').remove(); var settings = { waterMarkId:"t1", waterMarkContent:"我是水印内容", waterMarkX:-10, waterMark.转载 2022-05-18 09:34:17 · 473 阅读 · 0 评论 -
vue简单实现多功能弹幕(比上一个好)
插件地址GitHub - hellodigua/vue-danmaku: 基于Vue.js的弹幕交互组件https://github.com/hellodigua/vue-danmakugit地址https://github.com/hellodigua/vue-danmaku.githttps://github.com/hellodigua/vue-danmaku.git具体操作demo基本都有,弹幕也是插槽,自己可以改样式。附上我的样式图片。仅需安装sass...原创 2022-05-07 09:50:53 · 774 阅读 · 1 评论 -
vue如何实现弹幕功能
这篇文章将为大家详细讲解有关vue如何实现弹幕功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。(1)效果如上图所示的效果,这里我们使用vue 制作。(2)使用技术 vue + vue-baberrage1.安装:npm install vue-baberrage2.引入方式一:importVuefrom'vue' import{vueBaberrage}from'vue-baberrage' Vue....转载 2022-04-28 13:58:10 · 6340 阅读 · 3 评论 -
PC 打开 vue h5移动端 页面 不变形《转载》
有时候,我们想让pc打开适配手机的h5,并且不变形,在不使用媒体查询的情况下,我们可以使用以下方式:实现功能如下pc打开周围留空白,居中显示当浏览器切换为手机模式/手机打开网址时会变为手机模式以下为主要代码public 文件夹下 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <script as..转载 2023-05-01 12:49:01 · 1299 阅读 · 0 评论 -
vue 监听刷新事件如何写?
在网上找了很多都不能用,用下方这串代码,亲测有用,直接放在mounted执行即可:mounted() { window.addEventListener("load", () => { //写入你想要执行的代码 }); },转载 2022-04-14 09:24:06 · 575 阅读 · 0 评论 -
Vue移动端项目禁止双击放大和双手拉大放大
一,找到vue中的index.html文件1.把之前的原有的<meta name='viewport' content='width=device-width,initial-scale=1.0'>2.替换成现在的 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />另外移动端尽量用路由换页面而不是原创 2022-04-13 16:40:34 · 1740 阅读 · 0 评论 -
vue2移动端nprogress和postcss-px2rem插件使用
1、nprogress:就是页面顶部有进度条和loading,让移动端体验更好先看效果npm install --save nprogress直接调用start()或者done()来控制进度条。其他具体看官网:nprogress的简介及使用教程 - Made with Vuejsrouter.jsimport NProgress from 'nprogress'router.beforeEach(async (to, from, next) => {//...原创 2022-04-13 15:35:10 · 1031 阅读 · 0 评论 -
移动端vConsole使用方法(附带vue使用方法)
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole图片我截图了一部分,数据都是假的,大家就看vConsole的效果就好。那么,如果将console.log应用到移动端呢?需要借助第三方插件:vConsole第一种用法:引入js文件下载最新版https://github.com/Tencent/vConsole/releases/latest.转载 2022-04-13 11:47:08 · 10539 阅读 · 0 评论 -
Vant Uploader 上传多张图片设置status
Uploader多张上传,使用file.status设置上传状态1、页面结构<van-uploader :before-read="beforeRead" :after-read="afterRead" :before-delete="deletImg" :max-count="maxSize" v-model="fileList" multiple> <van-icon name="plus" /></van-uploader>2、前置条件放到be转载 2022-04-12 15:48:33 · 1165 阅读 · 0 评论 -
vue新建项目连接后台代码记录
project.config.js (设置不同环境的路径供引用)/** 本页面参数修改后,记得重新启动项目再查看* */const config = { PROJECT_PLATFORM: '', PROJECT_NAME: '', // 项目名称,浏览器顶部的title DEFINE_ENV: process.env.VUE_APP_FLAG, // 四个环境,分别是开发、测试、生产、灰度 DEV: { PROJECT_VERSION: '0.1.0', // 项目原创 2022-04-06 08:38:41 · 657 阅读 · 0 评论 -
vue+input file上传图片并以圆形展示代码分享(升级版增加遮罩)
html<div class="upload"> <img id="img" width="100%" height="90%" :src="oneUrl" alt="头像"> <input type="file" name="file" id="file" @change="getImgURL"></div>css.upload{ width: 80px; height: 80px; ..原创 2022-04-01 14:25:56 · 1621 阅读 · 0 评论 -
vue前端导出word文件
引用插件安装npm i docxtemplater@3.17.6npm i pizzip npm i jszip-utils@0.1.0 npm i jszip@2.6.1 npm i file-saver@2.0.2npm i open-docxtemplater-image-module 引入插件import Docxtemplater from 'docxtemplater'import PizZip from 'pizzip'import JSZipUtils转载 2022-03-28 17:23:32 · 1512 阅读 · 1 评论 -
el-table和el-scrollbar滚动条操作方法(记得添加ref),样式问题记录
this.$refs.elScrollBar.wrap.scrollTop = 0 // 想滚到哪个高度,就写多少// 每次加载数据后将x轴滚动条归零 this.$refs.elTable.bodyWrapper.scrollLeft = 0// 每次加载数据后将y轴滚动条归零 this.$refs.elTable.bodyWrapper.scrollTop = 0...原创 2022-03-24 17:20:08 · 2798 阅读 · 0 评论 -
echarts词云图绘制与踩坑记录(vue)(算半原创)
由于项目需求,需要做一个词云图,然后百度了使用方法(官网示例好像没有词云图)下面是实现的步骤和代码安装依赖并在main中导入npm install echartsnpm install echarts-wordcloudimport * as echarts from 'echarts' // 引入EchartsVue.prototype.$echarts = echarts // echarts挂载到原型创建组件(记得加高度)<template> ..转载 2022-03-11 10:06:21 · 925 阅读 · 1 评论 -
【blob文件下载】及【路由跳转传参】代码记录
// 使用Id下载导出数据export function getDownload (data) { return request({ method: 'get', url: `/download/${data}`, responseType: 'blob' })}// 下载数据 getTeacherDownload () { //浏览器下载 // window.open(getTeacherDownload + this.opDat.原创 2022-03-09 10:25:53 · 365 阅读 · 0 评论 -
VUE纯前端导出excel表格功能《转载》
插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能。使用方法1. 安装依赖npm install vue-json-excel2. 引入组件a. 全局引入import Vue from 'vue'import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)b. 局部引入import JsonExcel from "vue-json-转载 2022-03-04 16:45:31 · 1171 阅读 · 0 评论 -
使用Vue搭建前端项目架构《转载》
一、创建Vue项目基础框架1.使用vue cli脚手架创建项目的基础框架具体vue的配置如下:2.配置.gitignore文件=>在提交到GitHub时不要提交node modules文件二、创建GitHub仓库1.在GitHub上创建仓库2.clone仓库到本地3.将上面使用vue cli创建的项目基础框架文件复制到上面仓库目录中4.选择性push代码(也可以后面的工作完成后再push)三、完善项目架构前期工作:1.安装axios(向后台异步请求.转载 2022-03-03 16:33:12 · 3090 阅读 · 0 评论 -
vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
只需要三个步骤即可实现根据环境不同而自动改变请求域名的需求,不需手动更改通过改变process.env.NODE_ENV值区分打包环境,但是webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样;为了消除这种差异,可以使用其他变量比如process.env.VUE_APP_TITLE来区分环境1. package.json中打包命令:{ "scripts": { "serve": "vue-cli-ser转载 2021-10-14 19:48:03 · 684 阅读 · 0 评论