[真传弟子]JS-陈振华|2019年11月13日的日报-技能树.IT修真院

发表于： 2019-11-13 19:04:09

1 941

今天完成的事情：

重构路由守卫

整理CSS知识

路由全局守卫

router.beforeEach((to,from,next)=>{

//to:进入到哪个路由里

//from:从哪个路由离开

//next:函数，决定是否展示客户想要跳转的路由页面

})

例子🌰： main.js中设置全局守卫

在main.js中，有一个路由实例化对象router。在main.js中设置的守卫是全局守卫

router.beforeEach((to,from,next)=>{

if(to.path=='/login'||to.path=='/register'){

next() //判断判断压进入的地址是不是登录或注册，如果是就跳转到对应页面

}else{

alert('请登录');//如果不是就跳转到指定页面

next(’/login‘)

}

})

全局后置钩子 router.afterEach((to,from)=>{//})

只有两个参数，to:进入到哪个路由     from:从哪个路由离开

router.afterEach((to,from)=>{

alert(" "您即将离开"+from.path+"进入"+to.path")

})

判断是否登录 store.gettes.isLogin===false

组件内的路由守卫

当进入这个组件时，可以使用beforeRoutnEnter:(to,from,next)=>{}函数进行一些操作

export defult{

data(){ return { name:"aaa " } },

beforeRoutnEnter:( to,from,next)=>{ alert("hello"+this.name) } //结果为hello undefined

原因：这个声明周期有关，在执行完之前，data数据还未渲染，可以给next()设置一个回调函数解决

beforeRoutnEnter:( to,from,next)=>{next(vm=>{ alert("hello"+vm.name) })} //这样就可以获取name属性了

}

当离开这个组件时，可以使用beforeRoutnLeave:(to,from,next)=>{}函数进行一些操作

例子：离开弹出确认窗口

beforeRouteLeave:(to,from,next)=>{

if(confirm("确定要离开此页面吗？")==true){  next  }

else{ next(false) }

}

路由守卫独享守卫

{path:"/路径",componet:组件名称, beforEnter:(to, from,next )=>{} },写在路由对象中，只对该路由起作用，用法与全局相同

路由复用

新建router.js

import XX-name  from ' 路径' //写路由

export const routes=[

{path:' 自定义路径' components:

default:默认页面，

' name1':name1,

' name2':name2

}

]

main.js

import  { routes }  from ' ./router文件路径'//引用

const router=new VueRouter({

routes，//注册路由

})

app.vue

<router-view name:复用组件名1></router-view>

<router-view name:复用组件名2></router-view>

CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名.

CSS3的基本选择器

(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}

(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签

(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容</标签>，但同一个id属性的选择器在页面中只能用一次。

基本选择器的优先级：ID选择器>类选择器>标签选择器

CSS3的高级选择器

.层次选择器：

(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。

(2)子选择器A>B{ }：只能选择A的子元素。

(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素

(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。

(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似

(2)B:last-child 作为父元素的最后一个子元素B

(3)A B:nth-child(n) 在父级中查第n个子元素是不是B，不分类型

(4)B:first-of-type 选择父元素内B类型的第一个元素B

(5)B:last-of-type 选择父元素内B类型的最后一个元素B

(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

属性选择器：

(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性，但要同时存在)

(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签

(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串

(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串

(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

CSS3设置文本样式：

(1)<span>标签：用来设置行内元素(或几个文字)的样式。

(2)字体样式：

font-size：常用单位px

font-family：若同时设中英文字体，英文字体要设置在中文字体前面

font-style：normal标准、italic斜体、oblique倾斜

font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。

font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗

font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"

如 font:italic bold 36px "宋体";

(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"

Text-transform：控制文本的大小写：

none 默认，定义既有小写字母也有大写字母的标准文本(原文)

capitalize 每个单词以大写字母开头

uppercase 全部为大写字母

lowercase 全部小写字母

inherit 从父元素继承text-transform属性的值。

direction属性：规定文本的方向/书写方向。

ltr 文本方向从左到右

rtl 方向从右到左

inherit 继承父元素direction属性的值。