操作题
Vue 两个等号 == 和三个等号 === 的区别
== 用于比较两者是否相等,忽略数据类型。
=== 用于更严谨的比较,值和值的数据类型都需要同时比较。
为什么vue中data必须是一个函数
https://blog.csdn.net/xyphf/article/details/88863059
Vue中v-model与:value的区别
v-model不可以加其他值:<input type="text" v-model="curAmount">
:value可以加 单位:<input type="text" :value="curAmount+'元'">
var,let,cont声明变量的区别
https://www.cnblogs.com/bonly-ge/p/9262723.html
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量。
全局变量:在函数外声明的变量作用域是全局的。全局变量在JS任何地方都可以访问。
ES2015(ES6) 新增加了两个重要的 JS关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
函数内使用 var 声明的变量只能在函数内容访问,如果不使用 var 则是全局变量
使用 var 关键字声明的全局作用域变量属于 window 对象
var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明。
let 关键字定义的变量需要先声明再使用。声明的变量只在 let 命令所在的代码块内有效。
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改。
vue中 require和import区别
https://www.cnblogs.com/caiguangbi-53/p/11757508.html
let echarts = require('echarts/lib/echarts')
这里require直接从 node_modules 中查找文件位置进行引入
vue中 ref 和 $refs 的介绍与使用
https://blog.csdn.net/qq_38128179/article/details/88876060
>在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。
vue中 $router 和 $route 的区别
https://blog.csdn.net/benben513624/article/details/86657492
Vue router 中的 params和query的区别
除了params可以传递参数,query也可以,写法其实很相似,
区别在于1、params需要用name来引入,query需要path来引入
vue中 路由 query 和 props
vue 路由参数变化,页面不刷新(数据不更新)解决方法:watch中监听to from对比
https://blog.csdn.net/qq_29483485/article/details/88383544
vue 文件、图片上传
https://www.cnblogs.com/rogerwu/p/9274193.html
https://www.cnblogs.com/liu2lognew/p/14502157.html
1 VUE相关知识
1.1 Node.js
Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。总结一下,node,js提供了javascript在浏览器以外的一个执行环境,满足一些特定的场景需求。
1.2 npm
npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。
npm install 、npm install --save 和 npm install --save-dev的区别
相同点:三者都会本地安装包到项目的node_modules目录中
区别在于对项目package.json的修改,npm install不会修改package.json,而后两者会将依赖添加进package.json
2 VUE的基本介绍
VUE 作者 尤雨溪
VUE是MVVM框架,它是渐进式JavaScript框架,是轻量级的。
核心是Dom的监听和数据的绑定
Vue.js是一个构建数据驱动的界面的库,其目标是实现响应的数据绑定和组合的试图组件。
Vue.js拥抱数据驱动的视图概念,这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定,DOM将与数据保持同步。
(v-model 表单双向数据绑定)
异步执行 DOM 更新
具体来说,异步执行的运行机制如下。
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)当"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。
那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
nextTick
只有同步环境执行完毕,DOM渲染完毕之后,才会处理异步callback
vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
https://www.cnblogs.com/hity-tt/p/6729118.html
1.基础的JavaScript的试图驱动。重新绘制事件模型
2.1 Vue.js 目录结构
目录 | 说明 | |
---|---|---|
build | … | 项目构建(webpack)打包相关配置文件 |
… | webpack.base.conf.js | 基本配置文件 |
… | webpack.dev.conf.js | 开发环境的配置文件 |
… | webpack.prod.conf.js | 生产环境的配置文件 |
… | webpack.test.conf.js | 测试环境的配置文件 |
config | … | 配置文件的目录,也有三类环境的配置文件 |
… | index.js | 核心配置文件,运行的主机、端口、代理配置(跨域) |
node_modules | … | npm 加载的项目依赖模块 |
public | … | 不会被webpack打包,输入路径时必须使用绝对路径。 |
src | … | 要开发的目录,项目的核心区域,所有的开发文件的核心内容区域,包括组件,静态资源等。包含了几个目录及文件: |
… | assets | 静态资源文件夹,如*.html或logo图片等。和public不同的是assets文件夹会被webpack打包。 |
… | components | vue功能组件的存放位置,内部存放的是公共组件。目录里面放的组件文件,可以不用。 |
… | router | 配置所有的路由 |
… | views | vue的根组件,所有的vue组件都是从这个组件中扩展的,App.vue通过编译后将内容编译到.html页面文件中。公共文件,主要以各个独立页面为主。 |
… | App.vue | 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。 |
… | main.js | 项目的核心文件,vue 的入口文件。所有的Vuex代码都必须在main.js中进行注册。 |
static | … | 静态资源目录,如图片、字体等。 |
test | … | 单元测试程序代码目录 |
.gitignore | … | 这些是一些配置文件,包括语法配置,git配置等。Github相关配置,作用是git提交代码时可以指定忽略哪些文件。 |
index.html | … | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | … | 项目配置文件,即项目的相关模块或配置信息 |
package.lock.json | … | 项目配置文件,即项目的相关模块或配置信息。(记录当前项目安装相关依赖版本号,vue编译时会按照这个文件进行编译。) |
README.md | … | 项目的说明文档(项目相关打包编译及指令说明),markdown 格式 |
… | … | … |
2.2 声明
声明式渲染,每个 Vue 应用都需要通过实例化 Vue 来实现。
定义数据对象。data 用于定义属性
methods 用于定义的函数,可以通过 return 来返回函数值。
注意点
Vue 的 el 属性是一个 CSS 选择器
Vue中所有对象中的清单内容都是固定的,不可以自由设置。
Promise
promise是什么?
1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列
axios
我们通常使用axios库与后台交互获取数据,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。
[需求及实现]
统一捕获接口报错、弹窗提示、报错重定向、基础鉴权、表单序列化
npm install axios; //安装axios
#实现的功能
统一捕获接口报错 : 用的axios内置的拦截器
弹窗提示: 引入 Element UI的Message组件
报错重定向: 路由钩子
基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子
表单序列化: 使用qs(npm模块)
链接:https://juejin.cn/post/6844903492948082702
2.1.1 {{ }} 插值语法moustache
{{ }} 用于输出对象属性和函数返回值。内部是data数据管理中心的属性渲染,也可以是表达式。moustache不支持if else复杂判断
//挂载点,所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
驼峰命名
vHead <v-head>
vMain <v-main>
1.注册组件的时候使用了驼峰命名
如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名。
2.传递数据时使用驼峰名称
如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名。
3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名。
3. 指令 directory
vue指令 (directory) 的作用是通过带有v-
的特殊属性,实现对dom的响应式加载。
按钮权限显藏。
js | js | vue |
---|---|---|
单机 | onclick | v-on:click 或 @click |
双击dbl | ondblclick | v-on:dblclick |
鼠标移上 | onmouthenter | … |
鼠标离开 | onmouthleave | … |
鼠标滑过 | onmouthmove | … |
鼠标移除 | onmouthout | … |
失去焦点 | onblur | … |
聚焦 | onfocus | … |
键盘事件 | onkeydown | … |
… | … | … |
vue 指令中el 的 parentNode 为空的问题
元素el的父元素parentNode变成了null
if (el.parentNode && !Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el);
}
我这边用的是bind的钩子函数。需要把钩子函数改成inserted就解决了。
vue指令
钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
3.1. v-if v-else-if
<div id="app">
<p v-if="false">我是第一行DOM元素</p>
<p v-if="true">我是第二行DOM元素</p>
</div>
<div id="app">
<p v-if="a==100">a=100</p>
<p v-else-if="a>100">a>100</p>
</div>
3.2. v-show
v-show是通过控制元素的display属性,对元素的显示和隐藏进行逻辑判断,并没有实现元素的下树。主要区别是涉及到页面的加载性能。
3.3. v-for
遍历数组,数组对象名称是可以自定义的,下标参数是index
遍历对象,与数组不同的是,
遍历JSON
<body>
<div id="app">
<table border="1">
<tr><td>序号</td><td>门店id</td><td>角色</td><td>账号</td><td>门店名称</td></tr>
<tr v-for="(member,index) in members">
<td>{{++index}}</td>
<td>{{member.memberId}}</td>
<td>{{member.role}}</td>
<td>{{member.account}}</td>
<td>{{member.shopName}}</td>
</tr>
</table>
</div>
</body>
<script>
//声明式渲染
var vue = new Vue({
el:'#app',//挂载点
data:{
members:[
{memberId:3389, role:6, account:"15100010001", shopName:"门店3389"},
{memberId:3386, role:6, account:"15100010006", shopName:"测试3386"}
]
}
})
</script>
作业:实现99乘法表
3.4. 3.4 v-html、v-text
{{}} 和 v-text 渲染文本区别:{{}}是赋值,v-text替换原来的文本信息
v-html渲染,模板
3.5. 3.5 v-cloak 遮盖指令
控制渲染,结束关联
v-cloak(遮盖)指令的作用是vue实例渲染后结束关联,所以我们可以实现网络延迟时不显示编译器的文本{{a}}
3.6. v-once 渲染一次
数据更新不会引起试图的更新,目的是为了优化页面的性能。
可用在功能组件上
3.7. v-pre跳过节点
v-pre跳过大量没有指令的节点,不去执行已标记过v-pre的节点
跳过该元素编译的过程,直接显示元素的文本
可用在某个元素上,
3.8. v-on添加事件监听
在vue中去除on,然后添加v-on或@符号,如
<button @click="add">按我加1</button>
<button v-on:click="minus">按我减1</button>
<button v-on:dblclick="minus">双击按我减1</button>
3.9. v-bind
v-bind属性对大小写不敏感。如果写驼峰命名,需要使用-隔开:
如helloWorld写为hello-world
3.10. v-model 表单双向数据绑定
实现表单元素的双向数据绑定。
$set
//向一个vo对象中增加markPoint 属性参数
var markPoint = {data: [{type: ‘max’, name: ‘最大值’}]}
this.$set(vo, ‘markPoint’, markPoint)
console.log(vo)
opt.series.push(vo);
3.11 数组
set 根据索引设置元素 this.arr.$set(index, val);
push 插入数据
使用this.$set
向数组中插入数据,向数组某个对象中插入属性。
setData() {
//向数组中插入数据
let a = [{ name: 'a', age: '17', sex: '男'}, { name: 'b', age: '18', sex: '女'}];
this.$set(a,2,{name: 'c', age: '20', sex: '男'});
console.log('list',a)
//向数组中的对象插入属性
this.$set(a[2],'salary',3500);
console.log('afterList',a);
}
splice删除
arr.splice(arr.indexOf(ele), length) 表示先获取元素的下标,删除长度为length的元素
arr.splice(1, 2) 删除数组索引为1开始的后面2个元素。
concat 合并数组
this.arr = this.arr.concat(anotherArr);
1、变异方法(修改了原始数组),vue为触发视图更新,包装了以下变异方法:
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
sort() 方法用于对数组的元素进行排序。
reverse() 方法用于颠倒数组中元素的顺序。
2、非变异方法(不会修改原始数组而是返回一个新数组),替换数组
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。
3、注意:以下操作不触发视图更新
this.arr[index] = val;
this.arr.length = 2;
其他
split() 方法用于把一个字符串分割成字符串数组。
事件
VUE事件
https://cn.vuejs.org/v2/guide/events.html
4. 修饰符
4.1. 选项卡
###4.2.
4.3. 发布框textArea
4.4. 事件修饰符
修饰符是vue功能的扩展,是对vue事件或者系统操作等进行功能的补充
4.4.1 .stop 处理事件穿透(常用)
vue写法 @click.stop阻止默认事件的发生
JavaScript的event.stopPropergation()方法
4.4.2 .self
.self修饰符的作用是只有点击元素本身时才能够触发事件,不接受冒泡上来的事件,同时不阻止事件冒泡。
4.4.3 .prevent
4.4.4 capture捕获机制处理
对事件捕获监听
4.4.5 .once
对捕获的事件只触发一次
4.5 按键修饰符
.space是vue封装的对keyCode别名,与下面的代码表示相同
JavaScript
4.6 系统修饰符
4.6.1 .ctrl
4.6.2 .exact
4.7 鼠标按键修饰符
<button @click.right=’add’>按我加1</button>
<button @click.right.prevent=’add’>按我加1</button>
鼠标右键点击时可以实现数值增加1,但是也会出现右键默认弹窗。
可结合prevent修饰符实现右键的事件监听。
.middle
<button @click.right.middle=’add’>按我加1</ button>
4.8 表单修饰符
.lazy 修饰符是将Input输入框的数据绑定v-model从实时监听状态变为change状态
.number 修饰符,将输入的含数字字符串转为纯数字类型,过滤无效的字符串。
.trim 修饰符,过滤前后空白
<div>
<input type="text" v-model.lazy="val">
<input type="text" v-model.number="val">
<input type="text" v-model.trim="val">
<p>{{val}}</p>
</div>
5 vue脚手架 vue-cli
vue-cli是vue的脚手架工具,帮助我们快速生成了vue的起步项目,内置一些必备的打包工具等,让我们快速开发上手。
地址:https://cli-vuejs.org/zh/
5.1 vue-cli 目录结构
见2.1
5.2 npm run 编译过程
在scripts这个对象中的key就是npm run的命令值。
vue-cli默认提供了三个命令,分别是编译/热部署,打包,lint检验文件代码合格性
输入npm run dev
第一步:从node_modules/.bin/vue-cli-service文件目录
vue-cli核心代码是lib/Service.js
5.3 起步文件介绍
一个vue的组件就是将试图和逻辑进行了一个整合。
main.js
所有的Vuex代码都必须在main.js中进行注册。
render渲染当前App.vue组件。
$amount(’#app’) 挂载函数。
App.vue
App.vue的 <template 中引入了HelloWorld组件,并打印HelloWorld信息。div 根标签不能去除。
template 元素的作用是搭建vue文件的结构。
script 元素的作用是对当前文件逻辑进行交互。
style 元素的作用是对当前文件的样式进行修饰。
index.html
<noscript 标签
prototype
Vue.prototype.$axios = axios;
给vue函数添加一个原型属性$axios
指向Axios;这样做的好处是在vue实例或组件中不用再去重复引用Axios,直接用 this.$axios
就能执行axios 方法了
5.4 vue组件
所有的vue组件都是以.vue结尾的文件,vue-cli中的App.vue文件就是整个vue的根组件。
return 每个组件返回的是一个对象。
data是一个函数,返回的是一个对象,让每个数据隔离,这个是JavaScript原理设计的,export default必须要有一个暴漏。
People的data返回的是一个对象,每一个实例返回的都是独立对象,互不冲突。
5.5 props 父子组件传值
vue提供了一个props的入口,也是父子组件之间唯一的传值方式,父组件通过v-bind自定义属性传入值,子组件通过props接收对应的参数。
5.5 $emit 子组件向父组件传值
$emit()
方法是vue封装的,用于向父组件返回自定义事件。父组件通过在子组件设置对应的自定义事件后,触发该事件。
子组件不可直接修改父组件的值,只能传递一个自定义方法,父组件通过vue封装的$emit方法,调用这个自定义事件,实现修改父组件的值。
子组件使用 $emit 触发父组件的自定义事件
People.vue
在Number子类,点击子组件按钮调用add()函数,add触发$emit返回的自定义方法“add”。
App.vue父级通过@add接收返回事件sumNum()方法,触发sumNum()方法中的业务。完成a++动作
<template>
<div>
<h3>子组件向父组件传参</h3>
<h3>a:{{a}}</h3>
<button @click="add">按我加1</button>
</div>
</template>
<script>
export default {
props: {
a: {
type:Number,
required: true
}
},
data() {
return {
//返回Object
}
},
methods:{
add(){
this.$emit("add")//自定义父组件名称
}
}
}
</script>
<style></style>
App.vue
@add自定义事件是子组件通过@emit传递的自定义事件,修改父组件事件方法sumNum(),然后修改自己的值。
<template>
<div>
<People @add="sumNum" v-bind:a="a">
</People>
</div>
</template>
<script>
//引入People组件
import People from './components/People.vue'
export default {
components: {
People
},
data()
{
return {
a: 10
}
},
methods:{
sumNum(){
console.log("最终在这里执行a++动作")
this.a++
}
}
}
</script>
<style></style>
5.5 watch
watch显示2个参数一个是旧的,一个是新的。作用是用来监听数据,data中的数据,及props、路由。
handler()是监听函数,如果需要初始化时进行监听,将immediate设置为true.
5.7 computed 计算属性
5.7.1. computed与普通的methods的区别
6 $attrs、$listeners
实例属性
(1)$attrs
包含了父作用域中不作为prop被识别(且获取)的attribute绑定参数(class和style除外)。一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(class和style除外),并且v-bind=”$attrs”传入内部组件——在创建高级别的组件时非常有用。
(2)$listeners
包含了父作用域中的(不含.native修饰器的)v-on事件监听器。
它可以通过v-on=”$listeners”传入内部组件—在创建更高层次的组件时非常有用。
$listeners
获取的是祖先组件绑定到后代组件的所有事件监听,如:Parent传递add事件,Child传递minus()事件方法,则GrandSon能够通过$listeners获取到add()和minus()两个事件。
即:子组件可以接收到父组件的(非.native修饰符)的事件监听。
//.native辅助原生的事件监听。
<Child v-on:click.native="add"></Child>
7 $refs 和 $el 实例属性
7.1.1 $refs 控制子元素事件
7.1.2 $el 通过refs修改样式
Vue 的 el 属性是一个 CSS 选择器
7.2 mounted()
ref 和 $refs
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。
ref的介绍
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例
通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
<p ref="p">Hello</p>
<children ref="children"></children>
this.$refs.p
this.$refs.children
$refs的介绍
this.$refs
是一个对象,持有当前组件中注册过 ref 特性的所有 DOM 元素和子组件实例
注意: $refs只有在组件渲染完成后才填充,在初始渲染的时候不能访问它们,并且它是非响应式的,因此不能用它在模板中做数据绑定
.
注意:当ref和v-for一起使用时,获取到的引用将会是一个数组,包含循环数组源
https://blog.csdn.net/qq_38128179/article/details/88876060
8 mixins 混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
8.1 第一节:可复用的功能
用来分发vue组件中可复用的功能。一个混入对象可以包含任意组件选项。类似函数封装。
在混入mixins文件增加create(),会分别依次执行,不会进行覆盖。
slot 插槽
很详细
https://www.cnblogs.com/loveyt/p/9946450.html
作用域插槽
作用域插槽,就是在槽上面绑定数据。
作用域插槽绑定了一套数据,父组件可以拿来用,情况就是:样式父组件说了算,但内容可以显示子组件插槽绑定的。
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu']
}
}
}
router-view
router-view
Webpack
20.1 创建项目 vue init webpack myvue
20.2 启动项目 npm run dev
20.3 编译 npm run build
VUE + Element UI
npm i element-ui -S #在项目的根目录安装Element UI
在package.json可以看到elementui已经引入成功了
修改/src/main.js文件,引入element-ui和样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
后台界面布局
登录
vue+elementui搭建后台管理界面(1登录)
https://www.cnblogs.com/wbjxxzx/p/9942648.html
首页
首页布局代码
<template>
<!-- <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。 -->
<el-container>
<el-header>
<div class="header_logo"><img :src="header_logo_img" alt="alm-iot" />后台管理-布局</div>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-active='activeIndex' class="el-menu-demo" model="horizontal" @select="handleSelect">
<!-- <el-menu :default-active="this.$router.path" model="horizontal" @select="handleSelect" router> -->
<el-menu-item index="1">个人中心</el-menu-item>
<el-submenu index="2">
<template slot="title" class="fr">设备管理</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu>
<el-menu-item index="/OrderList">订单管理</el-menu-item>
</el-menu>
</el-aside>
<!--Main中的内容-->
<el-main>Main
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import header_logo_img from "@/assets/logo.png";
export default {
name: "Home",
data() {
return {
header_logo_img,
msg: "Elelement Layout Home",
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-container {
position: absolute;
width: 100%;
top: 0px;
left: 0;
bottom: 0;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
.el-menu .fr {
float: right;
}
/*边框底部*/
.el-header .el-menu {
border-bottom: none;
}
.el-aside, .el-main {
padding-top: 60px; /*填充上部*/
}
.el-aside .el-menu {
border-right: none; /*menu右边框*/
}
.el-header {
width: 100%;
background-color: #b3c0d1;
color: #333;
text-align: left;
line-height: 60px;
padding: 0;
z-index: 1000;
}
.header_logo {
flex: 3;
display: flex;
justify-content: left;
margin-left: 10px;
}
.header_logo img {
width: 50px;
height: 50px;
}
</style>
MD5加密
随机数,签名,时间戳,token
1.安装
npm install --save js-md5 -d
2.在mian.js中引入
import md5 from 'js-md5';
3.设置成全局属性,方便每个页面使用
Vue.prototype.$md5 = md5;
4.在需要的页面中调用
this.$md5('原始密码');
前端vue 用rsa加密传输
npm i jsencrypt -S
https://www.cnblogs.com/wqnmlgbsz/p/13094289.html
参考资料
https://www.runoob.com/vue2/vue-tutorial.html
$refs, $children, $parent获取父子组件的实例来实现父子组件之间的通信
https://blog.csdn.net/yiyueqinghui/article/details/84203477