vue
关注
分享
扫一扫
qq_39355295
这里是一个前端的小白的基本的学习笔记，记录自己的成长
展开
-
修改vue组件中的样式
开发中需要修改组件的样式：下面是对应的方法，亲测有效，下面是参考链接。详细链接转载 2020-04-27 09:06:55 · 426 阅读 · 0 评论 -
在vue项目中使用md5加密
介绍：MD5:信息-摘要算法，是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式参考网址一般我们把登录和注册信息的密码进行加密1.安装模块 npm install js-md5 -D2.在项目中引入模块import md5 from 'js-md5'3.把你需要加密的信息进行前期处理CalcuMD5 = function (pwd) { ...原创 2020-04-07 08:18:40 · 564 阅读 · 0 评论 -
vue+element-ui中上传文件使用Progress自定义实时更新进度条
使用Upload+Progress实现文件上传进度条实时更新功能，需要借助http-request属性。具体使用方法如下：<el-upload action="#" :file-list="fileList" :on-change="changeData" :http-request="handleRequest" :before-up...转载 2020-03-22 15:50:34 · 12481 阅读 · 1 评论 -
vue使用powerBi
前提：最近开发中需要结合powerBI来使用，需求是在vue中添加powerBi中已经开发好的报表进行展示。第一：vue中安装powerBi模块。1、本次使用的powerBi组件是powerBi官网2、进入对应github中找到安装步骤：powerBi对应的github网址3、安装步骤：**Installation**--根据需要使用对应的方法(1)Install via Nug...原创 2020-03-22 15:39:23 · 4031 阅读 · 7 评论 -
webpackJsonp is not defined
vue-cli 构建的项目，某一天在chrome中打开出现了这个错误！ (+﹏+)~下面是我百度到的解决方法，就没有自己写了。转载 2020-02-22 18:06:33 · 372 阅读 · 1 评论 -
Vue 中Bus使用
前言:在学会父子之间的通信后，下面开始学习兄弟组件之间的通信。1、介绍：使用：兄弟组件之间进行传值；2、安装：npm install vue-bus3、在main.js中引入vue-bus：import Vue from 'vue';import VueBus from 'vue-bus'; Vue.use(VueBus);4、在组件中使用：A组件触发事件：this.$b...转载 2020-02-14 09:28:08 · 362 阅读 · 0 评论 -
webpack配置proxyTable时pathRewrite
1.webpack配置接口地址代理解释：在项目开发中，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问链接，但是我们的接口地址是 http://www.xxx.com/save/post 这样的，我们这样直接使用就会存在跨域的请求，导致接口请求不成功。2.vue中web...原创 2020-01-01 22:49:21 · 2125 阅读 · 0 评论 -
移动端 FastClick--解决ios点击延迟问题
**前提：**本地js定义一个方法，在手机上测试的时候是点击事件，但是在ipad上确实双击事件，查看网上解决方法，发现是因为ios本身就存在延迟问题：下面是我收藏的解决方法：(备注：本次是使用vue开发项目)解决方法文章...转载 2020-01-01 22:36:21 · 539 阅读 · 0 评论 -
vue的props和$emit / 父子组件通信。别看其他人的了，我这个例子清晰，肯定可用的。
参考一下连接：https://www.cnblogs.com/1rookie/p/8430439.html转载 2019-12-30 19:03:55 · 181 阅读 · 0 评论 -
js把局部变量变为全局变量
前提：最近在和APP之间进行交互，其中就包括APP对H5变量和方法的调用功能。作为没有接触过此功能的我，经过一番搜索之后，熟练应用，下面是我操作，本次开发使用VUE框架，所以都是在VUE中的使用方法，当然其他项目自己更改一下还是可以用的。第一：全局变量声明1、未设置全局变量：<body> <button>全局变量声明</button> &...原创 2019-12-30 19:02:25 · 1613 阅读 · 0 评论 -
在vue中使用 dialog 弹窗
使用弹窗进行交互可以提升用户体验度，使页面也变得简洁1、基本演示2、原代码<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sync="dialogVisible" width=...原创 2019-12-10 20:17:29 · 2851 阅读 · 0 评论 -
vue返回上一页面时不刷新
前景：在日常使用的时候，我们经常需要返回上一级页面的时候，不刷新页面，保持页面不变，这里就需要使用以下方法：思路：因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：(1).在App.vue中加入：这里是所有页面切换到地方，下面代码分别对不同的设置，采用不同的渲染方式。<template> <div id="app"&g...转载 2019-12-10 20:03:59 · 13678 阅读 · 2 评论 -
vue2.0 + element UI 中 el-table 数据导出Excel
安装相关依赖npm install --save xlsx file-saver组件里头引入：这里utils.js是我的实现方法的组件import FileSaver from 'file-saver'import XLSX from 'xlsx'1、定义导出按钮：<el-button type="primary" size="medium" v-if="$store.st...原创 2019-10-21 18:35:04 · 1115 阅读 · 0 评论 -
mint ui + vue的基本使用（一）
之前一直使用vue+element ui开发pc端页面，但是这次接触到手机端业务时，基本使用mint ui来开发，从零开始使用，遇到自己想要实现的效果但是不会的时候，一般时自己自行搜索，下面是完成三个基本页面后，自己一些基本小心得，分享一下，便于自己和大家一起学习。1、基本mint ui阶段(1)安装：点开链接即可主要有两种安装方式，这里我们是使用CDN安装，后期会npm安装。方法大同小异。...原创 2019-10-20 20:40:54 · 383 阅读 · 0 评论 -
vue里的全部路由钩子介绍
路由钩子定义：在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化。1、全局路由钩子：每一次页面跳转前后都会执行router.beforeEach((to, from, next) => { //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了 console.log('beforeEach')...原创 2019-09-30 16:21:58 · 1102 阅读 · 0 评论 -
vue生命周期钩子总结
学习vue有一段时间了，之前一直是简单的使用，看来很多生命周期钩子的介绍，但是还是不太理解，直到自己开始真正的开发时，才真正的理解。希望接下来的介绍，大家看完可以真正的掌握，没有掌握也不要紧，毕竟编程时需要自己真正的使用，掌握的...原创 2019-09-29 23:00:30 · 189 阅读 · 0 评论 -
vue监听浏览器窗口的变化，随着窗口变化调整里面table的宽高
在开发中经常可以遇到在不同的浏览器中，加载的图形与自己预期的不同table在手机端中显示滚动框正常，但是当切换到ipad端时，由于height没有随着浏览器的变化而动态变化，就导致表格的滚动框也是不变的，这样就会使得加载的效果不好。下面是我在网上搜索的解决方法：此办法适用于vue开发的项目，在data中设置：1 tableHeight:"500",2 screenHeight:window...转载 2019-03-04 17:52:31 · 2311 阅读 · 0 评论 -
Vue生命周期中mounted和created的区别
https://blog.csdn.net/xdnloveme/article/details/78035065转载 2019-03-04 17:57:14 · 185 阅读 · 0 评论 -
时间选择器datePicker
*****前端实现时间的选择功能，这个不同于传统的手工的代码书写，这里我们可以引用不同的组件，直接实现时间选择功能。这里提供两种功能来实现时间选择。方法一：调用Element-ui 中的DateTimePicker 日期时间选择器组件或者DatePicker 日期选择器组件：http://element-cn.eleme.io/#/zh-CN/component/datetime-picke...转载 2019-03-27 20:10:55 · 1892 阅读 · 0 评论 -
vue中v-if和v-show的区别
学习链接：https://blog.csdn.net/wxl1555/article/details/76594134转载 2019-03-28 10:13:47 · 87 阅读 · 0 评论 -
vue中this.$router.push路由传参以及获取方法
项目中通过this.$router.push路由跳转页面传递参数的方式很常见，一般有两种方式：1.params传参：this.$router.push({name:'parasetEdit',params:{pk_refinfo:'test',value:'test1'}});目标页面接收参数：this.$route.params.pk_refinfo2.query传参：this.$...转载 2019-03-28 10:18:47 · 381 阅读 · 0 评论 -
vue2.0版本使用axios发送请求
注意：在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，下面来具体介绍一下axios的使用。axios 基本介绍axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以...转载 2019-09-04 22:13:20 · 562 阅读 · 0 评论 -
vue2.0版本之过滤器(filter)的使用
下面是两种使用方式，根据自己的情况选择：<!-- 在双花括号中 -->{{ message | formatDate }} <!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatDate"></div>下面开始写过滤器：假设：一种场景，后端返回的一个 时间列表大概是长下边这样的：[...原创 2019-09-04 22:56:45 · 428 阅读 · 0 评论 -
（二）Vue2.0之Vue Router 的基本使用(一)
NPM安装：npm install vue-routerv如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让...原创 2019-09-07 18:54:09 · 212 阅读 · 0 评论 -
（三）Vue2.0之VUEX的基本使用（一）
一、Vuex的组成介绍：1、State----数据仓库2、getter----用来获取数据3、Mutation -----用来修改数据4、Action -------用来提交mutation,可以进行异步操作二、安装vuex步骤：*安装vuex包：npm install vuex*创建vuex实例：new Vuex.store()*main.js中将vuex实例挂载到vue对象上...原创 2019-09-05 21:29:42 · 220 阅读 · 0 评论 -
npm与yarn的使用方法和区别
刚开时接触先接触的npm，主要是配合VUE来进行包管理。后来项目开始使用yarn，带着疑问的心理，开始学习，下面是我最近的学习心得。npm 与 yarn 在互相学习、共同进步，现在已经非常类似。一、安装：（1）npm安装：在官网安装Node.js成功后，就可以命令提示符中使用npm了。（2）yarn安装：在官网可以查看具体的安装方式，安装网址https://yarnpkg.com/zh-...原创 2019-09-07 21:55:51 · 1006 阅读 · 0 评论 -
（一）VUE2.0之引入Vant组件库
在日常的vue的开发中，进行移动端的开发时，经常使用vant组件作为项目的ui界面。下面是从新建项目到开发的全部过程：1、新建vue项目，这里使用vue-cli3.x版本。//安装Vue cli 不管你的版本是多少 执行下面语句 都会安装最新版本npm install -g @vue/cli// 创建一个项目，名为hello-worldvue create hello-world/...原创 2019-09-10 22:19:26 · 3577 阅读 · 0 评论 -
前端学习知识点整理html+js+query(一)
HTML笔记:1、document.querySelector("#demo")----获取文档中 id=“demo” 的元素练习地址JavaScript笔记：1、decodeURIComponent(URIstring) 函数----可对 encodeURIComponent() 函数编码的 URI 进行解码。练习地址...原创 2019-09-12 11:40:34 · 395 阅读 · 0 评论 -
yarn和npm的指令使用大全
下面主要是自己日常vue开发中npm 和yarn两者指令的使用区别：掌握其中的一个的话，使用另外一个几分钟就可以掌握，剩下的主要是指令的区别：npm指令：安装所有依赖：npm install新建项目文件：vue init webpack projectname //vue-cli版本在2.xvue create projectname //vue-cli版本在3.x运行程序：npm r...原创 2019-09-26 09:54:22 · 1255 阅读 · 0 评论 -
Visual Stadio Code配置Vue
1.前提：已经安装成功了Visual Stadio Code(本文主要是windows下的Vue配置)2.开始配置Vue#最新版本确认npm show vue-cli3. 输入：npm install -g vue-cli@2.9.6（指定版本）4. 安装版本确认：vue -V5.输入：vue -h6.查看每个列表的功能，输入：vue help init7.下面开始使用vu...原创 2018-12-04 22:30:57 · 250 阅读 · 0 评论