Vue全家桶从入门到实战

https://www.bilibili.com/video/BV1KJ411U7ML?from=search&seid=7930467750346277182

13mp4

P1 02.概述2

Vue概述
Vue基本使用
Vue模板语法
基础案例
Vue常用特性
综合案例

P2 03.基本使用

Vue的基本使用步骤
1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法做功能了
4、把vue提供的数据填充到标签里面

new Vue({
    el:'#app',
    data(){
        return {
            msg:'hello'
        }
    }
})

1.实例参数分析
el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2.插值表达式用法{{msg}}
将数据填充到HTML标签中
插值表达式支持基本的计算操作

3.Vue代码运行原理分析
概述编译过程的概念（Vue语法→原生语法）

P3 04.vue模板语法

1.如何理解前端渲染？
把数据填充到HTML标签中

2.前端渲染方式
原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法

3.原生js拼接字符串
基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如右图所示。

4，使用前端模板引擎
右侧代码是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

5，模板语法概览
差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

P4 05.指令v-cloak

1.什么是指令？
什么是自定义属性
指令的本质就是自定义属性
指令的格式：以v-开始（比如：v-cloak）

2.v-cloak指令用法
插值表达式存在的问题："闪动"
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值

v-cloak指令的用法
1、提供样式
[v-cloak]{
display：none；
}
2、在插值表达式所在的标签中添加v-cloak指令

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

官网：https://cn.vuejs.org/v2/api/

P5 06数据绑定指令

3，数据绑定指令
v-text填充纯文本没有闪动
相比插值表达式更加简洁

v-html填充HTML片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以用
v-pre填充原始信息
显示原始信息，跳过编译过程（分析编译过程）

P6 07数据响应式

4·数据啊应式
如何理解响应式
html5中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
数据绑定：将数据填充到标签中
v-once 只编译一次
显示内容之后不再具有响应式功能

v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

P7 08双向数据绑定

1·什么是双向数据绑定？这里的变化会导致上面的内容跟着变化

2，双向数据绑定分析
v-model指令用法

P8 09.双向数据绑定2

3.MVVM设t思想
M（model）
V（view）
VM（View-Model）

P9 10事件绑定

1.Vue如何处理事件？
v-on指令用法

v-on简写形式
<input type='button' @click='num++' />

2.事件函数的调用方式
直接绑定函数名称

调用函数

P10 11.事件基本使用

3.事件函数参数传递
普通参数和事件对象

event.target.innerHTML

event.target.tagName

事件绑定-参数传递
1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

P11 12.事件修饰符

4·事件修饰符
stop阻止冒泡
跳转
prevent阻止默认行为
跳转

直接@click='fn' 默认带event

阻止冒泡 event.stopPropagetion()

阻止默认行为 event.preventDefault()

P12 13按键事件修饰符

5·按键修饰符
.enter回车键

.delete删除键
<input v-on：keyup.delete='handle'>

P13 14.自定义按键事件修饰符

6，自定义按键修饰符
全局config.keyCodes对象
Vue.config.keyCodes.aaa= 112 v-on:keyup.aaa='handle'

直接用 v-on:keyup.65='handle'

事件绑定-自定义按键修饰符
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

P14 15案例：简单计算器

parseInt('1')

P15 16属性绑定

1.Vue如何动态处理属性？
v-bind指令用法
跳转
缩写形式
跳转

www.itcast.com

P16 17.属性绑定2

2.v-model的低层实现原理分析

P17 18样式绑定

1.class样式处理
对象语法

数组语法

P18 19样式绑定2

P19 20样式绑定语法细节

样式绑定相关语法细节
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？

P20 21.style样式处理

2.style样式处理
对象语法

数组语法

快进...

P21 22分支循环结构

1.分支结构
v-if
v-else
v-else-if
v-show

2.v-if与v-show的区别
v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）

P22 23.循环结构

3·循环结构
v-for便利历数组
<1i v-for='item in list'>{{item}}
<1i v-for='（item，index）in list'>{{item}}--{{index}}</1i>
key的作用：帮助Vue区分不同的元素，从而提高性能
<1i :key='item.id' v-for='（item，index）in list'>{{item}}--{{index}}

1111

P23 24.v-if和v-for结合使用

4，循环结构
v-for遍历对象

v-if和v-for结合使用

P24 25案例：Tab选项卡01

P25 26案例：Tab选项卡02

P26 27案例：Tab选项卡03

P27 28案例：Tab选项卡04

P28 01.vue常用特性

5.1常用特性概览
表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

1，基于Vue的表单操作
Input单行文本
textarea多行文
select下拉多选
radio单选框
checkbox多选框

www.itjc8.com

P29 02表单操作01

P30 03表单操作02

P31 04.表单域修饰符

3.表单域修饰符
number：转化为数值
trim：去掉开始和结尾的空格
lazy：将input事件切换 change事件 input每次触发 change改变才触发

P32 05.自定义指令

1，为何需要自定义指令？
内置指令不满足需求

2，自定义指令的语法规则（获取元素焦点）

Vue.directive('focus',{
	inserted:function(el){
	//获取元素的焦点 el表示指令所绑定的元素
	el.focus();
}
})

3.自定义指令用法

P33 06自定义指令用法

3·带参数的自定义指令（改变元素背景色）

Vue.directive('color',{
	inserted:function(el,binding){
	el.style.backgroundColor=bing.value.color
}
})

4·指令的用法

<input type='text' v-color='{color:"orange"}'

P34 07自定义指令局部指令

5.局部指令

var vue=new Vue({
	directives:{
focus:{
//指令的定义
inserted:function(el){
el.focus()
		}
	}
}
})

P35 08计算属性

1.为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2.计算属性的用法

new Vue({
	computed:{
	reverseMsg:{}(){
		return this.msg.split('').reverse().john('')
	},
	reverseMsg:{
		get(){

	}
}

}
}
})

P36 09计算属性与方法的区别

3.计算属性与方法的区别
计算属性是基于它们的依赖进行缓存的
方法不存在缓存

P37 10侦听器开始

1，侦听器的应用场景
数据变化时执行异步或开销较大的操作

new Vue({
	watch:{
		firstname:function(val){
			this.fullname=val+this.lastname
		}
	}
})

P38 11.侦听器的应用场景

P39 12过滤器

1.过滤器的作用是什么？
格式化数据，比如将宇符串格式化为首字母大写，将日期格式化为指定的格式等

2，自定义过滤器

Vue.filter('过滤器名称',function(value){
    //过滤器业务逻辑
})

3.过滤器的使用

<div>{{msg|upper}}</div>
<div>{{msg|upper|lower}}</div>
<div v-bind:id='id|formatId'></div>

4，局部过滤器本组件可以使用

new Vue({
    filter:{
        capitalize:function(){}
    }
})

P40 13.带参数的过滤器

5.带参数的过滤器

Vue.filter('format',function(value,arg1){
    //value就是过滤器传递过来的参数
})

6.过滤器的使用

日期格式化规则
y：年，
M：年中的月份（1-12），
d：月份中的天（1-31），
h：小时（0-23），
m：分（0-59），
s：秒（0-59），
S：毫秒（0-999），
q：季度（1-4）

http://yaniswang.com/frontend/2013/02/16/dateformat-performance/

P41 14 例：使用过滤器格式化日期

5.7生命周期
1·主要阶段
挂载（初婚化相关属性）
beforeCreate
created
beforeMount
mounted
更新（元素或组件的变更操作）
beforeUpdate
updated
销毁（销毁相关属性）
beforeDestroy
destroyed

this.$destroy()

2.Vue实例的产生过程

beforeCreate在实例初始化之后，数据观测和事件配置之前被调用。
created在实例创建完成后被立即调用。
beforeMount在挂载开始之前被调用。
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy实例销毁之前调用。
destroyed实例销毁后调用。

P42 15综合案例：图书管理01

P43 16综合案例：图书管理02

案例：补充知识（数组相关API）

1.变异方法（修改原有数据）
push0
pop0
shift0
unshift0
splice0
sort0
reverse0

2·替换数组（生成新的数组）
filter0
concat0
slice0

