Vue
想搞全栈的前端
愿君学长松,慎勿作桃李.受屈不改心,然后知君子
展开
-
elementUi自定义主题色(最简单优雅)
elementUi自定义主题色Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量:1、新建一个样式文件:例如 element-variables.scss,写入以下内容:/* 改变主题色变量 */$--color-primary: red;/* 改变 icon 字体路径变量,必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@im原创 2022-03-02 16:34:12 · 8993 阅读 · 0 评论 -
vue3.x router4.x 路由hash与History的设置
vue3.x router4.x 路由hash与History的设置关键字:createWebHistory createWebHashHistory原创 2021-12-30 09:39:07 · 2048 阅读 · 0 评论 -
vue基于scss的动态切换主题颜色
根据预设的配色方案,在前端动态切换系统主题颜色大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。具体实现新建themes.scss文件这里只是做示例就写两个样式参考,更多的自己补充一下$themes: (Red: ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态 mainColor: #D6000F, //主题色原创 2021-11-25 15:20:12 · 3470 阅读 · 0 评论 -
vue-cli3.0 模式以及env环境文件相关配置
环境变量vue-cli-3.0总共提供了四种方式来制定环境变量:在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。在根目录添加.env.[mode].local文件,配置对应某个模式下原创 2021-11-25 10:02:44 · 2337 阅读 · 0 评论 -
vue指令 只能输入正整数保留两位小数 (视图数据都更新)
vue指令 只能输入正整数保留两位小数Vue.directive('onlyNum', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { let ele:any = el.tagName === 'INPUT' ? el : el.querySelector('input') ele.addEventListener("input", function () { //进行验证 onlyNum(el);原创 2021-09-16 09:40:35 · 792 阅读 · 0 评论 -
在Vue项目中,等待所有请求(方法)完成以后执行操作
使用场景比如一个弹窗需要请求表格跟树组件的数据需要发两个请求,这时我们需要等两个请求完成拿到数据后再去打开弹窗。多个请求axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{ console.log('两个接口都执行完毕啦')})// 或者这样function getUserAccount() { return axios.get('/user/12345');}funct原创 2021-09-09 10:19:36 · 13000 阅读 · 0 评论 -
Vue 3 传送组件 —— Teleport
使用场景在使用vue的时候我们经常会有这样的需求:希望某个组件内部的dom可以放到全局,而其内部的状态数据之类的又可以在改组件内部控制。比如:我们在某个组件内部写一个弹窗,我们将它放在了我们的模板template里面,但是由于希望弹窗位于页面的最上方,这时候我们将其挂载在body上面是最好控制的,我们能够很好的通过zIndex来控制弹窗的位置,但是该弹窗嵌套在templat里面的时候就不那么容易操作了。Props:**to - string 。 需要 prop,必须是有效的查询选择器或 HTM原创 2021-09-08 15:06:24 · 747 阅读 · 0 评论 -
原生js以及vue 文件下载
文件下载普通js下载function fileDown(formData, url) { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=utf8'); xhr.setRequestHeader('bwTicket', $bw.bwUtil.getLocalData('bwTicket')); x原创 2021-09-06 14:16:14 · 377 阅读 · 0 评论 -
手写demo了解vue响应式原理,订阅模式,观察者模式
Vue2.X响应式原理一.defineProperty 的应用在Vue2.X响应式中使用到了 defineProperty 进行数据劫持,所以我们对它必须有一定的了解,那么我们先来了解它的使用方法把, 这里我们来使用 defineProperty来模拟Vue 中的data<body> <div id="app"></div> <script> // 模拟 Vue的data let data = {原创 2021-07-26 17:40:58 · 455 阅读 · 0 评论 -
antd of vue 利用customRequest自定义渲染上传进度条
antd of vue 上传进度条显示在a-upload组件中使用customRequest自定义渲染 <a-upload name="file" :customRequest="customRequest" //通过覆盖默认的上传行为,可以自定义自己的上传实现(Function) >原创 2020-07-23 17:34:29 · 10182 阅读 · 2 评论 -
jsonp的原理介绍及Promise封装 javascript
什么是jsonp :Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。jsonp的实...原创 2020-03-28 15:48:35 · 288 阅读 · 0 评论 -
引入icon.styl字体文件无法解析报错
问题在一个vue项目中需要引入icon.styl文件,然而报错如下解决办法将相对路径改为绝对路径,如下:编译成功:原创 2020-03-27 14:51:27 · 451 阅读 · 0 评论 -
VUE项目引入公共样式的styl文件
在一个vue项目中引用了styl格式的css,在vue文件中还可以正常引用,只需要在<style scoped lang="stylus" rel="stylesheet/stylus">中添加 lang="stylus"即可但是在main.js中引入公共样式的时候,出了问题一直出不来,多方查照找到解决办法步骤一:安装stylus stylus-loader style-lo...原创 2020-03-27 14:37:35 · 2699 阅读 · 1 评论 -
Array.apply(null, { length: 20 })的用法
今天再看VUE的渲染函数,看到apply一个很特殊的用法:apply(null, { length: 20 })render: function (createElement) { return createElement('div', Array.apply(null, { length: 20 }).map(function () { return createEl...原创 2020-03-21 15:48:30 · 1002 阅读 · 1 评论 -
$slots.default
官网链接vm.$slots简而言之:$slots是一个插槽用来预留位置,default则是指除了具名插槽以外的所有内容。常用于渲染函数,那下面来看一个在渲染函数中使用的例子:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>渲染函数</title...原创 2020-03-21 12:32:57 · 9810 阅读 · 0 评论 -
VUE:初始渲染的过渡
前言关于vue的初始渲染过渡,资料比较少,官网讲解也比较少。官网链接:初始渲染过渡初始渲染过渡顾名思义初始渲染过渡就是界面初始化时的过渡,在界面刚打开或刚刷新的时候就进入过渡渲染。实际使用<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src...原创 2020-03-16 15:44:24 · 843 阅读 · 0 评论 -
vue.js --- day10
文章目录Day10开启Apache的gzip压缩使用ngrok将本机映射为一个外网的Web服务器Day10开启Apache的gzip压缩要让apache支持gzip功能,要用到deflate_Module和headers_Module。打开apache的配置文件httpd.conf,大约在105行左右,找到以下两行内容:(这两行不是连续在一起的)#LoadModule deflate_m...原创 2019-05-02 18:38:50 · 258 阅读 · 0 评论 -
关于Img标签绑定:src不显示图片
问题如下图所示动态绑定src,不显示图片,将路径换成网络图片地址又可以显示解决方法引用本地图片需要加上require,使用require定义之后,就可以动态使用了,不用require你就只能写死的。不用 :src="’…/img/image.jpg’" 会被解析为字符串...原创 2019-07-31 16:33:34 · 34695 阅读 · 3 评论 -
轮播插件vue-awesome-swiper的使用方法
前言在使用vue框架写项目时,轮播图是经常需要用到的,在这里推荐一款vue的轮播图插件vue-awesome-swiper。支持多种样式,点击样式预览。贴上地址:vue-awesome-swiper安装引用npm install vue-awesome-swiper --save在main.js文件中引入,和vue-router使用差不多import Vue from 'vue'i...原创 2019-08-01 14:35:29 · 236 阅读 · 0 评论 -
自适应方案:在vue项目中使用postcss-px2rem
在src目录下创建 viewport.js文件下载:https://github.com/imochen/hotcss/tree/master/src这个JS是用来在页面打开的时候给HTML根加上适配的字体大小然后在main.js下添加:import './viewport.js'这里强调下为什么不使用lib-flexible插件个人在使用lib-flexible插件时,感觉没hotc...原创 2019-08-01 15:45:33 · 4536 阅读 · 0 评论 -
自适应方案:在vue项目中使用postcss-px2rem
在src目录下创建 viewport.js文件下载:https://github.com/imochen/hotcss/tree/master/src这个JS是用来在页面打开的时候给HTML根加上适配的字体大小然后在main.js下添加:import './viewport.js'这里强调下为什么不使用lib-flexible插件个人在使用lib-flexible插件时,感觉没hotc...原创 2019-08-01 15:46:44 · 671 阅读 · 0 评论 -
router-link-active 与 router-link-exact-active 区别
router-link-exact-activerouter-link-exact-active 是精确匹配规则,即只有当前点击router被匹配router-link-activerouter-link-active 默认是全包含匹配规则,即path名全包含在当前router path名开头的router也会被匹配到。1. <router-link to=’/’>2. &l...原创 2019-07-26 15:40:28 · 2291 阅读 · 0 评论 -
vue动态绑定class
1.v-bind:class 一个对象,以动态地切换 class:动态绑定active类,当isactive == index为true时使用active类<p :class="{'active':isactive == index}">{{item.name}}</p>2.data数据中定义isactive定义isactive并且初始化 data(){ ...原创 2019-07-21 16:11:59 · 646 阅读 · 0 评论 -
用vue-cli脚手架开发APP的步骤
前言本文主要记录vue-cli脚手架开发app的步骤,如果还未安装vue-cli的请查看vue-cli官方文档有详细过程。项目地址:vue-cli-demo效果点击链接实现界面跳转,下方底部可以改成导航栏,中间内容自己修改。步骤1.创建模板运行以下命令来创建一个新项目(项目名自己随意):vue create test3你会被提示选取一个 preset。你可以选默认的包含了基...原创 2019-07-30 16:37:52 · 3942 阅读 · 0 评论 -
Vue.js - Day4
文章目录Vue.js - Day4父组件向子组件传值子组件向父组件传值组件中data和props的区别评论列表案例使用 `this.$refs` 来获取元素和组件什么是路由在 vue 中使用 vue-router使用tag属性指定router-link渲染的标签类型设置路由重定向设置路由高亮设置路由切换动效在路由规则中定义参数使用 `children` 属性实现路由嵌套命名视图实现经典布局`wat...原创 2019-05-01 08:34:38 · 497 阅读 · 0 评论 -
Vue.js - Day3
文章目录Vue.js - Day3定义Vue组件全局组件定义的三种方式组件中展示数据和响应事件【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象使用`components`属性定义局部子组件使用`flag`标识符结合`v-if`和`v-else`切换组件使用`:is`属性来切换不同的子组件,并添加切换动画父组件向子组件传值子组件向父组件传值评论列表案例使用 `this.$refs`...原创 2019-04-30 09:31:30 · 615 阅读 · 0 评论 -
Vue.js - Day2
文章目录Vue.js - Day2品牌管理案例添加新品牌删除品牌根据条件筛选品牌Vue调试工具`vue-devtools`的安装步骤和使用过滤器私有过滤器全局过滤器键盘修饰符以及自定义键盘修饰符1.x中自定义键盘修饰符【了解即可】[2.x中自定义键盘修饰符](https://cn.vuejs.org/v2/guide/events.html#键值修饰符)[自定义指令](https://cn.vue...原创 2019-04-29 09:19:19 · 580 阅读 · 2 评论 -
一张图理清Vue中的生命周期和钩子函数
前言Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。贴图下面的图片是在官方文档的图片上进行了解释说明,帮大家更好的理解这张图。代码贴上一个小案例辅助理解<!DOCTYPE html><html lang="...原创 2019-05-03 15:44:54 · 495 阅读 · 4 评论 -
vue.js --- day.9
概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据;...原创 2019-05-02 18:36:47 · 244 阅读 · 0 评论 -
vue.js---day8
文章目录day8使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview)day8使用mui的tab-top-webview-main完成分类滑动栏兼容问题和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...原创 2019-05-02 17:19:55 · 606 阅读 · 0 评论 -
vue.js--day7
文章目录day7使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview)day7使用mui的tab-top-webview-main完成分类滑动栏兼容问题和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...原创 2019-05-02 17:18:51 · 623 阅读 · 0 评论 -
Vue.js - day6
文章目录Vue.js - day6注意:在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析在使用webpack构建的Vue项目中使用模板对象?ES6中语法使用总结在vue组件页面中,集成vue-router路由模块组件中的css作用域问题抽离路由为单独的模块使用 饿了么的 MintUI 组件使用 MUI 组件将项目源码托管到oschina中App.vue 组件的基...原创 2019-05-02 17:17:32 · 767 阅读 · 0 评论 -
Vue.js - Day5 - Webpack
文章目录Vue.js - Day5 - Webpack在网页中会引用哪些常见的静态资源?网页中引入的静态资源多了以后有什么问题???如何解决上述两个问题什么是webpack?如何完美实现上述的2种解决方案webpack安装的两种方式初步使用webpack打包构建列表隔行变色案例使用webpack的配置文件简化打包时候的命令实现webpack的实时打包构建使用`html-webpack-plugin...原创 2019-05-02 17:15:57 · 697 阅读 · 0 评论 -
新版本vue中没有dev-server.js文件,如何进行后台数据模拟?
前言今天在写一个vue项目时,发现build中并没有dev-server.js文件,那如何进行后台数据模拟呢?解决方法最新的vue里dev-server.js被替换成了webpack-dev-conf.js在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改第一步:在const portfinder = require(‘portfinder’)后面添加con...原创 2019-05-22 10:38:07 · 761 阅读 · 0 评论 -
mock数据时,http://localhost:8080/#/api/goods 无法访问到数据
前言在mock数据时,http://localhost:8080/#/api/goods 无法访问到数据,经过查询发现是将build目录下的webpack.dev.conf.js文件出问题了解决将build目录下的webpack.dev.conf.js文件改为:'use strict'const utils = require('./utils')const webpack = req...原创 2019-05-22 10:46:04 · 4228 阅读 · 1 评论 -
Vue组件间传值
Vue组件间传值父组件向子组件传递数据在 Vue 中,通过 props 向子组件传递数据。子组件部分:<template> <header class="header"> <div id="1ogo">{{1ogo}}</div> <ul class="nav"> <li v-for="nav in na...原创 2019-05-31 20:01:52 · 224 阅读 · 0 评论 -
Vue中computed与method的区别
computed区别于method的两个核心在官方文档中,强调了computed区别于method最重要的两点computed是属性调用,而methods是函数调用computed带有缓存功能,而methods没有下面我们看一个具体的例子:<!--HTML部分--><div id="app"> <h1>{{message}}</h1...原创 2019-06-26 15:11:29 · 1320 阅读 · 0 评论 -
vue组件兄弟间通信
兄弟组件间通信(event)借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发var bus = new Vue();bus.$emit()bus.$on()熊大想要发消息给熊二接收方(熊二):事件绑定bus.$on('customEvent',function(msg){//msg就是通过事件 传递来的数据})发送方(熊大):触发事件bus...原创 2019-06-26 14:33:35 · 506 阅读 · 0 评论 -
双向绑定
前言单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。双向绑定什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状...原创 2019-06-17 14:47:44 · 901 阅读 · 0 评论 -
单向绑定
简单理解单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。MVVM就是在前端页面上,应用了扩展的MVC模式,我们关心Model的变化,MVVM框架自动把Model的变化映射到DOM结构上,这样,用户看到的页面内容就会随着Model的变化而更新。例如,我们定义好一个JavaScript对象作为Model,并且把这个Mo...原创 2019-06-17 14:34:22 · 663 阅读 · 1 评论