VUE系列
苦咖啡Li
这个作者很懒,什么都没留下…
展开
-
H5开发踩坑之旅
1、H5页面在IOS后退不刷新该现象与往返缓存(bfcache)有关系//ios端浏览器回退功能不刷新页面,android端不存在let isIos = /^.*((iPhone)|(iPad)|(Safari))+.*$/;if (isIos.test(navigator.userAgent)) { window.onpageshow = function(event) { ...转载 2020-07-29 17:15:39 · 759 阅读 · 0 评论 -
Rem.js
750 代表设计稿的宽度;100 代表换算比例,写100是 为了好计算;比如,一个元素的宽度是100px,就可以写1rem,以及1px=0.01rem // rem 前端自适应代码 (function (win) { let doc = win.document, docEl = doc.documentElement, timer = null; ...转载 2020-07-29 17:15:03 · 234 阅读 · 0 评论 -
vue Bus总线
vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式如下:父 → 子:props传递数据 / vuex;子 → 父:bus事件总线 / vuex;兄弟组件:bus事件总线 / vuex;在一些简单的项目中,我们没有必要使用Vuex,此时可以使用 公共事件总线(Event Bus) 来处理1、创建事件总线创建一个名为 bus.js 的JS文件import Vue from 'vue';export default n转载 2020-07-29 17:14:24 · 594 阅读 · 1 评论 -
vue如何在页面刷新时保留状态信息
1、通过本地存储 state中的数据,页面刷新成功后再次从本地存储中读取state数据// vuex中的数据发生改变时触发localStorage的存储操作localstorage.setItem('state', JSON.stringify(this.$store.state))// 页面加载的时候在created中获取本地存储中的数据localStorage.getItem(...转载 2019-09-07 22:00:37 · 6980 阅读 · 2 评论 -
VUE中assets与static的区别
1、相同点: 文件夹中的资源在html中使用都是可以的。2、不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中的file-loader编译,路径不能直接写2.1 static :该目录下的文件是不会被wabpack处理的,它们会被直接复制到最终的打包目录下面(默认是 dist/static ),且必须使用绝对路径来引用这些文件。这是通过在 config....转载 2019-09-07 22:00:13 · 1007 阅读 · 0 评论 -
vue中bus.$on事件被多次绑定
vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) bus.$off("backUpLevel"); bus.$on...转载 2019-09-07 21:24:41 · 1137 阅读 · 0 评论 -
Vuex详细教程
1、使用Vue脚手架构建好项目后1.1 安装Vuex// 生产环境中需要使用npm install Vuex --save 1.2 新建一个 store 文件夹,并在文件夹下新建 store.js ,文件中引入 Vue 和 Vueximport Vue from 'vue'import Vuex from 'vuex'1.3 使用 vuex,通过&n...转载 2019-09-07 21:23:08 · 170 阅读 · 0 评论 -
组件之间的通信
1、父子组件通信####1.1父组件到子组件方式:通过 props 属性传递数据注意:子组件无法直接使用父组件的数据//============= 父组件 =================<aaa :money="bar"></aaa> important aaa from '......'var vm = new Vue({ el: '#app...转载 2019-09-07 21:21:06 · 164 阅读 · 0 评论 -
VUE全局过滤器filter
1、过滤器1.1 过滤器科用在两个地方:双花括号插值 和 v-bind 表达式 中。过滤器应该被添加在js表达式的尾部,由管道符号指示// 双花括号中{{ message | capitalize }}// 在v-bind 中<div v-bind:id=" rawId | formatId"></div>####1.2 定义...转载 2019-09-07 21:17:10 · 338 阅读 · 0 评论 -
Vue多页面应用程序的构建
1、利用vue脚手架快速搭建项目目录1.1、 vue init webpack test 生成项目目录1.2、 npm install 安装项目依赖1.3、 npm run dev 运行项目页面2、新建项目文件:根目录下: html文件one.html、two.htmlSrc目...转载 2019-09-07 21:15:05 · 335 阅读 · 0 评论 -
vue_axios请求封装、异常拦截统一处理
1、前端网络请求封装、异常统一处理vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作;axios 请求封装// 引入axios文件包import axios from 'axios'// POST 方法封装 (参数处理)export const postRequest = (url, params)...转载 2019-09-07 20:47:43 · 2137 阅读 · 0 评论 -
VUE 常见指令
1、常见指令1.1 v-text 用来设置当前元素的文本内容,相当于innerText注意:会覆盖元素的默认内容 <h1 v-text='msg'></h1>1.2 v-html 更新DOM对象的textContent注意:不要使用v-html展示用户输入的内容1.3 v-bind 为html元素绑定属性<a v-bind:href="url">...转载 2019-09-07 21:38:42 · 215 阅读 · 0 评论 -
路由导航钩子
路由导航钩子:主要用来拦截导航,让其完成跳转或者取消跳转1、全局钩子: beforeEach、beforeResolve、 afterEach(after钩子没有next方法,不能改变导航)router.beforeEach( (to,from,next) => { //do something next(); // 该方法调用resolve钩子 next(false);...转载 2019-09-07 21:37:57 · 944 阅读 · 0 评论 -
Vue.directive 自定义指令
1、简介:除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。有的情况下,仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。问题:当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现...转载 2019-09-07 21:37:15 · 193 阅读 · 0 评论