P44 17综合案例：图书管理03补充知识

案例：补充知识（数组响应式变化）

3·修改响应式数据
Vue.set（vm.items，indexOfltem，newValue）
vm.$set（vm.items，indexOfitem，newValue）
1参数一表示要处理的数组名称
2 参数二表示要处理的数组的索引
3参数三表示要处理的数组的值

P45 18综合案例：图书管理04

P46 19综合案例：图书管理05

P47 20综合案例：图书管理06

P48 21综合案：图书管理07

P49 22综合案例：图书管理08

P50 23综合案例：图书管理09

5·常用特性应用场景
过滤器（格式化日期）
自定义指令（获取表单焦点）
计算属性（统计图书数量）
侦听器（验证图书存在性）
生命周期（图书数据处理）

P51 24综合案例：图书管理10

P52 01.组件化开发开始

能够知道组件化开发思想
能够知道组件的注册方式
能够说出组件间的数据交互方式
能够说出组件插槽的用法
能够说出Vue调试工具的用法
能够基于组件的方式实现业务功能

组件化开发思想
组件注册
Vue调试工具用法
组件间数据交互
组件插槽
基于组件的案例

P53 02组件化开发思想

1.1现实中的组件化思想体现

标准
分治
重用
组合

1.3组件化规范：Web Components
我们希望尽可能多的重用代码
自定义组件的方式不太容易（html，css和js）
多次使用组件可能导致冲突

Web Components通过创建封装好功能的定制元素解决上述问题

官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

Vue部分实现了上述规范

P54 03组件注册

2.1全局组件注册语法

Vue.component(组件名称,{
    data:组件数据,
    template:组件模板内容
})
Vue.component('button-counter',{
    data:function(){
        return {count:0}
    },
    template:'<button v-on:click="count++>点击</button>"',
    methods:{}
})

2.2组件用法

Sublime Text 插件

P55 04.组件注册注意事项

在new Vue里面data是对象 Vue.component里面是函数

2.3组件注册注意事项
1.data必须是一个函数
分析函数与普通对象的对比
2，组件模板内容必须是单个跟元素
分析演示实际的效果

3·组件模板内容可以是模板字字串
模板字符串需要浏览器提供支持（ES6语法）

P56 05.组件命名方式

4．组件命名方式
短横线方式
vue.component（'my-component'，{/.../}）
驼峰方式
Vue.component（'MyComponent'，{/.../}）

组件注册注意事项
如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

P57 06局部组件注册

body后 vue.js 后面 new Vue()

2.4局部组件注册

var ComponentA={
    data(){
        return {msg:'hello'}
    },
    template:'<h1>{{msg}}</h1>'
}
new Vue({
    el:'#app',
    components:{
        'component-a':ComponentA
    }
})

局部组件注册
局部组件只能在注册他的父组件中使用

P58 07.Vue调试工具使用

Devtools 官网vue 生态系统

调试工具安装
克隆仓库
安装依赖包
构建
打FChromet展页面选中开发者模式
加载已解压的扩展，选择shells/hrome

P59 08组件间数据交互

4.1父组件向子组件传值
1·组件内部通过props接收传递过来的值

Vue.component('menu-item',{
    props:['title'],
    template:'<h1>{{tile}}</h1>'
})

2，父组件通过属性将值传递给子组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<new title='来自父组件的值'></new>
	</div>
</body>
<script src="./vue2.js"></script>
	<script>
		Vue.component('new',{
			data(){
				return {
					msg:'子组件本身的数据'
				}
			},
			props:['title'],
			template:`<div>
				<h1>{{msg+' '+title}}</h1>
			</div>`,
			methods:{}
		})
		var vue=new Vue({
			el:'#app',
			data:{
				pmsg:'父组件中内容'
			}
		})
	</script>
</html>

P60 09.props属性名规则

3.props属性名规则
在props中使用驼峰形式，模板中需要使用短横线的形式
字符串形式的模板中没有这个限制

