前端
ywb201314
兵法有言,知己知彼,百战不殆
展开
-
bootstrap-datetimepicker 配置全面指南 ( version : 4.17.47 )bootstrap-datetimepicker
bootstrap-datetimepickerhttps://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js $.fn.datetimepicker.defaults = { timeZone: '', format: false, dayViewHeaderFormat: 'MMMM YYYY',转载 2020-09-24 16:32:01 · 995 阅读 · 0 评论 -
日期时间范围选择插件:daterangepicker使用总结(必看篇)
项目中要使用日期时间范围选择对数据进行筛选;精确到年月日 时分秒;起初,使用了layui的时间日期选择插件;但是在IIE8第一次点击会报设置格式错误;研究了很久没解决,但能确定不是layui的问题;因为自己写的demo可以在IE8运行;只是在我的项目环境下某些代码冲突了;所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助。总结分为四个部分:日期范围选择实现,日期转载 2020-09-24 16:04:43 · 4318 阅读 · 0 评论 -
vue的axios拦截器实现未登录页面跳转
1.拦截器分为request请求拦截器和response响应拦截器PS:request请求拦截器:发送请求前统一处理,如:设置请求头headers、应用的版本号、终端类型等。response响应拦截器:有时候我们要根据响应的状态码来进行下一步操作,例如:由于当前的token过期,接口返回401未授权,那我们就要进行重新登录的操作。2.main.js文件中(先安装axios)import axios from 'axios'// 给Vue函数添加一个原型属性$axios指向axios.转载 2020-09-21 10:08:36 · 3971 阅读 · 0 评论 -
vue-cli3之router 和 router.beforeEach妙用
路由是前端非常重要的部分,那么在使用vue开发中也是必不可少的。vue router官方文档详细的介绍的关于router的一些功能和用法。这里呢我简单的记录下,在真实项目中,基于vue-cli3构建工具下,router 和 router.beforeEach的搭配使用。在讲之前呢,我们先简单了解一下beforeEach。constrouter=newVueRouter({...})router.beforeEach((to,from,next)=&...转载 2020-09-18 18:04:08 · 4039 阅读 · 0 评论 -
Vue.js中过滤器(filter)的使用
Vue.js 过滤器的基本使用(filter)vue中的过滤器分为两种:局部过滤器和全局过滤器1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') })完整示例 <div id="app"> <p>{{ ms转载 2020-09-18 17:15:01 · 430 阅读 · 0 评论 -
HTML5 Web Storage事件
Storage事件在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面。Web Storage API内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发 storage 事件,并把它发送给所有感兴趣的监听者。因此,如果需要跟踪存储区域的改变,就需要在关心存储区域内容的页面监听 storage 事件。所有支持 localStorage 的浏览器都支持 storage 事件,包括 IE8。但IE 8不支转载 2020-09-18 16:53:54 · 163 阅读 · 0 评论 -
关于前端页面开发CSS规范(样式、命名、书写规范、兼容性)
1.根据新建样式的适用范围分为三级:全站级、产品级、页面级全站级: 需要放在所有CSS引用的最前面,它包括:标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等。注:不要轻易改动全站级CSS。改动后,要经过全面测试页面级: 指仅在一个或少量几个页面中用到。 如果仅在一个页面中用到的采用内联方式嵌入于页面head里; 多于两个页面的放到外联的CSS文件中,该文件再放到相应的产品目录下。产品级: 仅...转载 2020-09-16 14:38:38 · 655 阅读 · 0 评论 -
03 vue组件技术
系列文章导航01 Vue语法基础02 vue数据绑定与指令03 vue组件技术04 vue单文件组件定义与使用1 组件介绍组件是Vue.js最强大的功能之一。组件是可复用的Vue实例,且带有一个名字,通过组件封装可重用的代码,在较高层面上,组件是自定义元素。2 组件注册1.1 组件注册方式1组件名对应标签名,标签名不允许出现大写字母,因此组件名包含多个单词时需要采用kebab-case (短横线分隔命名) 命名。组件名称中如果用了大写字母,使用组件的时候需要转成keb转载 2020-09-10 11:52:24 · 145 阅读 · 0 评论 -
04 vue - 单文件组件定义与使用
系列文章导航01 Vue语法基础02 vue数据绑定与指令03 vue组件技术04 vue单文件组件定义与使用1 单文件组件的好处2 单文件组件的运行场景hbuilderx工具一下两种方式创建的项目才允许使用单文件组件:1)方式1:Vue项目(含vue-cli)2)方式2:uni-app项目3 组件的定义与使用3.1 组件的定义语法规范 1 2 3 4 5 6 7 8 9 .转载 2020-09-10 11:52:47 · 416 阅读 · 0 评论 -
Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: 模块化:是从代码逻辑的角度进行分析,方便代码分层开发,保证每个功能模块的只能单一 组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的重用。<!DOCTYPE html><html lang="en"&...转载 2020-09-09 17:19:00 · 253 阅读 · 0 评论 -
Vuejs自定义组件的四种方式
有个笑话想写在文章顶部,等捋完整篇文章思路开始动手的时候。哦豁~ 忘了。这是空档~先留一个空档,万一又想起来呢。正文:四种组件定义方式都存在以下共性(血泪史):1.组件只能有一个根标签2.记住两个词全局和局部3.组件名称命名中‘-小写字母’相当于大写英文字母(hello-com 相当于 helloCom)而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码。1.全局组件定义...转载 2020-09-09 17:07:54 · 1325 阅读 · 0 评论 -
vue 组件 Vue.component 用法
定义:组件是可复用的 Vue 实例,且带有一个名字可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用1. 定义一个新组件。命名为 counter格式:1.组件名为"conter";2.data 数据属性:写函数;3.template 模板:写组件的内容(元素和触发的事件) Vue.component("counter",{ //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容(..转载 2020-09-09 16:49:46 · 1834 阅读 · 0 评论 -
关于Vue.use()详解
问题相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?答案因为 axios 没有 install。什么意思呢?接下来我们自定义一个需要 Vue.use() 的组件,也就是有 install 的组件,看完之后就明白了。定义组件生成模版 vue init webpack-simple custom-gl转载 2020-09-09 16:38:21 · 356 阅读 · 0 评论 -
浅谈Vue.use
先举个?我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这两个文件放置在src/classes/vue-use目录下接下来对这两个文件进行编写// 文件: src/classes/vue-use/plugins.jsconst Plugin1 = { install(a, b, c) { console.log('Plugin1 第一个参数转载 2020-09-09 16:36:52 · 152 阅读 · 0 评论 -
使用env文件切换开发环境
开发过程中经常遇到不小心切换错了接口地址从而打错生产包, 为了避免再次发生这种不必要的错误,总结了一下关于env文件在实际开发中的使用。首先我们在根目录新建三个 .env的文件.env无论开发环境还是生成环境都会加载.env.development开发环境加载这个文件.env.production生成环境加载这个文件env 文件需要声明运行的环境.env.dev 本地运行时会执行这个文件.env.production 生产环境执行这个文件...转载 2020-09-09 15:57:23 · 915 阅读 · 0 评论 -
比官方文档更易懂的Vue.js教程!包你学会!
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React、Angular、Vue。没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点。面试的时候不吹上一点新技术,好像自己就不是搞前端的似的。当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~本系列文将会通过很多一目了然的例子和一个实战项目——组件库,来帮助大家学习Vue,一步一步来,毕竟这篇文章还有接下来的【升学篇】和【结业篇】呢。什么是Vue.js不管你想转载 2020-09-09 15:43:54 · 149 阅读 · 0 评论 -
ES6:export default 和 export 区别
export default 和 export 区别:1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用3.在一个文件或模块中,export、import可以有多个,export default仅有一个4.通过export方式导出,在导入时要加{ },export default则不需要1.export//a.jsexport .转载 2020-09-09 13:34:19 · 158 阅读 · 0 评论 -
export 和 export default 的区别
export命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;上面代码是profile.js文件,保存了用户转载 2020-09-09 13:31:45 · 127 阅读 · 0 评论 -
vue create 和 vue init 的区别
1. vue create是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。使用方式:vue create 项目名称2. vue initvue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目.转载 2020-09-09 11:09:07 · 521 阅读 · 0 评论 -
HTML5中的aria与role
这些都是HTML5针对html tag增加的属性,一般是为不方便的人士提供的功能,比如屏幕阅读器。role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。aria的意思是Accessible Rich Internet Application,aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如:<div role="checkbox" aria-checked="c转载 2020-09-08 17:07:31 · 295 阅读 · 0 评论 -
node.js和npm的关系
一、npm是什么当一个网站依赖的js代码越来越多,程序员发现这是一件很麻烦的事情:去 jQuery 官网下载 jQuery去 BootStrap 官网下载 BootStrap去 Underscore 官网下载 Underscore……有些程序员就受不鸟了,于是npm就出来了,全称是 Node Package Manager 包管理工具。这一点和maven、gradle十分相似,只不过maven、gradle是用来管理java jar包的,而npm是用来管理js的。NPM 的实现思...转载 2020-09-08 15:11:58 · 214 阅读 · 0 评论 -
export default {} 和new Vue()区别
1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用。而对于export default 和export的区别:在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default...转载 2020-08-28 10:07:00 · 170 阅读 · 0 评论 -
vue中export和export default的使用
1 export的使用比喻index.js要使用test.js中的数据首先在test.js文件中进行导出操作在index.js文件进行导入操作第一种方法:此时的输出结果是:注意:export 不能直接写成这样子 export{ "":"" // 这样会报错 ....}2 export default的使用test.js文件index.js文件中:输出的结果:注意:e...转载 2020-08-28 10:04:53 · 157 阅读 · 0 评论 -
最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能。使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面PHP程序员雷雪松给大家分享一下最值得拥有的免费Bootstrap后台管理模板。AdminLTEAdminLTE是一个完全响应的后台管理模板。基于Bootstrap3框架。高度可定制,易于使用。适合许多屏幕分辨率从小型移动设备到大型台式机。GitHub AdminLTE地址:https://github.com/al转载 2020-08-26 13:24:44 · 288 阅读 · 0 评论