应用场景:
v7-网站自动刷新
你可以在head标签中将网站设置为定时刷新!如
,
content
为刷新间隔。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="2">
<title>技巧title>
head>
<body>
页面是否刷新
body>
<script>
let refresh = localStorage.getItem('refresh') || 0
localStorage.setItem('refresh', ++refresh)
console.log('页面刷新了', refresh + '次')
script>
html>
v3-使元素鼠标事件失效
.change-btn{
cursor:not-allowed; //只是悬浮显示禁用图标,仍然可以点击和选中
pointer-events: none; //只是禁用点击事件
user-select: none; //只是禁用了用户选中
}
v-4字母大小写转换
除了用js的
toUpperCase()
和toLowerCase()
转换字母,也可以用css控制
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
v5-立体字
.text_solid {
font-size: 32px;
text-align: center;
font-weight: bold;
line-height: 100px;
position: relative;
background-color: #333;
color: #fff;
// 水平阴影的位置,垂直阴影的位置,模糊的距离,阴影的颜色
text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0,
0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, 0.6);
}
应用场景:图片高亮
v6-filter(灰度滤镜)
var arr = [1,2,3,4,5]
arr.forEach((item,index)=>{
if(item==3){
console.log(`%c 匹配到了${item}`,'color:red')
return
}
console.log(`遍历到了${item}`)
})
console.log('%c 后续的代码','color:green')
//打印结果为:
遍历到了1
遍历到了2
匹配到了3
遍历到了4
遍历到了5
后续的代码
结论:forEach中return只会退出当前循环,而不会退出整个循环,也不会退出整个事件
那么怎么直接退出循环:
for
循环forEach
中使用try catch
抛出异常var arr = [1,2,3,4,5]
try {
arr.forEach((item,index)=>{
if(item==3){
console.log(`%c 匹配到了${item}`,'color:red')
throw('遍历结束')
}
console.log(`遍历到了${item}`)
})
console.log('%c 后续的代码','color:green')
} catch (error) {
console.log('error',error)
}
//打印结果为:
遍历到了1
遍历到了2
匹配到了3
error 遍历结束
some
遍历var arr = [1, 2, 3, 4, 5]
// some:如果表达式有一个条件满足,则剩余元素不会再执行检测(并且表达式返回值会为true,反之为fasle)。
// some里面的return同样不会阻止遍历外的代码执行
let val = arr.some((item, index) => {
if (item == 3) {
console.log(`%c 匹配到了${item}`, 'color:red')
return true
}
console.log(`遍历到了${item}`)
})
!val && console.log('%c 后续的代码', 'color:green')
//打印结果为:
遍历到了1
遍历到了2
匹配到了3
后续的代码
let obj = {a: 1, b: 2, c: 3, d: 4};
//方式1
delete obj.a;
delete obj.b;
delete obj.c;
console.log(obj); // {d: 4}
//方式2
let {a, b, c, ...newObj} = obj;
console.log(newObj);// {d: 4}
自定义指令
是用来操作DOM
的,尽管vue
推崇数据驱动视图
的理念,但并非
所有情况都适合数据驱动。自定义指令就是一种有效的补充
和拓展
,不仅可用于定义DOM
操作,而且是可复用
的。
参数说明:
//对象注册形式示例:
Vue.directive('dire',{
bind: function(el,bindings,vnode){
console.log("bind--最先执行的钩子函数")
}
inserted: function(el,bindings,vnode){
console.log("inserted--在bind后面执行")
}
update: function(el,bindings,vnode){
console.log("update--绑定组件更新前触发执行")
}
componentUpdated: function(el,bindings,vnode){
console.log("componentUpdated--绑定组件更新后触发执行")
}
unbind: function(el,bindings,vnode){
console.log("componentUpdated--组件销毁前触发执行")
}
}
介绍完基本概念后,接下来通过一个案例来实操一下,假设这样一个场景:
我们的权限需要做到按钮级的,并且希望做前端埋点记录用户点击是哪个页面的哪个按钮,那么自定义指令就是一个不错的方案:
v1-自定义指令
使用场景:
比如,有一个表单,表单提交成功后,希望组件恢复到初始状态,重置data数据。
初始状态下设置data数据的默认值,重置时直接object.assign(this.$data, this.$options.data())
说明:
this.$data
获取当前状态下的data
this.$options.data()
获取该组件初始状态
下的data
(即初始默认值)某个
属性值为初始值,可以this[属性名] = this.$options.data()[属性名]
,如this.message = this.$options.data().message
先看下官网select的搜索怎么用的
ant design select 搜索同时支持输入和下拉选中
当我们打印信息很多,需要明显的区分重要信息时,就可以通过打印高亮来实现
console.log('%c 当前打印的为红色==>','color:red')
console.log('%c 当前打印的为绿色==>','color:green')
console.log('%c 当前打印的为绿色有背景的大文字==>','color:green;font-size:30px;background:#ddd')
打印的格式:
%c
空格
内容
逗号
css样式
那么,如何打印动态内容呢?
可以用es6的模板字符串:
const name='小明'
console.log(`%c ${name}`,"font-size:30px")
场景:
系统a对接门户b,门户b会携带参数打开一个新的tab页跳转到系统a,此时想打开控制台调试系统a接收门户b的参数,并想查看接口的调用
如果有a,b两个系统的代码,则直接在tab页面打开控制台,进行调试。
如果只有a的代码,这是b跳转到a时候,在a网站打开控制台后,可能接口已经调用完成了。如果想要接口调用慢一点,可以把network的网络调整更慢,但有时候即使网络很慢,接口也调用完成了,这时候可以在a系统的接口调用处写一个alet(1)
阻止整个页面的运行,这这时候再打开控制台就能正常的调试了。
概念:
NPM的全称是
Node Package Manager
,是一个NodeJS包管理和分发工具
,已经成为了非官方的发布Node模块(包)
的标准
目的:
发布npm包为的是代码更加友好的使用和模块化:好复用,易维护
注册发布自己的npm包
v2-如何注册发布自己的npm包