在Javascript中是驼峰式的
props：['menuTitle"]，

在htm1中是短横线方式的

P61 10.props属性值类型

4.props属性值类型
字符串String
数值Number
布尔值Boolean
数组Array
对象Object

typeof

P62 11子组件向父组件传值

4.2子组件向父组件传值
1.子组件通过自定义事件向父组件传递信息

2.父组件监听子组件的事件

P63 12子组件通过自定义事件向父组件传值

4.2子组件向父组件传值
3.子组件通过自定义事件向父组件传递信息

4.父组件监听子组件的事件

P64 13非父子组件传值

兄弟组件之间传值

1，单独的事件中心管理组件间的通信

var eventHub=new Vue()

2.监听事件与销毁事件

eventHub.$on('add-todo',addTodo)

eventHub.$off('add-todo')

3.触发事件

eventHub.$emit('add-todo',id)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<button @click='destroy'>销毁</button>
		<parent></parent>
		<children></children>	
	</div>
</body>
<script src="./vue2.js"></script>
	<script>
		//提供事件中心
		var eventHub=new Vue()
		Vue.component('parent',{
			data(){
				return {
					num:0
				}
			},
			template:`<div>
				<h1>{{num}}</h1>
				<button @click='handle'>点击</button>
			</div>`,
			methods:{
				handle(){
					eventHub.$emit('children-event',2)
				}
			},
			mounted(){
				eventHub.$on('parent-event',(val)=>{
						this.num+=val
					})
			}
		})
		Vue.component('children',{
			data(){
				return {
					num:0
				}
			},
			template:`<div>
				<h1>{{num}}</h1>
				<button @click='handle'>点击</button>
			</div>`,
			methods:{
				handle:function(){
					eventHub.$emit('parent-event',1)
				}
			},
			mounted(){
				//监听事件
				eventHub.$on('children-event',(val)=>{
						this.num+=val
					})
			}
		})
		var vue=new Vue({
			el:'#app',
			data:{
			},
			methods:{
				destroy(){
					eventHub.$off('parent-event')
					eventHub.$off('children-event')
				}
			}
		})
	</script>
</html>

P65 14.组件插槽

5.1组件插槽的作用
父组件向子组件传递内容

default

new

P66 15.具名播槽用法

default

new

P67 16作用域插槽

default

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<parent>
			<template slot-scope='slot'>
				{{slot.msg}}
			</template>
		</parent>	
	</div>
</body>
<script src="./vue2.js"></script>
	<script>
		//提供事件中心
		var eventHub=new Vue()
		Vue.component('parent',{
			data(){
				return {
					msg:'hello'
				}
			},
			template:`<div>
				<slot :msg='msg'></slot>
			</div>`
		})
		var vue=new Vue({
			el:'#app',
			data:{
			},
			methods:{

			}
		})
	</script>
</html>

P68 17案例：购物车01

P69 18案例：购物车02

P70 19例：购物车03

Vue.component('new',{
    data(){return{}},
    template:``,
    methods:{},
    components:{}
})

P71 20例：购物车04

P72 21例：购物车05

P73 22案例：购物车06

P74 01.Vue前端交互开始

能够说出什么是前后端交互模式，
能够说出Promise的相关概念和用法，
能够使用fetch进行接口调用，
能够使用axios进行接口调用，
能够使用async/await方式调用接口，
能够基于后台接口实现案例

P75 02.Vue前端交互模式

1.前后端交互模式
是指前端调用后端接口数据,进行仙杨
1.1接口调用方式
原生ajax
基于jQuery的ajax
fetch
axios

1.2 URL地址格式
1，传统形式的URL
格式：schema://host:port/path?query#fragment
schema：协议。例ghttp，https，ftp等
host：域名或者IP地址
port：端口，http默认端口80，可以省略
path：路径，例如/abc/a/b/c
query：查询参数，例如uname=lisi&age=12
fragment：锚点（哈希Hash），用于定位页面的某个位置

2.Restful形式的URL
HTTP请求方式
GET 查询
POST 添加
PUT 修改
DELETE 删除

P76 03.Promise用法

2.1异步调用
异步效果分析
定时任务
Ajax
事件函数

多次异步调用的依赖分析
多次异步调用的结果顺序不确定
异步调用结果如果存在依赖需要
嵌套

2.2 Promise概述
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
使用Promise主要有以下好处：可以避免多层异步调用嵌套问题（回调地狱）
Promise对象提供了简洁的API，使得控制异步操作更加容易

https://developer.mozilla.org/en-us/docs/web/Javascript/Reference/Global_objects/Promise

P77 04.Promise基本用法

console.dir(Promise)

2.3 Promise基本用法
实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p=new Promise(funciton(resolve,reject){
                  //这里用于实现异步任务
       //成功时调用resolve（）
		//失败时调用reject（）           
 })
p.then(function(ret){
    //从resolve得到正常结果
},function(ret){
    //从reject得到错误信息
})

P78 05基于Promise处理Ajax请求

	<script>
		//基于Promise发送Ajax请求
		function queryData(url){
			var p=new Promise((resolve,reject)=>{
				var xhr=new XMLHttpRequest();
				xhr.onreadystatechange=()=>{
					if (xhr.readyState !=4) return;
					if (xhr.readyState==4 && xhr.status==200) {
						resolve(xhr.responseText)//处理正常的情况
					}else{
						reject('服务器错误')//处理异常情况
					}
				}
				xhr.open('get',url);
				xhr.send(null)
			})
			return p;
		}
		// queryData('http://localhost:3000/data')
		// 	.then(res=>{
		// 		console.log(res)
		// 	},err=>{
		// 		console.log(err)
		// 	})
		// 	发送多个ajax请求并且保证顺序
		queryData('http://localhost:3000/data')
			.then(res=>{
				console.log(res)
				return queryData('http://localhost:3000/data1')
			})
			.then(res=>{
				console.log(res)
				return queryData('http://localhost:3000/data2')
			})
			.then(res=>{
				console.log(res)
			})
	</script>

P79 06.then参数中的函数返回值

2.5 then参数中的函数返回值
1.返回Promise实例对象
返回的该实例对象会调用下一个then
2、返回普通值
返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

P80 07.Promiset常用的API

1·实例方法
p.then()得到异步任务的正确结果
p.catch()获取异常信息
p.finally()成功与否都会执行（尚且不是正式标准）

P81 08.Promise常用的API对象方法

2.6 Promise常用的API
2.对象方法
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

var p1=queryData('http://localhost:3000/a1')
Promise.all([p1,p2,p3]).then(res=>{})
Promise.race([p1,p2,p3]).then(res=>{})

P82 09，接口调用fetch用法

3.1 fetch概述
1.基本特性
更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
基于Promise实现
2·语法结构

fetch(url).then(fn2).then(fn3)...catch(fn)

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

text()方法属于fetchAPT的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

	<script>
		fetch('http://localhost:3000/fdata').then(res=>{
			return data.text();//返回promise text才获取数据
		}).then(res=>{
			console.log(res)
		})
	</script>

P83 10.fetch请求参数

3.3 fetch请求参数
1，常用配置选项
method（String）：HTTP请求方法，默认为GET（GET，POST，PUT，DELETE）
body（String）：HTTP的请求参数
headers（Object）：HTTP的请求头，默认为{}

'/abc?id=1' '/abc/11'
fetch('/abc',{
    method:'get'
}).then(res=>{
			return data.text();//返回promise text才获取数据
		}).then(res=>{
			console.log(res)//注意这里得到的才是最终的数据
		})

P84 11.POST请求方式的参数传递

fetch('/abc',{
    method:'post',
    body:'uname=list&pwd=123',
    /*2.body:JSON.stringify({
        uname:'koo',
        pwd:'3333'
    })*/
    headers:{
        "Content-Type":'application/x-www-form-urlencoded'
        //2."Content-Type":'application/json'
    }
}).then(res=>{
			return data.text();//返回promise text才获取数据
		}).then(res=>{
			console.log(res)//注意这里得到的才是最终的数据
		})

P85 12.fetch响应结果

3.4 fetch响应结果
响应数据格式
text()：将返回体处理成字符串类型
ison()：返回结果和JSON.parse（responseText）一样

P86 13接口调用axios用法

4.1 axios的基本特性
axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征：
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据

data属性名称是固定的，用于获取后台响应的数据

axios.get('http://localhost:3000/adata').then(res=>{
    console.log(res.data)
})

P87 14.axios的常用API

4.3 axios的常用API
get：查询数据
post：添加数据
put：修改数据
delete：删除数据

4.4 axios的参数传递
1.GET传递参数
通过URL传递参数
通过params选项传递参数

1.'http://localhost:3000/adata/33'
2.axios.get('http://localhost:3000/adata?id=33').then(res=>{
    console.log(res.data)
})
3.axios.get('http://localhost:3000/adata',{
    params:{
        id:22
    }
}).then(res=>{
    console.log(res.data)
})

P88 15.axios的参数POST传递

101

json形式
axios.post('http://localhost:3000/adata',{
    uname:'koo',age:33
}).then(res=>{
    console.log(res.data)
})
URLSearchParams传递参数
const params=new URLSearchParams();
params.append('param1','value1')
axios.post('http://localhost:3000/adata',params).then(res=>{
    console.log(res.data)
})

3.POST传递参数
通过URLSearchParams传递参数（application/x-www-form-urlencoded）

P89 16.axios响应结果

4.5 axios的响应结果
响应结果的主要属性
data：实际响应回来的数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息

4.6 axios的全局配置
axios.defaults.timeout=3000：//超时时间
axios.defaults.baseURL='http://localhost:3000/app; //默认地址
axios.defaults.headers['mytoken']='aqwerwqwerqwerzewwwe23eresdf23'，/设置请求头

axios.defaults.baseURL='http://localhost:3000/'
axios.get('adata?id=33').then(res=>{//简写
    console.log(res.data)
})

P90 17.axios拦截器

1，请求拦截器
在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
    //在请求发出之前进行一些信息设置
    console.log(config.url)
    config.headers.mytoken='nihao'
    return config;
},function(err){
    //处理响应的错误信息
})
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
    //在这里对返回的数据进行处理
    return res;
},function(err){
    //处理响应的错误信息
})

2·响应拦截器
在获取数据之前对数据做一些加工处理

P91 18接口调用async和await用法

async i省 await 耳为

5.1 async/await的基本用法
async/await是ES7引入的新语法，可以更加方便的进行异步操作
async关键字用于函数上（async函数的返回值是Promise实例对象）
await关键字用于async函数当中（await可以得到异步的结果）

axios引入
async function queryData(){
    let ret=await axios.get('http://xxx/adata')
    return ret
}
queryData().then(res=>{
    console.log(res)
})

	<script>
		async function queryData(){
			let ret=await new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve('hello')
				},2000)
			})
			return ret;
		}
		queryData().then(res=>{
			console.log(res)
		})
	</script>

P92 19.async和await处理多个异步请求

async function queryData(){
    let info=await axios.get('http://xxx/adata')
    let ret=await axios.get('http://xxx/adata1?id='+info.data)
    return ret
}
queryData().then(res=>{
    console.log(res)
})

P93 20案例：图书管理接口01

P94 21案例：图书管理接口02

json也可以加async

name:async function(){}

P95 22案例：图书管理接口03

P96 23例：图书管理接口04

P97 24.案例：图书管理接口05

P98 25.案例：图书管理接口06

P99 01.Vue前端路由

能够说出路由的概念
能够说出Vue-router的基本使用步骤
能够说出Vue-router的嵌套路由用法
能够说出Vue-router动态路由匹配用法
能够说出Vue-router命名路由用法，
能够说出Vue-router编程式导航用法
能够基于路由的方式实现业务功能

P100 02.路由的基本概念与原理

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
在开发中，路由分为：
后端路由
前端路由

1.后端路由
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系

后端路由根据不同的URL地址分发不同的资源

2.SPA (Single Page Application)

后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术点就是前端路由

2.前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容

P101 03.实现简易前端路由

3.实现简易前端路由
基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

//监听 window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange=function(){
    //通过location.hash 获取到最新的hash值
}

P102 04.Vue Router路由管理器

