Vue——element-UI框架、JSON Web Tokens、样式穿透

目录

一、element-UI框架

1.安装: 

2.引入 (全部导入方式)

3、use的解释

4、element-ui 的使用

二、JSON Web Tokens​​​​​​​

1、安装egg-jwt

2、配置

3、如何创建令牌

 4、案例

三、样式穿透

1、 什么情况下使用样式穿透

2、 样式穿透的三种办法

1. >>>

2. /deep/

3. ::v-deep

4. :deep()  穿透选择器

3、/deep/ ,>>>,::v-deep的区别


一、element-UI框架

1、纯html-ui框架:layui、 bootstrap 、mui 、jQuery-ui... 

就是一份写好样式的css代码

2、基于框架的ui框架:Vue、react...

写好了样式和基于框架语法的组件的组件库

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

根据Vue框架的语法,已经是实现了很多组件,只需引入然后注册魏组件,再使用就行了

1.安装: 

npm i element-ui -S
 

2.引入 (全部导入方式)

import ElementUI from 'element-ui';   //引入组件库,但是注意css有可能会冲突

import 'element-ui/lib/theme-chalk/index.css';   //引入全局的css样式,整个ui框架的风格

Vue.use(ElementUI);   //注册全局组件,把ElementUI框架提供的所有组件全部注册为全局组件

import Vue from 'vue';
import ElementUI from 'element-ui';   //引入组件库,但是注意css有可能会冲突
import 'element-ui/lib/theme-chalk/index.css';//全局的css样式
import App from './App.vue';

Vue.use(ElementUI);//注册全局组件==>Vue.component("xxxx",{})

new Vue({
  el: '#app',
  render: h => h(App)
});

(一般说use是去给原型绑定东西,但是这里不是,它是去全局注册)

install(arg){arg就是调用use对象,install会直接运行}

3、use的解释

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//一.自定义全局组件
import Gold1 from './components/Gold1.vue'
//Gold1.name Gold1文件中导出的对象的属性
Vue.component(Gold1.name,Gold1)
Vue.component("mygold",Gold1)
//二.use语法
// let obj={
// 	//有几个函数 自行研究 我只讲install
// 	install(arg){
// 		//agr就是调用use的对象
// 		// install会直接运行
// 		arg.prototype.hqyj=100
// 	}
// }
// let install=(arg)=>{
// 	arg.prototype.hqyj2=100
// 	arg.component("mygold",Gold1)
// }

// Vue.use(obj)//会执行obj内部的install
// Vue.use(install)//会直接执行传入install

// import  mytool from "./mytool.js"
// Vue.use(mytool)

//三.全部导入方式:
//1.引入ui框架  可以引入多个ui框架  但是注意css有可能会冲突 
import ElementUI from 'element-ui';
//2.引入全局css整个ui框架的风格
import 'element-ui/lib/theme-chalk/index.css';
//3.把ElementUI框架提供的所有组件全部注册为全局组件
Vue.use(ElementUI)

//四.按需导入方式:
// import 'element-ui/lib/theme-chalk/index.css';
// import {Switch} from 'element-ui';
// // Vue.component(Switch.name,Switch)
// Vue.use(Switch)



new Vue({
  router,
  store,//让整个vue项目仓库生效
  render: h => h(App)
}).$mount('#app')

4、element-ui 的使用

什么是布局?怎么排版的-最核心的就是怎么横着排列模块,竖着是无限高

1、栅格布局 ==>不是css技术,但是每一种ui框架都有,是css实现出来的,比如bootstrap的栅格就是浮动和定位实现的

2、css3-columns布局

3、flex弹性布局

4、表格布局

5、.......

树形控件

二、JSON Web Tokens

“ JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理,用法和详细的数据结构。 Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。

网络请求的过程中,记不住密码,把账号密码发给它的后台,就会生成一个token码,下次登录或者请求网站的任何东西的时候,只需要把token码发给它,就可以登录了

1、安装egg-jwt

npm install egg-jwt --save

2、配置

// {app_root}/config/plugin.js
exports.jwt = {
  enable: true,
  package: "egg-jwt"
};
// {app_root}/config/config.default.js

exports.jwt = {
  secret: "123456"
};

3、如何创建令牌

const token = app.jwt.sign({ foo: 'bar' }, app.config.jwt.secret);

把账号密码加密为暗文
          const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu");  

把发送的token解密为保存的数据
          let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu");

 4、案例

	async login1() {
		  var ziduan=this.ctx.request.body
		  // console.log(ziduan)
		  //把账号密码加密为暗文
		  const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu");  
		  console.log(token,111);
		  this.ctx.body={info:"ok",code:200,token}   //把token码发送给前端,然后其它页面把token码本地缓存起来
	}
	 async car(){
		  var ziduan=this.ctx.request.query
            //去数据库中验证是否正确,在加密
		  //把发送的token解密为保存的数据
		  let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu");
		  console.log(re)
		  this.ctx.body={info:"test"}
	 }

三、样式穿透

1、 什么情况下使用样式穿透

引入第三方组件库(如element-ui、element-plus),修改第三方组件库的样式
样式文件中使用了 scoped 属性,但是为了确保每个组件之间不存在相互影响所以不能去除

就是使用别人的框架,比如layui,elementUI,想把别人写的东西,改一下样式,颜色等

就是在控制台找到改盒子的class名,给他写你想要的样式,结果发现不生效,因为自己写的没有别人的优先级高


2、 样式穿透的三种办法

1. >>>

适用与 css、stylus,不太推荐,可能会有问题
外层类 /deep/ 想要修改类名 {修改样式}

2. /deep/

适用于 scss、less
外层类 >>> 想要修改类名 {修改样式}

3. ::v-deep

通用,据说可以加快编译速度
::deep 想要修改类名 {修改样式}

4. :deep()  穿透选择器

3、/deep/ ,>>>,::v-deep的区别

  • css 使用 >>>
  • less 使用 /deep/
  • scss 使用 ::v-deep

在style经常用scoped属性实现组件的私有化时,要改变element-ui某个深层元素(eg:.el-input__inner)或其他深层样式时,需要使用/deep/,如

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

注意:/deep/在vue 3.0会报错,如果/deep/报错,可采用::v-deep,效果基本一样

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

注意:深度作用选择器 >>>只作用于css,但如果是sass/less的话可能无法识别,这时候需要使用 /deep/和::v-deep 选择器。
 

你可能感兴趣的:(javascript,elementui,前端,vue,ui)