http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
axios. interceptors. response. use ( function ( response ) {
let res = response. data;
let path = location. hash;
if ( res. status == 0 ) {
return res. data;
}
else if ( res. status == 10 ) {
if ( path!= '#/index' ) {
window. location. href = '/#/login' ;
}
return Promise. reject ( res) ;
} else {
Message. warning ( res. msg) ;
return Promise. reject ( res) ;
}
} , function ( error ) {
let res = error. response;
Message. warning ( res. data. message) ;
return Promise. reject ( error) ;
} ) ;
–save: 将保存配置信息到package.json, 默认为dependencies节点中
–dev: 将保存配置信息devDependencies节点中
dependencies: 运行时的依赖, 发布后, 即生成下需要用的模块
devDependencies: 开发时的依赖, 里面的模块是开发时用的, 发布时用不到它
对象. install = function ( Vue, options ) {
Vue. filter ( ... )
Vue. directive ( ... )
Vue. mixin ( ... )
Vue . prototype. $myMethods = function ( ) { ... }
Vue . prototype. $myProperty = function ( ) { ... }
}
import plugins from './plugins' Vue. use ( plugins)
被用来给元素或子组件注册引用信息( id的替代者 )
应用在html标签上获取的是真实DOM元素, 应用在组件标签上是组件实例对象( vc )
使用方式:
< h1 ref= "xxx> ... . < / h1>
< school ref= "xxx" > < / school>
this . $refs. xxx
一个重要的内置关系:
VueComponent.prototype. _ proto _ === Vue.prototype
为什么要有这个关系: 让组件实例对象(vc)可以访问到Vue原型上的属性, 方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNN209tF-1634980622721)(小知识点.assets\image-20210922110439027.png)]
回调函数
咱们自己定义的函数, 却不由咱们自己亲自调用
而是交给别的函数去调用
比如: setTimeout ( function ( ) { } , 3000 ) ;
里的function 虽然是咱们定义的, 但是调用是setTimeout等三秒后调用
比如: arr. every ( function ( elem, i, arr ) { } ) ;
里的function 虽然是咱们定义的, 但是调用几次咱们不知道, 每次传入是否实参也不知道 , 完全由every ( ) 在内部自己调用
匿名函数:如果只要一次使用, 匿名函数也有主动自调的情况, 就不属于回调
总结: 之所以大多数回调函数都是匿名函数, 只是因为多数回调函数只在一个位置使用一次
justify-content: space-evenly; 平均分布
align-self 属性定义flex子项单独在Y轴方向上的对齐方式
margin-right: auto
https://code.fun => 设计稿一键导出vue/微信小程序代码
通过打桩(输出调用次数和变量的值), 让回调函数的执行过程现出原型 通过打桩输出的结果, 推断出回调函数执行的过程 输入命令：netstat -ano；查看所有的进程及其对应的id；
str.trim();
去掉字符串两端的多余空格, 中间的那些空格不会被去掉
什么是不可变类型 :一旦创建, 值不可改变, 只能整体替换 ? 所以: 所以字符串类型提供的函数, 都无权修改原字符串, 只能返回加工后的新字 符串, 再用变量接住
什么是可变类型 :创建后, 值还可随时修改的数据类型 ? 所以: 几乎所以数组类型提供的函数, 都可以直接修改原数组, 无需用变量接住
在元素中使用, 用来声明允许用户输入数据的input控件 使用元素来标注 checked 预先选定的input元素 => 只针对type=“checkbox” 或者 type=“radio” disabled 禁用 maxlength 规定允许的最大字符 name 元素的名称 提交时可以看到 value 指定元素的值 //块级元素
display: grid;
//行级元素
display:inline-grid;
grid- template- columns
grid- template- rows
grid- template- columns: 100 px 100 px 100 px;
grid- template- rows: 100 px 100 px;
grid- template- columns: 25 % 25 % 25 % 25 % ;
grid- template- rows: 50 % 50 % ;
grid-template-rows:repeat(2,50%);两行 每行50%
grid-template-columns:repeat(2,50%);两列 每列50%
grid-template-columnsrepeat(2,100px 50px);第一列宽100px 第二列宽50px, 重复两次
grid-template-rows: repeat(2,1fr);
grid-template-columns: repeat(2,1fr 2fr);
grid-template-rows:repeat(auto-fill,100px);
grid-template-rows:repeat(auto-fill,100px);
grid-template-columns: 20vw auto 30vw;
fr 单位设置元素在空间所占的比例, 下面按1份-2份 分成两组共四列
grid-template-rows:1fr 2fr;
grid-template-columns:100px 1fr 2fr;
grid-template: rows / columns /areas
grid-template: repeat(2, 1fr) / repeat(3, 1fr);
grid- template- rows: 100 px mimax ( 100 px, 1 fr) ;
row- gap: 10 px;
columns- gap: 20 px;
gap: 20 px 10 px;
main>div:first-child {
grid-row-start : 1;
grid-column-start : 3;
grid-row-end : 4;
grid-column-end : 4;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqEM0sJK-1634980622723)(小知识点.assets\image-20210910201822847.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKfHReXs-1634980622724)(小知识点.assets\image-20210910201925675.png)]
grid- row- end: span 1 ;
grid- column- end: span 1 ;
grid- row: 1 / span 3 ;
grid- column: 1 / span 1 ;
grid- area: 1 / 2 / 4 / 3 ;
grid- template- columns: 60 px 1 fr;
grid- template- rows: 60 px 1 fr 60 px;
grid- template- areas: "header header" "nav main" "footer footer" ;
header{
grid- area: header;
}
footer{
grid- area: footer;
display: grid;
grid- template- columns: repeat ( 4 , 1 fr)
}
grid- template- columns: 60 px 1 fr;
grid- template- rows: 60 px 1 fr 60 px;
grid- template- areas: "nav ." "nav ." "footer footer" ;
nav{
grid- area: nav;
}
justify-content
justify-items
上面两个的区别
align-content
align-items
------------
align-self //元素独立控制
justify-self
//简写
place-content: <align-content> <justity-content>
place-items:<align-items> <justify-items>
place-self:<align-self><justify-self>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O9PmF54R-1634980622725)(小知识点.assets\image-20210911120059621.png)]
r
o
u
t
e
和
route和
r o u t e 和 用来获取路由信息
route是路由器信息对象, 里面主要包含路由的一些基本信息
当前路由的名称, 如果有的话
字符串, 对应当前路由的路径, 总是解析为觉得路径, 如 “/foo/bar”
当前路由的hash值( 带 # ), 如果没有hash值, 则为空字符串
类型: object
一个key/value对象, 表示URL查询参数,对于路径 /foo?user=1, 则有$route.query.user == 1, 如果没有查询参数, 则是空对象
类型: object
一个key/value对象. 包含了动态片段和全匹配片段, 如果没有路由参数, 就是一个空对象
完成解析后的URL, 包含查询参数和hash的完整路径
一个数组, 包含当前路由的所有嵌套路径片段的路由记录 . 路由记录就是 routes 配置数组中的对象副本( 还有在 children 数组 )
如果存在重定向, 即为重定向来源的路由的名字
用来操作路由
router是VueRouter的实例,包含了一些路由的跳转方法, 钩子函数等
$router.path
重定向就是通过各种方法将各种网络请求重新定个方向转到其他位置
如: 网页重定向 , 域名重定向, 路由选择的变化也是对数据报文由路径的一种重定向
const router = new VueRouter ( {
routes: [
{ path: '/a' , redirect: '/b' }
]
} ) ;
const router = new VueRouter ( { }
routes : [
{ path: '/a' , redirect: { name: 'foo' } }
]
) ;
const router = new VueRouter ( {
routes: [
{ path: '/a' , redirect : to => {
} }
]
} ) ;
在config.js模块里定义一个基本路径
var baseURL = "http://localhost:5050"
export {
baseURL
}
定义一个index.js 在src/assets 文件夹内新建文件夹apis ,专门发送首页的请求
import axios from "axios"
import { baseURL} from "../config.js"
function getIndex ( ) {
return new Promise (
function ( resolve, reject ) {
axios. get ( baseURL+ "/index" )
. then ( result => {
resolve ( result. data)
} )
}
)
}
export {
getIndex
}
定义一个details.js
import axios from "axios"
import { baseURL} from "../config.js"
function getDetails ( lid ) {
return new Promise (
function ( resolve, reject ) {
axios. get (
baseURL+ "/details" ,
{
params: { lid}
}
) . then ( result+ > {
resolve ( result. data)
} )
}
)
}
export {
getDetails
}
import { getIndex} from "../assets/js/apis/index.js"
export default {
data ( ) { } ,
methods{ } ,
...
mounted ( ) {
console. log ( "创建Index组件后,请求一次数据" ) ;
getIndex ( ) . then (
result => {
var arr = result;
[ this . p1, this . p2, this . p3] = arr;
this . others = arr. slice ( - 3 ) ;
}
) ;
}
}
import { getDetails} from "../assets/js/apis/Details.js"
export default {
props: [ "lid" ] ,
data ( ) { } ,
... .
methods ( ) {
myload ( ) {
getDetails ( this . lid) . then ( result => {
this . product = result. product;
this . specs = result. specs;
} )
}
} ,
create ( ) {
myload ( )
} ,
mounted ( ) {
myload ( )
}
}
npm i less-loader
然后报错, 兼容性问题 webpack的版本是4.46.0, 直接安装的less-loader是5版本最新版
npm view webpack versions
npm view less-loader versions
npm i less-loader@6 /会自动下载6的最新版本
https://regexper.com/
-----------什么是:
专门描述字符串中字符出现规则 的表达式
比如形容手机号:
第一位必须是1
第二位可以在3,4,5,6,7,8中选其一
后九位, 每一位都必须是一个数字
------------可用于:
-------------如何:
只要规则中某一位字符 上有多种备选字 时, 就用字符集
只能匹配一位
我[ 草艹槽]
[ 我卧] [ 槽艹草]
-----------如果[ ]中部分备选字符连续 , 可用 - 省略中间字符
备选字符连续 : ASCII
要匹配一位小写字母: [ a-z ] 共26个 要匹配一位大写字母: [ A-Z ] 共26个 要匹配一位字母: [ A-Za-z ] 共52个 要匹配一位字母或数字: [ 0-9A-Za-z ] 共62个 要匹配一位汉字: [ \u4e00-\u9fa5 ]
1 [ 3 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ] [ 0 - 9 ]
[ \u4e00- \u9fa5] [ A - Z ] ·[ 0 - 9 A- Z ] [ 0 - 9 A- Z ] [ 0 - 9 A- Z ] [ 0 - 9 A- Z ] [ 0 - 9 A- Z ]
------------正则表达式语法为四种最常用的字符集定义了最简化写法, 称为预定义字符集
-要匹配一位数字: \d => [ 0-9 ] digit(数字, 数位)
-要匹配一位字母, 数字或 _ : \w => [ 0-9A-Za-z_ ] 注意: 有下划线
能用简写用简写, 不能就不用
-要匹配一位空字符: \s 可匹配 空格, 制表符Tab等空白
要匹配所有文字( 任意字符 )通配符 : .
1 [ 3 - 9 ] \d\d\d\d\d\d\d\d\d
专门规定一个字符集出现次数 的规则
------------数量词紧跟 在其修饰的字符集 之后, 默认修饰相邻 的前 一个字符集
字符集{ n } 表示字符集必须 重复n次, 不能多也不能少
字符集{ n,m } 表示字符集至少 重复n次, 最多 重复m次
{ n, } 至少n次, 多了不限制
1 [ 3 - 9 ] \d{ 9 }
[ \u4e00- \u9fa5] [ A - Z ] ·[ 0 - 9 A- Z ] { 5 }
\d{ 4 , 6 }
***** 可有可无 , 多了不限制 大于等于0 ? 可有可无, 最多一次 0 或 1**+ ** 至少一次, 多了不限 大于等于1 //匹配字符串中的一组连续空字符
\s+
---------问题: 字符集只认识单个字, 不认识一组拼音 wocao
--------是指在多个子规则 中选其一匹配
---------如何: 子规则1 | 子规则2 => 满足规则1 或 满足规则2
--------- " | " 选择符只分左右, 不考虑单个字符 => 草 | cao
-------是指将多个子规则视为一组 , 再和分组外 的规则匹配
-------如何: 其他规则( 多个子规则 ) => 我( 草 | cao )
我 ( [ 草艹槽] | cao)
( [ 我卧] | wo) ( [ 草艹槽] | cao)
( [ 我卧] | wo) \s* ( [ 草艹槽] | cao)
( ( \+ 86 | 0086 ) \s+ ) ? 1 [ 3 - 9 ] \d{ 9 }
\d{ 15 } ( \d\d[ 0 - 9 X] ) ? => 测试 110102200012264 48520012551568444 X
( ( 微\s* ) | ( w\s* e\s* i\s* ) ) ( x\s* | 信\s* ) ( i\s* n\s* ) ?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DSOykesf-1634980622727)(\小知识点.assets\image.png)]
一个字符串中三个位置比较特殊
字符串开头 字符串结尾 英文句子中的每个单词中间的空白位置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DB9Dsz9a-1634980622728)(小知识点.assets\image-20210906142704762.png)] —如果只希望匹配特殊位置上的关键字时, 就可用特殊符号表示特殊位置
^ 表示 字符串开头
$ 表示字符串结尾
\b 表示单词边界 , 可匹配: 空格, 标点符号 , 字符串开头和结尾可将一个单词与其他单词分割开的符号
问题: 只写\b什么也匹配不到
原因: 其实\b是"零宽", 只匹配位置, 不匹配字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z11NSmzf-1634980622729)(小知识点.assets\image-20210906150237939.png)]
no zuo no die => \s+
no zuo no die => ^ \s+
no zuo no die => \s+ $
no zuo no die => ^ \s+ | \s+ $
you can you up => \b[ a- z]
\w+ => 1 个以上的合法字符
@ => 必须有一个@
\w+ => 1 个以上的合法字符
\. 必须有一个 . 但是 . 是通配符 要转义
\w+ + > 后至少有一个后缀是一个以上的合法字符
\. cn 最后的. cn可有可无
所以 => \w+ @\w+ \. \w+ ( \. cn) ?
i 忽略大小写 ignore(忽视)
g 全部 global(全局的)
console.log(str.search(/我草|卧槽|wocao/i));
查找一个固定 不变的敏感词在字符串中出现的位置
回顾: var i = str.indexOf(“敏感词”,fromi)
=> 在字符串str中, 从fromi位置开始, 查找下一个"敏感词"出现的位置
=> fromi可以可省略 则默认从0位置(开头)开始查找第一个"敏感词"出现的位置
=>返回值:
? 如果找到敏感词, 则返回敏感词第一个字 的下标位置i
? 如果没有找到敏感词,则返回-1
< input type= "text" id= "a" >
< p id= "p" > < / p>
< script>
var a = document. getElementById ( "a" ) ;
var p = document. getElementById ( "p" ) ;
a. oninput = function ( ) {
var str = a. value;
var i = str. indexOf ( "我草" )
if ( i== - 1 ) {
p. innerHTML = "允许发送" ;
p. style. color = "green"
} else {
p. innerHTML = "不允许发送" ;
p. style. color = "red"
}
}
< / script>
------存在问题: 只能查找敏感词的位置, 不能返回敏感词的内容
-------解决 : 使用match
用正则表达式模糊查找多种敏感词 的位置
var i = str.search(/正则/ )
--------返回值:
? 找到返回下标, 没找到-1
var i = str. search ( / [卧我|wo]([草艹槽]|cao) / i )
------存在问题: 默认只能查找第一个 敏感词, 无法查找字符串中所有 敏感词
-------解决 :加/g, 但是就只能返回内容了
获取敏感词的内容极位置
var arr = str.match(/正则/i)
-------返回值:
? 找到 , 就返回数组 包含这个敏感词的内容 和 敏感词的第一个字的位置
? 找不到, 返回null
-------数组结构:
? [ “0”:“敏感词的内容”,“index”:“敏感词的第一个字的位置” ]
< inputtype = " text" id = " a" > < pid = " p" > </ p> < script>
var a = document. getElementById ( "a" ) ;
var p = document. getElementById ( "p" ) ;
a. oninput = function ( ) {
var str = a. value;
var arr = str. match ( / ([我卧]|wo)([草艹槽]|cao) / i ) ;
if ( arr!= null ) {
p. innerHTML = ` 在位置 ${ arr. index} 发现敏感词 ${ arr[ 0 ] } , 不允许发送 ` } else {
p. innerHTML = "允许发送"
}
}
</ script> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AeQn8Ag-1634980622729)(小知识点.assets\image-20210906170939493.png)]
a. str. replace ( / 正则 / ig , "新值" ) ;
< inputtype = " text" id = " a" > < pid = " p" > </ p> < script>
var a = document. getElementById ( "a" ) ;
var p = document. getElementById ( "p" ) ;
a. onblur = function ( ) {
var str = a. value;
var i = str. replace ( / ([卧我]|wo)([草艹槽]|cao) / ig , "**" )
a. value = i;
}
</ script> [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T63oK68y-1634980622730)(小知识点.assets\image-20210906174908574.png)]
根据每次找到的敏感词的不同, 动态选择不同的新值替换
str = str. replace ( / 正则 / ig , function ( k ) {
return 根据k不同, 返回不同的新值
} ) ;
原理:
replace会用正则去str中查找每个符合要求的敏感词
每找到一个关键词, 就自动调用一次回调函数
每次调用回调函数时, 都会自动将本次找到的敏感词传给函数的形参变量k
回调函数内部, 根据本次传入的keyword关键词不同, 动态选择不同的新值返回给replace
replace 会自动用回调函数返回的新值, 替换到字符串中本次找到的关键词位置
var str = "you can you up" ;
str = str. replace ( / \b[a-z] / ig , function ( k ) {
console. log ( ` 调用了一次, 获得 ${ k} , 替换为 ${ k. toUpperCase ( ) } ` ) ;
return k. toUpperCase ( ) ;
} ) ;
console. log ( str) ;
删除关键词:
其实就是将找到的关键词替换为""
ES6/ES7 标准已经提供了trim等一系列去空格的函数
str.trimleft()
str.trimright()
str.trim()
function ltrim ( str ) {
return str. replace ( / ^\s+ / , function ( k ) {
return '' ;
} ) ;
}
var str = " no zuo no die " ;
console. log ( ltrim ( str) ) ;
function rtrim ( str ) {
return str. replace ( / \s+$ / , function ( k ) {
return "" ;
} ) ;
}
console. log ( rtrim ( str) ) ;
function trim ( str ) {
return str. replace ( / ^\s+|\s+$ / g , function ( k ) {
return ""
} ) ;
}
console. log ( trim ( str) ) ;
----分割符是一个固定不变得字符
var arr = str. split ( "分隔符" ) ;
-----切割符不是规定的, 但是却有规律
var arr = str. split ( / 正则 / ) ;
< ulid = " score" > < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < script>
var ul = document. getElementById ( "score" ) ;
var html = ul. innerHTML;
html = html. replace ( / ^\s*<li>|<\/li>\s*$ / ig , "" ) ;
console. log ( html) ;
var arr = html. split ( / <\/li>\s*<li> / ) ;
console. log ( arr) ;
</ script> var reg = new RegExp ( "正则表达式" , "ig" )
var reg = / 正则 / ig 记得前后加 ^ $
var res = reg. test ( str) ;
var arr = reg. exec ( str) ;
**–**连接一个或多个数组, 返回一个新数组
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = [ 4 , 5 , 7 ] ;
var arr3 = [ 11 , 21 , 22 ]
var arr4 = arr1. concat ( arr2, arr3) ;
console. log ( arr4) ;
**–**将数组元素拼接成字符串
var arr1 = [ 1 , 2 , 3 ] ;
var str = arr1. join ( '+' ) ;
console. log ( str) ;
**–**将数组元素进行反转
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1. reverse ( ) ;
console. log ( arr2) ;
**–**数组元素排序
var arr1 = [ 1 , 21 , 31 , 22 , 78 , 2 , 3 , 11 ] ;
var arr2 = arr1. sort ( ( a, b ) => a- b) ;
console. log ( arr2) ;
**–**向数组的最后面添加元素( 返回数组长度,会改变原数组 )
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1. push ( 'a' ) ;
console. log ( `
arr1: ${ arr1}
arr2: ${ arr2} ` ) ;
**–**删除数组的最后面的元素
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1. pop ( ) ;
console. log ( arr1) ;
console. log ( arr2) ;
**–**在数组的最前面插入元素( 返回数组长度, 会改变原数组 )
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1. unshift ( 2 , 3 , 'c' ) ;
console. log ( arr1) ;
console. log ( arr2) ;
**–**删除数组的最前面的元素( 返回被删除的元素 )
var arr1 = [ 1 , 2 , 3 ] ;
var arr2 = arr1. shift ( ) ;
console. log ( arr1) ;
console. log ( arr2) ;
**–**返回数组, 返回原数组的删除项目 会改变原数组
var arr1 = [ 1 , 2 , 3 , 4 , 5 , 7 ] ;
var arr2 = arr1. splice ( 1 , 2 ) ;
console. log ( arr1) ;
console. log ( arr2) ;
var arr1 = [ 1 , 2 , 3 , 4 , 5 , 7 ] ;
var arr2 = arr1. splice ( 1 , 2 , 'b' ) ;
console. log ( arr1) ;
console. log ( arr2) ;
**–**返回值为截取之后的数组, 不改变原数组 , 含头不含尾
var arr1 = [ 1 , 2 , 3 , 4 , 5 , 7 ] ;
var arr2 = arr1. slice ( 1 , 3 ) ;
console. log ( arr1) ;
console. log ( arr2) ;
专门判断一个数组中是否***所有元素 ***都符合要求
var 判断结果 = 数组. every (
function ( 当前元素值, 当前数组的下标, 当前数组 ) {
return 检查当前元素值是否符合要求, 并返回检查结果
}
)
var arr1 = [ 2 , 4 , 6 , 8 , 10 ] ;
var res1 = arr1. every ( ( n, i, arr ) => {
console. log ( ` 当前元素值 ${ n} ,当前下标 ${ i} ,当前数组 ${ arr} ,判断当前元素值是否为偶数 ${ n% 2 == 0 } ` ) ;
return n% 2 == 0 ;
} ) ;
专门检查一个数组中***是否包含 ***符合要求的元素
var 判断结果 = 数组. some (
function ( 当前元素值, 当前下标, 当前数组 ) {
return 判断当前元素值是否符合要求
}
) ;
映射/对应
专门读取原数组中的每个元素值, 进行***修改 **后(比如所有元素 2), 生成一个新数组返回
var 新数组 = 原数组. map (
function ( 当前元素值, 当前下标, 当前数组 ) {
return 当前元素值修改后的新值;
}
) ;
遍历
专门代替for循环来简化***遍历索引数组***的特殊函数
数组. forEach (
function ( 当前元素值, 当前下标, 当前数组 ) {
对当前元素值执行操作;
}
) ;
var arr = [ "亮亮" , "楠楠" , "东东" ] ;
arr. forEach ( ( n ) => { console. log ( ` ${ n} --到 ` ) } ) ;
复制出数组中符合要求的个别元素, 放入新数组返回
var 新数组 = 数组. fliter (
function ( 当前元素值, 当前下标, 当前数组 ) {
return 判断当前元素值n是否符合要求;
}
) ;
需要对数组中所有元素进行统计, 并放回统计结果的函数,允许设置初始值
var 结果 = 数组. reduce (
function ( 捐款箱box, 当前元素值, 当前下标, 当前数组 ) {
return 捐款箱+ 当前元素值
}
起始值
) ;
var arr = [ 1 , 3 , 4 , 6 ] ;
var res = arr. reduce ( ( box, n, i, arr1 ) => {
console. log ( ` 收到捐款箱变量: ${ box} , 当前元素值: ${ n} , 当前数组的下标: ${ i} ,当前数组: ${ arr1} ` ) ;
return box + n;
} ,
2
) ;
console. log ( res) ;
这个方法会返回一个由一个给定对象 的自身 可枚举属性组成 的数组 , 数组中属性名的排列顺序 和 正常循环遍历该对象时返回的顺序一致
Object.keys(obj)
let data = {
sname : "李雷" ,
address: "北京"
}
let arr = Object. keys ( data)
console. log ( arr) ;
let data = [ 'a' , 'b' , 'c' ]
let arr = Object. keys ( data)
console. log ( arr) ;
用于将JavaScript值转为json字符串
JSON.stringify(value)
JSON通常用于与服务器端交换数据
在接收到服务器数据时一般是字符串
使用这个方法将数据转换为JavaScript对象
JSON.parse(text)
什么时候会清除:
用户主动清空了缓存
使用户触发了清空的api
< title> localStorage< / title>
< ! -- 用户主动清空缓存 -- >
< ! -- 使用户触发了api -- >
< / head>
< body>
< h2> localStorage< / h2>
< button onclick= "saveData()" > 点我保存一个数据< / button>
< button onclick= "readData()" > 点我读取一个数据< / button>
< button onclick= "delData()" > 点我删除一个数据< / button>
< button onclick= "delAllData()" > 点我清空一个数据< / button>
< script>
let p = { name: '张三' , age: 18 }
function saveData ( ) {
localStorage. setItem ( 'msg' , 'Hello' ) ;
localStorage. setItem ( 'msg2' , 666 ) ;
localStorage. setItem ( 'person' , JSON . stringify ( p) ) ;
}
function readData ( ) {
console. log ( localStorage. getItem ( 'msg2' ) ) ;
console. log ( localStorage. getItem ( 'msg' ) ) ;
var res = localStorage. getItem ( 'person' ) ;
console. log ( JSON . parse ( res) ) ;
}
function delData ( ) {
localStorage. removeItem ( 'msg2' ) ;
}
function delAllData ( ) {
localStorage. clear ( ) ;
}
< / script>
和localStronage的api一样
区别在于, 关闭浏览器就会自动清空缓存
data ( ) {
return {
tasks: JSON . parse ( localStorage. getItem ( 'task' ) ) || [ ]
}
} ,
watch: {
tasks: {
deep: true ,
handler ( value ) {
localStorage. setItem ( 'task' , JSON . stringify ( value) ) ;
}
}
} ,
一种组件间的通信方式, 适用于 子组件 ===> 父组件
a是父组件
b是子组件
b 想给 a 传数据 , 那么就要在 a 中给 b 绑定自定义事件 ( 事件在回调 a 中 )
直接在子组件身上绑定
<school @getSchooName=“getSchoolName”/>
//父组件中
<template>
<div class="myapp">
<!-- 通过父组件给子组合绑定一个自定义事件实现 -->
<!-- 事件名 回调函数(事件处理函数)-->
<!-- ↓ ↓-->
<school @getSchoolName="getSchoolName"/>
<!-- .once表示只执行一次, 事件修饰符 -->
<!-- <school @getSchoolName.once="getSchoolName"/> -->
</div>
</template>
<script>
import School from './components/School.vue'
export default {
data(){
return {
myname:''
}
},
methods:{
// 接收子组件的值
// ↓
getSchoolName(params){
console.log(`收到了学校的名字: ${params}`);
//将子组件的值放到data里的myname上, 然后显示在页面
//插值语法只能读取 data props computed里的值
this.myname = params;
}
}
components:{Student,School}
}
</script>
//子组件中
<template>
<div class="school">
<h2>学校名 :{{schoolName}}</h2>
<!-- 子组件的回调函数(事件处理函数)-->
<!-- ↓ -->
<button @click="getSchoolName">获得学校的名字</button>
</div>
</template>
<script>
export default {
data(){
return {
schoolName:'翻斗小学',
}
},
methods:{
//子组件的事件处理函数
getSchoolName(){
// 父组件的自定义事件名 要传递的值(可以多个)
// ↓ ↓
this.$emit('getSchoolName',this.schoolName);
},
}
}
</script>
拿到了子组件实例对象再进行绑定
< school ref= "school" / >
methods: {
getSchoolName ( params ) {
console. log ( ` 收到了学校的名字: ${ params} ` ) ;
this . myname = params;
}
}
this . $refs. school. $on ( "getSchooName" , this . getSchoolName) ;
想让事件只能触发一次, 可以使用once修饰符, 或$once方法
this.$emit("getSchoolName",数据);
this.$off( ‘getSchooName’ )
this.$off() //清除所有
this.$off([“getSchoolName”,“demo”]); //解绑多个
使用native修饰符
通过this.
r
e
f
s
.
x
x
x
.
refs.xxx.
r e f s . x x x .
—一种组件间通信的方式, 适用于任意组件间通信
new Vue ( {
... .
beforeCreate ( ) {
Vue . prototype. $bus = this
}
... . .
} ) ;
接收数据:A组件想接收数据,则A组件中给$bus绑定自定义事件 , 事件的回调 留在A组件中methods: {
demo ( value ) {
console. log ( ` 接收到了 ${ value} ` ) ;
}
} ,
mounted ( ) {
this . $bus. $on ( 'xxx' , this . demo) ;
}
this . $bus. $emit ( 'xxx' , 要传递的数据) ;
最好在beforeDestroy钩子中, 用$off解绑当前组件所用到****的事件
原因: 绑定在$bus上的自定义事件是不能重名的
beforeDestroy ( ) {
this . $bus. $off ( 'xxx' ) ;
}
总结: 父给子传 用props
? 子给父传 用函数 或者 自定义事件
? 其他( 兄弟 父传孙 ) 用全局事件总线
----- 一种组件间通信的方式, 适用于任意组件间通信
订阅消息: 消息名 发布消息: 消息内容 需要用到第三方库 pubsub.js => publish ( 发布 ) subcribe ( 订阅 )
npm i pubsub-js
import pubsub from 'pubsub-js'
methods: {
demo ( msgName, data ) {
console. log ( ` 接收到传递的数据 ${ data} ` ) ;
}
} ,
mounted ( ) {
this . pid = pubsub. subscribe ( 'xxx' , this . demo) ;
pubsub. publish ( 'xxx' , 数据) ;
最好在beforeDestroy钩子中, 取消订阅
Pubsub. unsubcribe ( pid )
注册用户: https://gitee.com/
官网: https://www.babeljs.cn/docs/
是一个javascript编译器
是一个工具链, 主要将用于采用ECMAScript 2015+ 语法编写的代码转换为向后兼容的javascript语法. 以便能够运行在当前和旧版本的浏览器或其他环境中
#### 使用事件总线
- **接收数据:**A组件想接收数据,则A组件中给$bus绑定自定义事件**, 事件的回调**留在A组件中
````js
methods:{
//事件处理函数
demo(value){
console.log(`接收到了${value}`);
}
},
mounted(){
//给$bus绑定自定义事件
// 事件名
// ↓
this.$bus.$on('xxx',this.demo);
}
this . $bus. $emit ( 'xxx' , 要传递的数据) ;
最好在beforeDestroy钩子中, 用$off解绑当前组件所用到****的事件
原因: 绑定在$bus上的自定义事件是不能重名的
beforeDestroy ( ) {
this . $bus. $off ( 'xxx' ) ;
}
总结: 父给子传 用props
? 子给父传 用函数 或者 自定义事件
? 其他( 兄弟 父传孙 ) 用全局事件总线
----- 一种组件间通信的方式, 适用于任意组件间通信
订阅消息: 消息名 发布消息: 消息内容 需要用到第三方库 pubsub.js => publish ( 发布 ) subcribe ( 订阅 )
npm i pubsub-js
import pubsub from 'pubsub-js'
methods: {
demo ( msgName, data ) {
console. log ( ` 接收到传递的数据 ${ data} ` ) ;
}
} ,
mounted ( ) {
this . pid = pubsub. subscribe ( 'xxx' , this . demo) ;
pubsub. publish ( 'xxx' , 数据) ;
最好在beforeDestroy钩子中, 取消订阅
Pubsub. unsubcribe ( pid )
注册用户: https://gitee.com/
官网: https://www.babeljs.cn/docs/
是一个javascript编译器
是一个工具链, 主要将用于采用ECMAScript 2015+ 语法编写的代码转换为向后兼容的javascript语法. 以便能够运行在当前和旧版本的浏览器或其他环境中