1.2 Vue Router
vue Router（官网：https://router.vuejs.org/zh/）是vue.js官方的路由管理器。
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

vue Router包含的功能有：
支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

P103 05.Vue Router的基本使用

2.1基本使用步骤
1，引入相关的库文件
2·添加路由链接
3·添加路由填充位
4．定义路由组件
5，配置路由规则并创建路由实例
6·把路由挂载到Vue根实例中

<！--router-link是vue中提供的标签，默认会被渲染为a标签-->
<！--to属性默认会被渲染为href属性-->
<！--to属性的值默认会被渲染为#开头的hash地址-->

<！--路由填充位（也叫做路由占位符）
<！--将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->

5，配置路由规则并创建路由实例

6.把路由挂载到 Vue 根实例中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<router-link to='/user'>User</router-link>
		<router-link to='register'>Register</router-link>
		<router-view></router-view>
	</div>
</body>
<script src="./vue2.js"></script>
<script src="./vue-router.js"></script>
	<script>
		let user={
			template:'<h1>User组件</h1>'
		}
		let register={
			template:'<h1>Register组件</h1>'
		}
		//创建路由实例对象
		var router=new VueRouter({
			//routes是路由规则数组
			routes:[
			// 每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
			// path表示当前路由规则匹配的hash地址
			// component 表示当前路由规则对应要展示的组件
				{path:'/user',component:user},
				{path:'/register',component:register},
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{

			},
			router
		})
	</script>
</html>

P104 06.路由重定向

//其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
{path:'/',redirect:'/user'},

P105 07.Vue Router嵌套路由

3.1嵌套路由用法
1.嵌套路由功能分析
点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<router-link to='/user'>User</router-link>
		<router-link to='register'>Register</router-link>
		<router-view></router-view>
	</div>
</body>
<script src="./vue2.js"></script>
<script src="./vue-router.js"></script>
	<script>
		let user={
			template:'<h1>User组件</h1>'
		}
		let register={
			template:`<div>
				<h1>Register组件</h1>
				<router-link to='/register/tab1'>tab1</router-link>
				<router-link to='/register/tab2'>tab2</router-link>
				<router-view></router-view>
					  </div>
			`
		}
		let tab1={
			template:'<h1>tab1组件</h1>'
		}
		let tab2={
			template:'<h1>tab2组件</h1>'
		}
		var router=new VueRouter({
			routes:[
				//其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
				{path:'/',redirect:'/user'},
				{path:'/user',component:user},
				{path:'/register',component:register,
					children:[
						{path:'/register/tab1',component:tab1},
						{path:'/register/tab2',component:tab2},
					]
				},
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{

			},
			router
		})
	</script>
</html>

P106 08.Vue Router动态路由匹配

{path:'/user/:id',component:user},

User

参数是{{$route.params.id}}

P107 09.路由组件传递参数

4.2路由组件传递参数
Sroute与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<router-link to='/user/1'>User</router-link>
		<router-link to='/user/2'>User</router-link>
		<router-link to='/user/3'>User</router-link>
		<router-link to='/user'>User</router-link>
		<router-link to='register'>Register</router-link>
		<router-view></router-view>
	</div>
</body>
<script src="./vue2.js"></script>
<script src="./vue-router.js"></script>
	<script>
		let user={
			props:['id'], //使用 props接收路由参数
			// 使用路由参数
			template:`<div>
				<h2>{{id}}</h2>  
				<h1>User组件</h1>
				参数是{{$route.params.id}}
			</div>`
		}
		let register={
			template:`<div>
				<h1>Register组件</h1>
				<router-link to='/register/tab1'>tab1</router-link>
				<router-link to='/register/tab2'>tab2</router-link>
				<router-view></router-view>
					  </div>
			`
		}
		let tab1={
			template:'<h1>tab1组件</h1>'
		}
		let tab2={
			template:'<h1>tab2组件</h1>'
		}
		var router=new VueRouter({
			routes:[
				//其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
				{path:'/',redirect:'/user'},
				//如果props被设置为true，route.params将会被设置为组件属性
				{path:'/user/:id',component:user,props:true},
				{path:'/user',component:user},
				{path:'/register',component:register,
					children:[
						{path:'/register/tab1',component:tab1},
						{path:'/register/tab2',component:tab2},
					]
				},
			]
		})
		var vm=new Vue({
			el:'#app',
			data:{

			},
			router
		})
	</script>
</html>

{path:'/user/:id',component:user,props:{uname:'koo',age:22}},
 let user={
			props:['uname','age'], //使用 props接收路由参数
			// 使用路由参数
			template:`<div>
				{{uname+'---'+age}}
			</div>`
		}

{path:'/user/:id',component:user,props:route=>({
    uname:'zs',age:22,id:route.params.id
})},
 let user={
			props:['id','uname','age'], //使用 props接收路由参数
			// 使用路由参数
			template:`<div>
				{{id+uname+'---'+age}}
			</div>`
		}

P108 10.Vue Router命名路由

6.1命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为"命名路由"

var router=new VueRouter({
			routes:[
				{path:'/user/:id',component:user,name='user'},
			]
		})
<router-link :to='{name:"user",params:{id:123}}'>跳转</router-link>
router.push({name:'user',params:{id:123}})

P109 11.Vue Router编程式导航

5.1页面导航的两种方式
声明式导航：通过点击链接实现导航的方式，叫做声明式导航例如：普通网页中的链接或vue中的
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航例如：普通网页中的location.href

常用的编程式导航API如下：
this.$router.push（'hash地址'）
this.$router.go（n）

this.$router.go（-1）后退一页

router.push（）方法的参数规则

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{userId:332}})
//带查询参数，变成/register?uname=lisi
router.push({path:'register',query:{uname:'list',age:33}})

P110 12.：后台管理路由01

123

P111 13例：后台管理路由02

P112 14.：后台管理路由03

P113 15.：后台管理路由04

P114 16.案例：后台管理路由05

P115 17例：后台管理路由06

P116 01.前端工程化的学习目标

能够知道有哪些模块化的相关规范
能够使用webpack
能够使用Vue单文件组件
能够使用Vue脚手架
能够使用Element-UI

P117 02模块化相关规范

1.1模块化概述
传统开发模式的主要问题
命名冲突
文件依赖

通过模块化解决上述问题
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

1.2浏览器端模块化规范
1.AMD
Require.js（http://www.requirejs.cn/）
2.CMD
Sea.js（https://seajs.github.io/seajs/docs/）

1.3服务器端模块化规范
1.CommonJS
①模块分为单文件模块与包
2模块成员导出：module.exports和exports
③模块成员导入：require（'模块标识符"）

1.4大一统的模块化规范-ES6模块化
在Es6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD，CMD、CommonJs等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
AMD和CMD适用于浏览器端的Javascript模块化
commonJs适用于服务器端的Javascript模块化
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义：
每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字

P118 03.ES6的模块化

1.4大一统的模块化规范-ES6模块化
1.Node.js中通过babel体验ES6模块化

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

npm install --save @babel/polyfill

项目跟目录创建文件 babel.config.js

babel.config.js文件内容如右侧代码

通过npx babel-node index.js执行代码

const presets=[
    ['@babel/env',{
        targets:{
            edge:'17',
            firefox:'60',
            chrome:'67',
            safari:'11.1'
        }
    }]
];
module.exports={presets}

P119 04.ES6模块化的基本语法

1.5 ES6模块化的基本语法
1，默认导出与默认导入
默认导出语法export default默认导出的成员
默认导入语法import接收名称from'模块标识符

P120 05按需导出与按需导入

2，按需导出与按需导入
按需导出语法export let s1=10
按需导入语法import{s1}from'模块标识符

P121 06直接导入并执行模块代码

3.直接导入并执行模块代码
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。import './m2.js' m2.js纯代码

P122 07.webpack开始

2.1 当前 Web开发面临的困境
文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级Javascript特性兼容程度较低
etc...

2.1 webpack概述
webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。
webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。

P123 08.webpack的基本使用

P124 09.在项目中安装和配置webpack

