房地产东莞网站建设,企业邮箱注册价格,wordpress error,毕业设计代做网站都可信么1.html
1.1 网站自动刷新
应用场景#xff1a;
网页定期自动刷新#xff08;现在基本淘汰了#xff0c;采用ajax#xff09;#xff1b;自动跳转到指定页面#xff0c;这个自动跳转的好处就是不需要JS调用#xff0c;属于纯html网页自动跳转
v7-网站自动刷新 你可以…1.html
1.1 网站自动刷新
应用场景
网页定期自动刷新现在基本淘汰了采用ajax自动跳转到指定页面这个自动跳转的好处就是不需要JS调用属于纯html网页自动跳转
v7-网站自动刷新 你可以在head标签中将网站设置为定时刷新如meta http-equivrefresh content2content为刷新间隔。 !DOCTYPE html
htmlheadmeta charsetutf-8meta http-equivrefresh content2!-- meta http-equivrefresh content2; URLhttps://baidu.com --title技巧/title
/headbody页面是否刷新/body
scriptlet refresh localStorage.getItem(refresh) || 0localStorage.setItem(refresh, refresh)console.log(页面刷新了, refresh 次)
/script/html2.css
2.1 使元素鼠标事件失效
v3-使元素鼠标事件失效 .change-btn{cursor:not-allowed; //只是悬浮显示禁用图标仍然可以点击和选中pointer-events: none; //只是禁用点击事件user-select: none; //只是禁用了用户选中}2.2 字母大小写转换
v-4字母大小写转换 除了用js的toUpperCase()和toLowerCase()转换字母也可以用css控制 p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母2.3 立体字
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);}
2.4 filter(灰度滤镜) 应用场景图片高亮 v6-filter(灰度滤镜)
3.js
3.1 forEach退出循环
var arr [1,2,3,4,5]
arr.forEach((item,index){if(item3){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(item3){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
后续的代码3.2 移除对象属性
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}4.vue
4.1 自定义指令 自定义指令是用来操作DOM的尽管vue推崇数据驱动视图的理念但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展不仅可用于定义DOM操作而且是可复用的。 参数说明
dire 指令名称el 当前绑定的dom元素bindings 指令解析后的结果包括指令名称、参数、表达式等bindings.value返回的是表达式vnode 对应的虚拟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-自定义指令
4.2. vue中怎么重置data
使用场景 比如有一个表单表单提交成功后希望组件恢复到初始状态重置data数据。 初始状态下设置data数据的默认值重置时直接object.assign(this.$data, this.$options.data())
说明
this.$data获取当前状态下的datathis.$options.data()获取该组件初始状态下的data(即初始默认值)如果只想修改data的某个属性值为初始值可以this[属性名] this.$options.data()[属性名]如this.message this.$options.data().message
5.react
5.1 ant design select 搜索同时支持输入和下拉选中
先看下官网select的搜索怎么用的
ant design select 搜索同时支持输入和下拉选中
6.调试
6.1 控制台打印有样式的文字 当我们打印信息很多需要明显的区分重要信息时就可以通过打印高亮来实现 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)6.2 跨页面调试
场景 系统a对接门户b门户b会携带参数打开一个新的tab页跳转到系统a此时想打开控制台调试系统a接收门户b的参数并想查看接口的调用 如果有ab两个系统的代码则直接在tab页面打开控制台进行调试。
如果只有a的代码这是b跳转到a时候在a网站打开控制台后可能接口已经调用完成了。如果想要接口调用慢一点可以把network的网络调整更慢但有时候即使网络很慢接口也调用完成了这时候可以在a系统的接口调用处写一个alet(1)阻止整个页面的运行这这时候再打开控制台就能正常的调试了。
7.工程化
7.1 如何注册发布自己的npm包
概念 NPM的全称是Node Package Manager是一个NodeJS包管理和分发工具已经成为了非官方的发布Node模块包的标准 目的 发布npm包为的是代码更加友好的使用和模块化好复用易维护 注册发布自己的npm包
v2-如何注册发布自己的npm包