在项目中安装和配置webpack
运行npm install webpack webpack-cli -D命令，安装webpack相关的包
在项目根目录中，创建名为webpack.config.js的webpack配置文件
在webpack的配置文件中，初始化如下基本配置：

module.exports={
    mode:'development' //mode用来指定构建模式 production
}

在package.json配置文件中的scripts节点下，新增dev脚本如下：

"scripts":{
    "dev":"webpack" //script节点下的脚本，可以通过npm run执行
}

在终端中运行npm run dev命令，启动 webpack进行项目打包。

import $ from 'jquery';
$(function(){
    $('li:odd').css('backgroundColor','pink');
    $('li:even').css('backgroundColor','lightblue');
})

P125 10.配置打包的入口与出口

3·配置打包的入口与出口
webpack的4.x版本中默认约定：
打包的入口文件为src-> index.js
打包的输出文件为dist->main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息：

const path=require('path'); //导入 node.js中专门操作路径的模块
module.exports={
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js' //输出文件的名称
    },
    mode:'development' //mode用来指定构建模式 production
}

P126 11.配置自动打包的功能

配置webpack的自动打包功能
运行 npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
修改package.json-> scripts中的dev命令如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run执行
  },

将src-> index.html 中，script脚本的引用路径，修改为"/buldle.js"
运行npm run dev命令，重新进行打包
在浏览器中访问http://localhost：8080地址，查看自动打包效果sh

webpack-dev-server会启动一个实时打包的http服务器

webpack-dev-server打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

P127 12.配置生成预览页面

5·配置html-webpack-plugin生成预览页面

运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件
修改webpack.config.js文件头部区域，添加如下配置信息：

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlWebpackPlugin({//创建插件的实例对象
    template:'./src/index.html',//指定要用到的模板文件
    filename:'index.html' //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点：

module.export={
    plugins:[htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表
}

P128 13配置自动打包的相关参数

6·配置自动打包相关的参数

package.json中的配置
--open打包完成后自动打开浏览器页面
--host配置IP地址
--port配置端口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

P129 14.webpack中的加载器

1，通过loader打包非js模块
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！

loader加载器可以协助webpack打包处理特定的文件模块，比如：
less-loader可以打包处理.less相关的文件
sass-loader可以打包处理.scss相关的文件
url-loader 可以打包处理css中与ur1路径相关的文件

P130 15.webpack中的加载器的基本使用

打包处理css文件
运行npm i style-loader css-loader -D命令，安装处理css文件的loader
在webpack.config.js的module-> rules数组中，添加loader规则如下：

//所有第三方文件模块的匹配规则
module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

其中，test表示匹配的文件类型，use表示对应要调用的loader

use数组中指定的loader顺序是固定的

多个loader的调用顺序是：从后往前调用

P131 16打包处理less文件

打包处理less文件
运行npm i less-loader less -D命令
在webpack.config.js的module-> rules数组中，添加loader规则如下：

//所有第三方文件模块的匹配规则
module:{
    rules:[
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

P132 17打包处理scss文件

145

打包处理scss文件
运行npm i sass-loader node-sass -D命令
在webpack.config.js的module-> rules数组中，添加loader规则如下：

//所有第三方文件模块的匹配规则
module:{
    rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

host https://gitee.com/ineo6/hosts/tree/master

P133 18.配置postCSS自动添加css的兼容前缀

4.配置postCSS自动添加css的兼容前缀

运行npm i postcss-loader autoprefixer -D 命令
在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置：

const autoprefixer=require('autoprefixer');//导入自动添加前缀的插件
module.exports={
    plugins:[autoprefixer] //挂载插件
}

在webpack.config.js的module-> rules数组中，修改css的loader规则如下：

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
    ]
}

P134 19打包样式表中的图片和字体文件

打包样式表中的图片和字体文件
运行npm i url-loader file-loader -D命令
在webpack.config.js的module-> rules数组中，添加loader规则如下：

module:{
    rule:[
        {
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit=16940'
        }
    ]
}

其中?之后的是loader的参数项。
limit用来指定图片的大小，单位是字节（byte），只有小于1imit大小的图片，才会被转为base64图片

P135 20打包处理js文件中的高级语法

打包处理js文件中的高级语法
安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：

module.exports={
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js的module-> rules数组中，添加loader规则如下：

//exclude为排除项，表示babel-loader不需要处理node modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

P136 21.Vue单文件组件

3.1传统组件的问题和解决方案
1，问题
1，全局定义的组件必须保证组件的名称不重复
2，字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的
3，不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏
4，没有构建步骤限制，只能使用HTML和ES5 JavaScript，而不能使用预处理器（如：Babel）

2.解决方案
针对传统组件的问题，Vue提供了一个解决方案-使用Vue单文件组件。

单文件组件的组成结构
template组件的模板区域
script业务逻辑区域
style样式区域

P137 22.webpack中配置Vue组件的加载器

运行npm i vue-loader vue-template-compiler -D 命令
在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
    module:{
        rules:[
            //...其他规则
            {test:/\.vue$/,loader:'vue-loader'}
        ]
    },
    plugins:[
        //...其他插件
        new VueLoaderPlugin() //请确保引入这个插件！
    ]
}

P138 23在webpack项目中使用Vue

运行npm i vue -S 安装vue
在src-> index.js入口文件中，通过import Vue from 'vue' 来导入vue构造函数
创建vue的实例对象，并指定要控制的e1区域
通过render函数渲染App根组件

//1.导入vue构造函数
import Vue from 'vue'
//2.导入App根组件
import App from './components/App.vue'
const vm=new Vue({
    //3·指定vm实例要控制的页面区域
    el:'#app',
    //4·通过render函数，把指定的组件渲染到el区域中
    render:h=>h(App)
})

P139 24.webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令：

在package.json文件中配置webpack打包命令
该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts": {
    "build":"webpack -p",//用于打包的命令
     //用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },

P140 01.什么是脚手架

4.1 Vue脚手架的基本用法
Vue脚手架用于快速生成vue项目基础架构，其官网地址为：https://cli.vuejs.org/zh/

使用步骤
1，安装3.x版本的Vue脚手架：

npm install -g @vue/cli

P141 02脚手架的基本使用

基于3.x版本的脚手架创建vue项目

1·基于交互式命令行的方式，创建新版vue项目 vue create my-project

2·基于图形化界面的方式，创建新版vue项目 vue ui

3，基于2.x的旧模板，创建旧版vue项目

npm install -g @vue/cli-init

vue init webpack my-project

P142 03图形化方式创建Vue项目

P143 04.2.x旧模板创建旧版Vue项目

P144 05.脚手架生成的项目结构分析

P145 06脚手架的自定义配置

1，通过package.json配置项目
//必须是符合规范的ison语法
"vue":{
    "devServer":{
        "post":"8888",
         "open":true   
    }
}

注意：不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息；为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。

通过单独的配置文件配置项目
在项目的跟目录创建文件vue.config.js
在该文件中进行相关配置，从而覆盖默认配置

//vue.config.js
module.exports={
    devServer:{
        port:8888
    }
}

P146 07.Element-UI的基本使用01

159

element-Ul ali门

Element-UI：一套为开发者、设计师和产品经理准备的基于vue 2.0的桌面端组件库。
官网地址为：http://element-cn.eleme.io/#/zh-CN

基于命令行方式手动安装
安装依赖包npm i element-ui -S
导入Element-UI相关资源

//导入组件库
import ElementUI from 'element-ui';
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
//配置Vue插件
Vue.use(ElementUI)

https://zhuanlan.zhihu.com/p/61403630

Mint UI WeUI iView UI layui ElementUI vant UI Flutter Antd

新cli 启动都是npm run serve

P147 08.Element-UI的基本使用02

基于图形化界面自动安装
运行vue ui命令，打开图形化界面
通过vue项目管理器，进入具体的项目配置面板
点击插件->添加插件，进入插件查询面板
搜索vue-cli-plugin-element并安装
配置插件，实现按需导入，从而减少打包后项目的体积

P148 01.Vue项目实战学习目标

能够基于Vue初始化项目
能够基于Vue技术栈进行项目开发
能够使用Vue的第三方组件进行项目开发
能够说出前后端分离的开发模式

P149 02.Vue项目实战概述

1.1电商项目基本业务概述
根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。

P150 03.电商后台管理系统的功能

P151 04开发模式：前后端分离

1.4电商后台管理系统的技术选型
1，前端项目技术栈
Vue
Vue-router
Element-UI
Axios
Echarts
2，后端项目技术栈
Node.js
Express
Jwt
Mysql
Sequelize

P152 05项目初始化

前端项目初始化步骤
安装Vue脚手架
通过vue脚手架创建项目
配置vue路由
配置Element-UI组件库
配置axios库
初始化git远程仓库
将本地项目托管到Github或码云中

P153 06初始化Git远程仓库

166

https://gitee.com/

https://gitee.com/help/articles/4181

https://gitee.com/profile/sshkeys

P154 07本地项目托管到GitHub或码云中

Git 全局设置:

git config --global user.name "韩熙俊"
git config --global user.email "879181514@qq.com"

https://gitee.com/joneking/vue_shop

git status git add . git commit -m "add files"

自动跳过node_modules上传

git remote add origin https://gitee.com/joneking/vue_shop.git
git push -u origin master

P155 08后台项目的环境安装配置

后台项目的环境安装配置
安装MySQL数据库
安装Nodejs环境
配置项目相关信息
启动项目
使用Postman测试后台项目接口是否正常

P156 09.测试后台接口是否正常

npm install node app.js 改sql密码库名

电商管理后台API接口文档

postman http://127.0.0.1:8888/api/private/v1/login bodyusername-password

x-www-form-urlencoded admin 123456

P157 10.登录与退出功能

3.1登录概述
1.登录业务流程
在登录页面输入用户名和密码

调用后台接口进行验证
通过验证之后，根据后台的响应状态跳转到项目主页

登录业务的相关技术点
http是无状态的
通过cookie在客户端记录状态
通过session在服务器端记录状态
通过token方式维持状态

不存在跨域用cookie session 存在用token

P158 11.登录功能实现

3.3登录功能实现
1.登录页面的布局
通过Element-UI组件实现布局
el-form
el-form-item
el-input
el-button
字体图标

创建分支 git checkout -b login

查看所有分支 git branch

P159 12删除不要的组件

vue2.x render

P160 13.创建登录组件

语法错误 https://blog.csdn.net/Intelligent_/article/details/105869779

"lint": "vue-cli-service lint"

规范

P161 14.登录组件布局

errors and 0 warnings potentially fixable with the --fix option报错
这种只要隐藏.eslintrc.js中的’@vue/standard’就行了，如下图：
https://www.cnblogs.com/huoshengmiao/p/14601557.html
https://www.cnblogs.com/yehuisir/p/13621626.html

npm i less-loader less -D

P162 15.登录组件头部布局

P163 16登录组件表单布局

176

npm run lint 修正

再npm run serve

https://element-plus.gitee.io/zh-CN/guide/installation.html#版本

https://element.eleme.cn/#/zh-CN/component/form

P164 17.登录组件表单小图标布局

top margin padding float position flex

先相对定位relative 再绝对定位absolute

P165 18登录组件表单的数据绑定

P166 19登录组件表单的数据验证

P167 20登录组件实现表单的重置

Proxy es6看看怕s

P168 21登录组件登录前的预验证

P169 22登录组件根据预验证是否发起请求

P170 23.登录组件配置弹窗提示

183

vue3中挂载全局变量
https://blog.csdn.net/weixin_43090018/article/details/117222606
https://www.jianshu.com/p/408846ea7241
在 main.ts 中引入全局要使用的方法，通过app.config.globalProperties添加到全局中

P171 24登录组件登录成功后的行为

P172 25.路由导航守卫控制访问权限

3·路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

//为路由对象，添加beforeEach导航守卫
router.beforeEach((to,from,next)=>{
    //如果用户访问的登录页，直接放行
    if(to.path==='/login')return next();
    //sessionstorage 中获取到保存的token值
    const tokenStr=window.sessionStorage.getItem('token')
    //没有token，强制跳转到登录页
    if(!tokenStr)return next('/login')
    next()
})

to将要访问的路径
from代表从哪个路径跳转而来
next是一个函数，表示放行
next（）放行 next（'/login'）强制跳转

P173 26.退出功能实现原理

退出功能实现原理
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。

//1清空token
window.session/Storage.clear（）
//跳转到登录页
this.$router.push（'/login'）

P174 27处理语法警告问题

P175 28.优化element-ui按需组件的导入形式

P176 29提交登录功能代码

git command

P177 01主页布局开始

屏幕取色器

css height 失效 https://www.cnblogs.com/wangweizhang/p/11113792.html

关于css得height：100%; 不生效问题；
今天在做项目的时候突然遇到height:100%；无效，但是写上固定高度就好使。
解决方法：
1、html, body { height: 100%; }
2、div { height: 100%; position: absolute; } 前提是，父元素要设置宽高，并且position:relative/absolute....

P179 03主页左侧菜单布局

192

P180 04.通过接口获取菜单数据

通过axios请求拦截器添加token，保证拥有获取数据的权限。

//axios请求拦截
axios.interceptors.request.use(config=>{
    //为请求头对象，添加Token验证的Authorization字段
    config.headers.Authorization=window.sessionStorage.getItem('token')
    return config
})

P181 05.发起请求获取左侧菜单数据

{data:res} 别名res

P182 06左侧菜单UI绘制

P183 07左侧菜单格式美化

P184 08左侧菜单优化

P185 09实现左侧菜单的折叠与展开功能

P186 10.实现首页的路由重定向

P187 11.左侧菜单改造为路由链接

P188 12用户列表开发

P189 13解决用户列表小问题

P190 14.绘制用户列表的基本UI结构

P191 15获取用户列表数据

P192 16渲染用户列表数据

P193 17.为户列表添加索引列

206

P194 18改造状态列的显示效果

P195 19.插槽形式自定义列的渲染

P196 20实现数据分页效果

P197 21实现用户状态的修改

P198 22实现搜索的功能

211

P199 23，实现添加用户的功能

P200 24添加用户的对话框中渲染一个添加用户的表单

P201 25实现自定义规则

P202 26实现添加用户表单的重置功能

P203 27添加用户的预验证功能

P204 28发起请求添加一个新用户

P205 29添加用户修改的操作

P206 30.根据ID查询用户信息

P207 31.绘制修改用户的表单

P208 32实现修改表单的关闭之后的重置操作

P209 33提交修改之前表单预验证操作

P210 34.修改用户信息的操作

P211 35实现删除用户的握作

P212 36完成删除用户的操作

225

P213 37提交用户列表功能代码

P214权限管理1

P215 权限管理2

P216 权限管理3

P217 权限管理4

P218权限管理 5

slot-scope='scope' 换成 v-slot="scope2"

P219权限管理6

P220权限管理7

P221权限管理8

P222权限管理9

P223权限管理10

P224权限管理11

P225权限管理12

P226权限管理13

{
			"path":"pages/message/message",
			"style":{
				"navigationBarTitleText":"hello",
				"h5":{
					"pullToRefresh":"#00ff00"
				}
			}
		},

P227权限管理14

P228权限管理15

P229权限管理16

P230权限管理17

243

P231权限管理18

P232权限管理19

P233权限管理20

P234权限管理21

P235权限管理22

P236权限管理23

P237 权限管理24

P238权限管理25

P239权限管理26

P240 权限管理27

ctrl+b 侧边栏 vscode

P241 权限管理28

P242权限管理29

P243分类管理1

256 前台显示后台管理

P244 分类管理2

P245分类管理3

P246 分类管理4

P247分类管理5

P248 分类管理6

npm i vue-table-with-tree-grid -S

https://github.com/MisterTaki/vue-table-with-tree-grid

npm i --save-dev @types/vue-table-with-tree-grid

不行跳过

P249分类管理7

P250分类管理8

P251分类管理9

P252 分类管理10

级联选择框

P253分类管理11

P254 分类管理12

https://element.eleme.cn/#/zh-CN/component/cascader Cascader 级联选择器

P255 分类管理13

P256分类管理14

P257分类管理15

P258 分类管理16

P259分类管理17

P260分类管理18

P261 分类管理19

P262分类管理20

P263分类管理21

276

P264 分类管理22

P265分类管理23

P266分类管理24

P267分类管理25

P268 分类管理26

P269 分类管理27

P270 分类管理28

P271分类管理29

debugger

P272分类管理30

P273 分类管理31

P274分类管理32

vscode快捷键ctrl+d 删除一行

P275 分类管理33

P276 分类管理34

P277分类管理35

290

vscode 多行操作https://www.cnblogs.com/cisum/p/9382153.html

背景 https://www.cnblogs.com/chinabin1993/p/7151361.html https://blog.csdn.net/yukinoai/article/details/84564949

P278分类管理36

P279 分类管理37

P280 分类管理38

缩列图查看取消

P281分类管理39

$nextTick方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码

P282 分类管理40

P283 分类管理41

P284分类管理42

P285分类管理43

P286 分类管理44

P287分类管理45

P288 01.商品列表功能

P289 02.商品列表功能

P290 03.商品列表功能

P291 04商品列表功能

304

P292 05商品列表功能

P293 06，商品列表功能

P294 07商品列表功能

P295 08商品列表功能

P296 09.商品列表功能

P297 10商品列表功能

Steps 步骤条 
https://element-plus.gitee.io/zh-CN/component/steps.html

P298 11.商品列表功能

P299 12商品列表功能

P300 13.商品列表功能

字符串转数字 ativeIndex-0 减0

P301 14.商品列表功能

P302 15.商品列表功能

P303 16商品列表功能

P304 17.商品列表功能

P305 18.商品列表功能

P306 19.商品列表功能

P307 20.商品列表功能

P308 21.商品列表功能

P309 22商品列表功能

P310 23商品列表功能

P311 24商品列表功能

P312 25商品列表功能

Upload上传

P313 26商品列表功能

el-upload 设置请求头 :headers="xx"

P314 27商品列表功能

P315 28商品列表功能

P316 29商品列表功能

P317 30商品列表功能

npm i vue-quill-editor -S 富文本编辑器

npm install vue-quill-editor --save

https://github.com/surmon-china/vue-quill-editor

P318 31商品列表功能

P319 32商品列表功能

深拷贝原封不动复制一份

lodash https://www.lodashjs.com/docs/4.17.5.html

npm i lodash -S

P320 33.商品列表功能

P321 34.商品列表功能

P322 35商品列表功能

git status

git branch

git add .

git commit -m "完成商品功能开发"

git push

git checkout master

git merge goods_list 合并

P323 01订单管理

git checkout -b order 创建分支

远程没有分支创建 git push -u origin order

P324 02订单管理

P325 03.订单管理

338

P326 04.订单管理

P327 05.订单管理

P328 06.订单管理

citydata.js

P329 07订单管理

P330 08.订单管理

Timeline时间线

P331 09.订单管理

git pull 下拉数据

P332 10.订单管理

P333 11.订单管理

报表

P334 12.订单管理

347

npm i echarts -S

https://echarts.baidu.com

https://echarts.apache.org/zh/index.html

echarts 不显示 https://blog.csdn.net/qq_38870145/article/details/114012646

import * as echarts from 'echarts'

P335 13.订单管理

P336 14.订单管理

P337 15.订单管理

P338 16.订单管理

1.1项目优化策略
1，生成打包报告
2·第三方库启用CDN
3.Element-UI组件按需加载
4.路由懒加载
5，首页内容定制

P339 17.订单管理

进度条 https://github.com/rstacruz/nprogress

npm i nprogress -S

P340 18订单管理

P341 19.订单管理

插件 babel-plugin-transfrom-remove-console 移除console.log调试代码

npm i babel-plugin-transfrom-remove-console --save-dev

百度官方使用方法

P342 20订单管理

P343 01.生成项目报告

1，生成打包报告
打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：
通过命令行参数的形式生成报告

//通过vue-cli的命令选项可以生成打包报告
//--report选项可以生成report.html以帮助分析包内容
vue-cli-service build --report

2.通过可视化的UI面板直接查看报告（推荐）
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

P344 02生成项目报告

2.通过vue.config.js修改webpack的默认配置
通过vue-cli 3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.configjs这个配置文件，从而对项目的打包发布过程做自定义的配置（具体配置参考https://cli.vuejs.org/zh/config/#yue-config-is）

vue.config.js
//这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports={
    //选项
}

P345 03生成项目报告

3，为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/mainjs）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

开发模式的入口文件为src/main-dev.js
发布模式的入口文件为src/main-prod.js

4.configureWebpack和chainWebpack
在vue.configjs导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。

在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同：
chainWebpack通过链式编程的形式，来修改默认的webpack配置
configureWebpack通过操作对象的形式，来修改默认的webpack配置

两者具体的使用差异，可参考如下网址：https://cli.vuejs.org/zh/guide/webpack.html#webpack-相关

P346 04.生成项目报告

5，通过chainWebpack自定义打包入口

module.exports={
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV==='production',config=>{
            config.entry('app').clear().add('./src/main-prod.js')
        })
        config.when(process.env.NODE_ENV==='development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

P347 05生成项目报告

6，通过externals加载外部CDN资源
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

6，通过externals加载外部CDN资源具体配置代码如下：

config.set('externals',{
    vue:'Vue',
    'vue-router':'VueRouter',
    axios:'axios',
    lodash:'_',
    echarts:'echarts',
    nprogress:'NProgress',
    'vue-quill-editor':'VueQuillEditor'
})

6，通过externals加载外部CDN资源同时，需要在public/index.html文件的头部，添加如下的CDN资源引用：

<！-nprogress的样式表文件-->
<link rel-"stylesheet"href="https://cdn.staticfile.ora/nprogress/0.2.0/nprogress.min.css"/>
<！-富文本编辑器的样式表文件-->
<link rel="stylesheet"href="https://cdn.staticfile.org/qui11/1.3.4/quil1.core.min.css"/>
<link rel="stylesheet"href="https://cdn.staticfile.ora/qui11/1.3.4/cui11.snow.min.css"/><link rel="stylesheet"href="https://cdn.staticfile.org/quil1/1.3.4/quill.bubble.min.css"/

6，通过externals加载外部CDN资源同时，需要在public/index.html文件的头部，添加如下的CDN资源引用：

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.is"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.is/4.17.11/lodash.min.is"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.is"></script>
<！-富文本编辑器的js文件-->
<script src="https://cdn.staticfile.org/qui11/1.3.4/qui11.min.js"x</script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quil1-editor.js"></script>

P348 06生成项目报告

361

P349 07生成项目报告

7，通过CDN优化ElementUI的打包
虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element-ui中的组件，也通过CDN的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下：
0在main-prod.js中，注释掉element-ui按需加载的代码
②在index.html的头部区域中，通过CDN加载element-ui的js和css样式

<！--element-ui的样式表文件-->
<link rel="stylesheet"href="https://cdn.staticfile.org/element-ui/2.8.2/theme-
chalk/index.css"/>
<！--element-ui的js文件-->
<script src="pttps://cdn.staticfile.org/element-ui/2.8.2/index.js"x</script>

P350 08生成项目报告

8，首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

module.exports={
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV==='production',config=>{
            config.plugin('html').tap(args=>{
                args[0].isProd=true
                return args
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV==='development',config=>{
            config.plugin('html').tap(args=>{
                args[0].isProd=false
                return args
            })
        })
    }
}

在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构：

<！-按需渲染页面的标题-->
<title><%= htmlWebpackPlugin.options.isProd ? '' ：'dev - ' %>电商后台管理系统</title>
<！-按需加载外部的CDN资源-->
<% if（htmlwebpackPlugin.options.isProd）{ %>
<！-通过externals加载的外部CDN资源-->
<%}%>

P351 09生成项目报告

9·路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要3步：

安装@babel/plugin-syntax-dynamic-import包。
在babel.configjs配置文件中声明该插件。
将路由改为按需加载的形式，示例代码如下：

const foo=()=>import(/*webpackChunkName:"group-foo"*/'./vue.vue')
/**/内分组 同一个 打包一块

关于路由懒加载的详细文档，可参考如下链接：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

npm i @babel/plugin-syntax-dynamic-import -D

https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

P352 10生成项目报告

2.1项目上线相关配置1，通过node创建web服务器。
2，开启gzip配置。
3，配置https服务。
4，使用pm2管理应用。

1，通过node创建web服务器
创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管为静态资源即可，关键代码如下：

const express=require('express')
//创建web服务器
const app=express()
//托管静态资源
app.use(express.static('./dist'))
//启动 web服务器
app.listen(80,()=>{
    console.log('web server running at http://127.0.0.1> npm init -y')
})

npm init -y

npm i express -S

P353 11.生成项目报告

2·开启gzip配置
使用gzip可以减小文件体积，使传输速度更快。
2可以通过服务器端使用Express做gzip压缩。其配置如下：

//安装相应包
npm install compression -D
//导入包
const compression = require('compression');
//启用中间件
app.use（compression（））；

P354 12生成项目报告

367

3.配置HTTPS服务
为什么要启用HTTPS服务？
传统的HTTP协议传输的数据都是明文，不安全采用HTTPS协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

申请SSL证书（https://freessl.org）

学习免费的

进入https://freessl.cn/官网，输入要申请的域名并选择品牌。
输入自己的邮箱并选择相关选项。
验证DNS（在域名管理后台添加TXT记录）。
验证通过之后，下载SSL证书（full chain.pem公；private.key私钥）。

在后台项目中导入证书

const https=require('https')
const fs=require('fs')
const options={
    cert:fs.readFileSync('./full_chain.pem')
    key:fs.readFileSync('./private.key')
}
https.createServer(options,app).listen(443)

P355 13.生成项目报告

4，使用pm2管理应用
0在服务器中安装pm2：npm i pm2 -g

启动项目：pm2 start脚本--name 自定义名称
查看运行项目：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称 /id
删除项目：pm2 delete 自定义名称

P356 01.Vuex学习目标

P357 02.Vuex概述

1.1组件之间共享数据的方式
父向子传值：v-bind属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据：EventBus
$on 接收数据的那个组件
$emit发送数据的那个组件

1.2 Vuex是什么
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

1.3使用Vuex统一管理状态的好处
0能够在vuex中集中管理共享的数据，易于开发和后期维护
②能够高效地实现组件之间的数据共享，提高开发效率
3存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.3什么样的数据适合存储到Vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

P358 03.Vuex的基本使用

1.安装vuex依赖包
npm install vuex --save
2·导入vuex包
import Vuex from 'vuex'
Vue.use（Vuex）

3·创建store对象
const store = new Vuex.store（{
//state中存放的就是全局共享的数据
state：{count：0}
}）

4，将store对象挂载到vue实例中

new Vue({
    el:'#app',
    render:h=>h(app),
    router,
    //将创建的共享数据对象，挂载到vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store
})
Vuex.store({
    state:{},
    mutations:{},
    actions:{},
    gettings:{}
    modules:{}
})

store s道

P359 04案例：计数器01

P360 05.Vuex的核心概念State01

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

const store=new Vuex.Store({
    state:{count:0}
})
访问
this.$store.state.count

P361 06.Vuex的核心概念State02

组件访问State中数据的第二种方式：

1，从vuex中按需导入mapstate函数
import {mapState} from 'vuex'
通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：
1/2·将全局数据，映射为当前组件的计算属性
computed:{
    ...mapState(['count'])
}

setup使用 useStore

P362 07.Vuex的核心概念Mutation

3.3 Mutation Mutation用于变更Store中的数据。
0只能通过mutation 变更Store数据，不可以直接操作Store中的数据。
2通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

const store=new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state,count){
            state.count+=count
        }
    }
})
使用
this.$state.commit('add',11)

P363 08.Mutation传递参数

P364 09.触发Mutation函数的第二种方式

1·从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'
通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：
2·将指定的mutations函数，映射为当前组件的methods函数
methos:{
    ...mapMutations(['add','addN']),
    add(){
        this.add(1)
    }   
}

P365 10案例：计数器02

Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

const store=new Vuex.store({
    mutations:{
        add(state,param){
            state.count+=param
        }
    },
    actions:{
        addAsync(context,param){
            setTimeout(()=>{
                context.commit('add',param)
            },1000)
        }
    }
})
使用
this.$state.dispatch('addAsync',22)

P366 11.Vuex的核心概念Action

P367 12触发Action函数的第二种方式

1·从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法：
2·将指定的actions函数，映射为当前组件的methods函数
methods:{
    ...mapActions(['addAsync' ,'addNAsync']),
    demo(){
        this.addAsync()
    }
}
或 @click="addAsync"

P368 13.Vuex的核心概念Getter

Getter用于对Store中的数据进行加工处理形成新的数据。
@Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2 Store中数据发生变化，Getter的数据也会跟着变化。

const store=new Vuewx.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state=>{
            return state.count
        }
    }
})
this.$store.getters.showNunm
import {mapGetters} from j'vuex'
computed:{
    ...mapGetters(['showNum'])
}

P369 14案例：Todos01

ant-design-vue UI组件库

P370 15案例：Todos02

P371 16案例：Todos03

P372 17案例：Todos04

P373 18案例：Todos05

P374 19案例：Todos06

P375 20.案例：Todos07

@change="()=>{}"

P376 21案例：Todos08

P377 22案例：Todos09

P378 23案例：Todos 10

P379 24案例：Todos11

posted @ 2024-12-14 13:44 KooTeam 阅读(57) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

Vue全家桶从入门到实战

Vue全家桶从入门到实战

P1 02.概述2

P2 03.基本使用

P3 04.vue模板语法

P4 05.指令v-cloak

P5 06数据绑定指令

P6 07数据响应式

P7 08双向数据绑定

P8 09.双向数据绑定2

P9 10事件绑定

P10 11.事件基本使用

P11 12.事件修饰符

P12 13按键事件修饰符

P13 14.自定义按键事件修饰符

P14 15案例：简单计算器

P15 16属性绑定

P16 17.属性绑定2

P17 18样式绑定

P18 19样式绑定2

P19 20样式绑定语法细节

P20 21.style样式处理

P21 22分支循环结构

P22 23.循环结构

P23 24.v-if和v-for结合使用

P24 25案例：Tab选项卡01

P25 26案例：Tab选项卡02

P26 27案例：Tab选项卡03

P27 28案例：Tab选项卡04

P28 01.vue常用特性

P29 02表单操作01

P30 03表单操作02

P31 04.表单域修饰符

P32 05.自定义指令

P33 06自定义指令用法

P34 07自定义指令局部指令

P35 08计算属性

P36 09计算属性与方法的区别

P37 10侦听器开始

P38 11.侦听器的应用场景

P39 12过滤器

P40 13.带参数的过滤器

P41 14 例：使用过滤器格式化日期

P42 15综合案例：图书管理01

P43 16综合案例：图书管理02

P44 17综合案例：图书管理03补充知识

P45 18综合案例：图书管理04

P46 19综合案例：图书管理05

P47 20综合案例：图书管理06

P48 21综合案：图书管理07

P49 22综合案例：图书管理08

P50 23综合案例：图书管理09

P51 24综合案例：图书管理10

P52 01.组件化开发开始

P53 02组件化开发思想

P54 03组件注册

P55 04.组件注册注意事项

P56 05.组件命名方式

P57 06局部组件注册

P58 07.Vue调试工具使用

P59 08组件间数据交互

P60 09.props属性名规则

P61 10.props属性值类型

P62 11子组件向父组件传值

P63 12子组件通过自定义事件向父组件传值

P64 13非父子组件传值

P65 14.组件插槽

P66 15.具名播槽用法

P67 16作用域插槽

P68 17案例：购物车01

P69 18案例：购物车02

P70 19例：购物车03

P71 20例：购物车04

P72 21例：购物车05

P73 22案例：购物车06

P74 01.Vue前端交互开始

P75 02.Vue前端交互模式

P76 03.Promise用法