Jin-进

Vue教程

一、Vue

尚硅谷

Vue学习视频：尚硅谷学习视频

尚硅谷:
http://www.atguigu.com/

Vue学习视频(尚硅谷)：
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1

百度云课件(尚硅谷资料):
链接：https://pan.baidu.com/s/1D3E3NaozogVThwApKjuGGw 
提取码：cel8

gitee笔记项目：
https://gitee.com/happy_sad/vue

Vue.js:
https://cn.vuejs.org/

Vue2/elementUI:
https://element.eleme.cn/#/zh-CN/component/installation

Vue3/elementUI:
https://element-plus.gitee.io/zh-CN/component/button.html

BootCDN:
https://www.bootcdn.cn/

npm:
https://www.npmjs.com/

一、Vue简介

一、Vue是什么？

Vue是一套构建用户界面的渐进式JavaScript框架。

二、谁开发的？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JpRtiRoz-1679298870384)(null)]

三、Vue的特点

四、搭建开发环境

五、名词解析

1、回调函数

没调用，但Vue执行后返回页面

二、Vue入门

一、初识Vue




    
    
    
    初识Vue
    


    
        Hello,{{name}}

二、Vue模版语法

html 中包含了一些 JS 语法代码，语法分为两种，分别为： 
1. 插值语法（双大括号表达式） 
2. 指令（以 v-开头）
插值语法：{{xxx}}
1. 功能: 用于解析标签体内容 
2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析
指令语法：v-xxx
1. 功能: 解析标签属性、解析标签体内容、绑定事件 
2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析




    
    
    
    
    Document


    
        
        
        插值语法
        Hello,{{name}}
        
        
        
        指令语法
        学习{{home}}
        

        学习尚硅谷
        

        学习{{home}}

三、数据绑定

v-bind:value="xxx"			:value="xxx"
1. 语法：v-bind:href ="xxx" 或简写为 :href 
2. 特点：数据只能从 data 流向页面

v-model:value="xxx"			v-model="xxx"
1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx" 
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data




    
    
    
    
    Document


    
        
        
        单向数据绑定：
        

        单向数据绑定：
        

        
        
        双向数据绑定：
        

        双向数据绑定：

四、el与data的两种写法

v.$mount('#root'); 
data:function(){
    return {
        
    }
}




    
    
    
    
    Document


    
        Hello,{{name}}

el的两种写法

data的两种写法

五、MVVM模型

六、数据代理

1、Object.defineProperty




    
    
    
    Document

2、数据代理的定义




    
    
    
    Document

3、Vue中的数据代理




    
    
    
    
    Document


    
        学校名称:{{name}}
        学校地址:{{address}}

七、事件处理

1、事件的基本使用

v-on:click=""			@click=""
1、使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中配置的函数，不要用箭头函数，否则this就不是vm了
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5、@click="xxx" 和 @click="xxx(event)",效果一致，但后则可以传参




    
    
    
    
    Document


    
        ComeOn{{name}}

2、事件的修饰符

Vue中的事件修饰符：
1、prevent:阻止默认事件	event.preventDefault()
2、stop：阻止事件冒泡	   event.stopPropagation()
3、once：事件只能触发一次
4、capture：使用事件的捕获模式
5、self：只有event.target是当前操作的元素是才触发事件
6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕




    
    
    
    
    
    Document


    
        ComeOn {{name}}
        点击后不跳转链接
        
        
            
        
        
        
        
        
            div1
            
                div2

3、键盘事件

v-on:keyup=""			@keyup=""
v-on:keydown=""			@keydown=""
1.Vue中常用的按键别名：
		回车 => enter
		删除 => delete (捕获“删除”和“退格”键)
		退出 => esc
		空格 => space
		换行 => tab (特殊，必须配合keydown去使用)
		上 => up
		下 => down
		左 => left
		右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
	(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
	(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名





    
    
    
    
    Document



    
        ComeOn {{name}}

八、计算属性

1、计算属性_插值语法实现





    
    
    
    
    Document



    
        ComeOn {{name}}
        姓:


        名:


        姓名:{{firstName}}-{{lastName}}


        姓名:{{firstName + '-' + lastName}}


        姓名:{{firstName.slice(0,3)}}-{{lastName}}

2、计算属性_methods实现





    
    
    
    
    Document



    
        ComeOn {{name}}
        姓:


        名:


        姓名:{{fullName()}}

3、计算属性_计算属性实现

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        姓:


        名:


        姓名:{{fullName}}


        姓名:{{fullName}}


        姓名:{{fullName}}

4、计算属性_简单实现





    
    
    
    
    Document



    
        ComeOn {{name}}
        姓:


        名:


        姓名:{{fullName}}

九、监控属性

1、监视属性_天气案例





    
    
    
    
    Document



    
        ComeOn {{name}},{{x}}
        今天天气很{{isHot ? '炎热' : '凉爽'}}
        今天天气很{{info}}

2、监视属性_天气实现

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        今天天气很{{info}}

3、监视属性_深度监视

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        今天天气很{{info}}
        
        
        a的值是:{{numbers.a}}
        
        
        b的值是:{{numbers.b}}

4、监视属性_简写





    
    
    
    
    Document



    
        ComeOn {{name}}
        今天天气很{{info}}

5、监视属性_姓名案例

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        姓:


        名:


        姓名:{{fullName}}

十、绑定样式

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





    
    
    
    
    Document
    



    
        ComeOn {{name}}
        
        {{name}}
        


        
        {{name}}
        


        
        {{name}}
        


        
        {{name}}
        


        
        {{name}}
        


        
        {{name}}
        


        
        {{name}}

十一、条件渲染

#条件渲染：
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一定可以获取到。





    
    
    
    
    Document



    
        ComeOn {{name}}
        
        Wellcome to {{school}}
        Wellcome to {{school}}
        
        Wellcome to {{school}}
        Wellcome to {{school}}

        当前n值为：{{n}}
        
        Angular
        React
        Vue

        C
        C++
        Java

        C
        C++
        v-else

十二、列表渲染

1、基本列表

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        
        人员列表（遍历数组）
        
            {{item.id}}-{{item.name}}-{{item.age}}
        
        
        人员列表（遍历数组）
        
            {{item}}-{{index}}
        
        
        
        汽车信息（遍历对象）
        
            {{car}}-{{index}}
        
        
        测试遍历字符串
        
            {{char}}-{{index}}
        
        
        测试遍历指定次数
        
            {{number}}-{{index}}

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更新 ==> 界面有问题。
4. 开发中如何选择key?:
	1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
	2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。





    
    
    
    
    Document



    
        ComeOn {{name}}
        
        人员列表（遍历数组）
        
            
                {{item}}-{{index}}-{{items.id}}
                
            
        
        
        
        
            
                {{item}}-{{index}}-{{item.id}}

3、列表过滤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>ComeOn {{name}}</h1>
        <h2>人员列表（遍历数组）</h2>
        <input type="text" placeholder="请输入名字进行模糊查询" v-model:value="keyWord">
        <ul>
            <li v-for="(item, index) in filitems" :key="index">{{item.name}}-{{item.age}}-{{item.sex}}</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Jin',
                keyWord: '',
                items: [
                    { id: '001', name: '马冬梅', age: 18, sex: '女' },
                    { id: '002', name: '周冬雨', age: 19, sex: '女' },
                    { id: '003', name: '周杰伦', age: 20, sex: '男' },
                    { id: '004', name: '温兆伦', age: 21, sex: '男' },
                ],
                filitems: []
            },
            // 用监视属性实现
            watch: {
                keyWord: {
                    immediate: true,            //默认执行watch里的info（初始化时让handler调用一下）
                    handler(val) {
                        console.log('keyWord改了,为' + val);
                        this.filitems = this.items.filter((p) => {
                            return p.name.indexOf(val) !== -1;
                        })
                    }
                }
            }
        })
        // const vm = new Vue({
        //     el: '#root',
        //     data: {
        //         name: 'Jin',
        //         keyWord: '',
        //         items: [
        //             { id: '001', name: '马冬梅', age: 18, sex: '女' },
        //             { id: '002', name: '周冬雨', age: 19, sex: '女' },
        //             { id: '003', name: '周杰伦', age: 20, sex: '男' },
        //             { id: '004', name: '温兆伦', age: 21, sex: '男' },
        //         ]
        //     },
        //     //用计算属性实现
        //     computed: {
        //         filitems: {
        //             get() {
        //                 return this.filitems = this.items.filter((p) => {
        //                     return p.name.indexOf(this.keyWord) !== -1;
        //                 })
        //             },
        //             set() { }
        //         }
        //     }
        // })
    </script>
</body>

</html>

4、列表排序





    
    
    
    
    Document



    
        ComeOn {{name}}
        人员列表（遍历数组）
        
        
            {{item.name}}-{{item.age}}-{{item.sex}}

5、更新问题_数组





    
    
    
    
    Document



    
        ComeOn {{name}}
        人员列表（遍历数组）
        
        
        
            {{item.name}}-{{item.age}}-{{item.sex}}

6、监控数据改变原理_对象





    
    
    
    
    Document



    
        ComeOn {{name}}
        学校名称:{{school}}
        学校地址:{{address}}

7、模拟数据监测原理





    
    
    
    
    Document



    
        ComeOn Jin

8、vue.set的使用





    
    
    
    
    Document



    
        ComeOn {{name}}
        
        学校名称:{{school.school}}
        学校地址:{{school.address}}
        学校校长:{{school.leader}}
        
        学生信息
        
        学生名字:{{student.name}}
        学生年龄:真实{{student.age.rAge}}-对外年龄:{{student.age.sAge}}
        学生性别:{{student.sex}}
        
        朋友
        
            {{friend.name}}-{{friend.age}}

9、监控数据改变原理_数组





    
    
    
    
    Document



    
        ComeOn {{name}}
        人员列表（遍历数组）
        
        
        
        
            {{item.name}}-{{item.age}}-{{item.sex}}

10、总结vue数据监测

#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的根数据对象 添加属性！！！





    
    
    
    
    Document



    
        ComeOn {{name}}
        学生信息

        

        

        


        

        

        


        

        

        

        

        

        

        

        


        学生名字:{{student.name}}
        学生年龄:{{student.age}}
        学生性别:{{student.sex}}
        学生爱好:
        
            {{hobby}}
        
        
        朋友
        
            {{friend.name}}-{{friend.age}}

十三、收集表单数据

#收集表单数据：
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
	1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
	2.配置input的value属性:
		 (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
		 (2)v-model的初始值是数组，那么收集的的就是value组成的数组
#备注：v-model的三个修饰符：
	lazy：失去焦点再收集数据
	number：输入字符串转为有效的数字
	trim：输入首尾空格过滤





    
    
    
    
    Document



    
        ComeOn {{name}}
        
            账号:
            


            密码:
            


            年龄:
            


            性别:
            男:
            女:
            


            爱好:
            学习:
            打游戏:
            吃饭:
            


            所属校区：
            
            


            其他信息：
            
            


            阅读并接受用户协议《用户协议》

十四、过滤器

#过滤器：
#定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
#语法：
	1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
	2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
#备注：
	1.过滤器也可以接收额外参数、多个过滤器也可以串联
	2.并没有改变原本的数据, 是产生新的对应的数据





    
    
    
    
    
    Document



    
        ComeOn {{name}}
        
        
        现在是:{{fmtTime}}
        
        现在是:{{getFmtTime()}}
        
        现在是:{{time | timeFormater}}
        
        现在是:{{time | timeFormater('YYYY_MM_DD')}}
        现在是:{{time | timeFormater('YYYY_MM_DD') | timeSlice}}
        控制台代码查看
    
    
        {{msg | mySlice}}

十五、内置指令

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}}则不会。





    
    
    
    
    Document



    
        ComeOn {{name}}
        ComeOn
        ComeOn

2、v-html_指令

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        ComeOn

#浏览器使用cookie-Editor可以批量导出导入cookie

3、v-cloak_指令

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





    
    
    
    
    Document



    
        ComeOn {{name}}

4、v-once_指令

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        初始化的n值为：{{n}}
        当前的n值为：{{n}}

5、v-pre_指令

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        Vue很简单
        当前的n值为：{{n}}

十六、自定义指令

#需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
#需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

1、自定义指令_函数式

#自定义指令总结：
一、定义语法：
	(1).局部指令：
			new Vue({directives:{指令名:配置对象}})  或  new Vue({directives{指令名:回调函数}})
	(2).全局指令：
			Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
	(1).bind：指令与元素成功绑定时调用。
	(2).inserted：指令所在元素被插入页面时调用。
	(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。





    
    
    
    
    Document



    
        ComeOn {{name}}
        当前的n的值为：
        放大10倍后的n的值是：
        放大10倍后的n的值是：

2、demo





    
    
    
    Document

十七、生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCnsyAiK-1679298848538)(https://gitee.com/happy_sad/typora-image/raw/master/images/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png)]

1、引出生命周期

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        学习Vue的生命周期

2、分析生命周期





    
    
    
    
    Document



    
        ComeOn {{name}}
        当前的n值是:{{n}}

3、总结生命周期

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





    
    
    
    
    Document



    
        ComeOn {{name}}
        学习Vue的生命周期

十八、组件——非单文件组件

传统方式编写应用

组件方式编写应用

#组件的定义：实现应用中局部功能代码和资源的集合
1.模块化：当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
2.组件化：当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

1、非单文件组件_基本使用

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

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

#二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)

#三、编写组件标签：
	<school></school>





    
    
    
    
    Document



    
        ComeOn {{name}}

2、非单文件组件_注意事项

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





    
    
    
    
    Document



    
        ComeOn {{name}}

3、非单文件组件_组件嵌套





    
    
    
    
    Document



    
        ComeOn {{name}}

4、非单文件组件_VueComponent

#关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，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。
#注:vm比vc多一些（vm有el可以绑定结构root、data必须写成函数，不能写成对象）





    
    
    
    
    Document



    
        ComeOn {{name}}

5、非单文件组件_内置关系

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





    
    
    
    
    Document



    
        ComeOn {{name}}

十九、组件——单文件组件

1、创建School.vue

2、创建Student.vue

3、创建App.vue(管理所有vue组件)

4、创建main.js

import App from 'App.vue'
new Vue({
    el: '#root',
    template: ``,
    components: { App },
})

5、创建index.html





    
    
    
    练习单文件组件

二、Vue Cli

一、安装脚手架

#win+r打开cmd
cmd
#测试有无安装Vue Cli
vue
#配置 npm 淘宝镜像
npm config set registry https://registry.npm.taobao.org
#全局安装@vue/cli
npm install -g @vue/cli
#关闭cmd，重新打开输入vue
vue
#切换到你要创建项目的目录，然后使用命令创建项目
vue create [项目名称]
#进入到创建好的vue脚手架中
cd [项目名称]
#查看具体的 webpakc 配置
vue inspect > output.js
#启动项目
npm run serve
#访问端口，查看F12下的Vue

二、分析脚手架

1、src/main.js

/**
 * 该文件是整个项目的入口文件
 */
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建Vue的实例对象vm
new Vue({
  //将App组件放入容器中
  render: h => h(App),
}).$mount('#app') //注入容器id

2、src/App.Vue

3、components

School.Vue

Student.vue

4、public/index.html

DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  
  
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  
  <title>
    <%= htmlWebpackPlugin.options.title %>
  title>
head>

<body>
  
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.strong>
  noscript>
  <div id="app">div>
  
body>

html>

5、vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改配置项,关闭语法检查(语法检查的时候把不规范的代码(即Componemts组件命名不规范)当成了错误)
  lintOnSave: false
})

三、vue_test

├── 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：包版本控制文件

1、render函数

#关于不同版本的Vue
1.vue.js与vue.runtime.xxx.js的区别：
	(1)vue.js是完整版的Vue，包含：核心功能+模板解析器
	(2)vue.runtime.xxx.js是运行时的Vue，只包含：核心功能，没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能在创建Vue实例中使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

// /**
//  * 该文件是整个项目的入口文件
//  */
// //引入Vue
// import Vue from 'vue'
// //引入App组件，它是所有组件的父组件
// import App from './App.vue'
// //关闭Vue的生产提示
// Vue.config.productionTip = false
// //创建Vue的实例对象vm
// new Vue({
//   //将App组件放入容器中
//   render: h => h(App),
// }).$mount('#app') //注入容器id

import Vue from 'vue'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  // template:'你好啊
',    //失效，使用了阉割版的运行时Vue(vue.runtime.esm.js),没有模板解析器
  render(createElement) {
    return createElement('h1', '你好啊');
  },
  // render: createElement => createElement('h1', '你好啊'),
  // render: h => h(App),
})

vue.config.js配置文件

1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置（生成output.js文件）
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2、ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识：```<h1 ref="xxx">.....</h1>```或 ```<School ref="xxx"></School>```
   2. 获取：```this.$refs.xxx```

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;

new Vue({
    // el: '#app',
    render: h => h(App)
}).$mount('#app')

src/components/School.vue

src/App.vue

3、props配置

1. 功能：让组件接收外部传过来的数据
2. 传递数据：```<Demo name="xxx"/>```
3. 接收数据：
   1. 第一种方式（只接收）：```props:['name'] ```
   2. 第二种方式（限制类型）：```props:{name:String}```
   3. 第三种方式（限制类型、限制必要性、指定默认值）：
      ```js
      props:{
      	name:{
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }

#备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
	// el:'#app',
	render:h=>h(App)
}).$mount('#app')

src/components/Student.vue

src/App.vue

4、mixin混入

# mixin(混入)
1. 功能：可以把多个组件共用的配置提取成一个混入对象
2. 使用方式：
   第一步定义混合：

{
data(){…},
methods:{…}
…
}

第二步使用混入：

	全局混入：```Vue.mixin(xxx)```
	局部混入：```mixins:['xxx']	```

src/main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin,hunhe} from './mixin.js'
Vue.config.productionTip=false;
Vue.mixin(mixin)
Vue.mixin(hunhe)
new Vue({
	// el:'#app',
	render:h=>h(App)
}).$mount('#app')

src/App.vue

src/components/Student.vue

src/components/School.vue

src/mixin.js

export const mixin={
	methods: {
		showName(){
			alert(this.name);
		}
	},
	mounted() {
		console.log('挂载之后事件');
	},
}
export const hunhe={
	data(){
		return{
			x:100,
			y:200
		}
	}
}

5、插件

1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3. 定义插件：
   ```js
   对象.install = function (Vue, options) {
       // 1. 添加全局过滤器
       Vue.filter(....)
   
       // 2. 添加全局指令
       Vue.directive(....)
   
       // 3. 配置全局混入(合)
       Vue.mixin(....)
   
       // 4. 添加实例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }

使用插件：Vue.use()

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入插件
import plugins from './plugins.js'
Vue.config.productionTip = false;
//应用插件
Vue.use(plugins,1,2,3)
new Vue({
	render:h=>h(App)
}).$mount('#app')

src/App.vue

src/components/School.vue

src/plugins.js

export default {
	install(Vue,x,y,z){
		// console.log('@@@install',Vue);
		console.log(x,y,z);

		//全局的过滤器
		Vue.filter('mySlice', function (value) {
				return value.slice(0, 5);
		})

		// 全局指令
		Vue.directive('fbind', {
				//指令一上来就被绑定
				bind(element, binding) {
						console.log('fbind-bind', this);
						element.value = binding.value;
				},
				//指令所在页面被插入页面时
				inserted(element, binding) {
						console.log('fbind-inserteds', this);
						element.focus();
				},
				//指令所在模板被重新解析时
				update(element, binding) {
						console.log('fbind-update', this);
						element.value = binding.value;
						element.focus();
				}
		});

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

		//给原型上添加一个方法
		Vue.prototype.hello=()=>{
			alert('Hello')
		}
	}
}

// const obj={
// 	install(){
// 		console.log('@@@install');
// 	}
// }
// export default obj;

6、scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：```<style scoped>```

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
	render:h=>h(App)
}).$mount('#app')

src/App.vue

src/components/School.vue

src/components/Student.vue

7、TodoList案例

1. 组件化编码流程：

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

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

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

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

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

2. props适用于：

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

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

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

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

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
	render:h=>h(App)
}).$mount('#app')

src/App.vue

src/components/MyHeader.vue

src/components/MyList.vue

src/components/MyItem.vue

src/components/MyFooter.vue

8、浏览器本地存储（webStorage）

## 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。

src/localScorage.html

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>localScoragetitle>
head>

<body>
	<h2>localScorageh2>
	<button onclick="saveData()">点击保存一个数据button>
	<button onclick="readData()">点击读取一个数据button>
	<button onclick="deleteData()">点击删除一个数据button>
	<button onclick="deleteAllData()">点击清空所有数据button>
body>
<script>
	function saveData() {
		let person = { name: '张三', age: 18 };
		// console.log(person.toString());
		window.localStorage.setItem('msg', 'hello');
		window.localStorage.setItem('msg2', 666);
		window.localStorage.setItem('person', JSON.stringify(person));
	};
	function readData() {
		console.log(window.localStorage.getItem('msg'));
		console.log(window.localStorage.getItem('msg2'));
		console.log(window.localStorage.getItem('person'));
		console.log(window.localStorage.getItem('msg3'));
		console.log(window.localStorage.getItem('person2'));
	};
	function deleteData() {
		window.localStorage.removeItem('msg');
	};
	function deleteAllData() {
		window.localStorage.clear();
	}
script>

html>

src/sessionScorage.html

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>sessionScoragetitle>
head>

<body>
	<h2>sessionScorageh2>
	<button onclick="saveData()">点击保存一个数据button>
	<button onclick="readData()">点击读取一个数据button>
	<button onclick="deleteData()">点击删除一个数据button>
	<button onclick="deleteAllData()">点击清空所有数据button>
body>
<script>
	function saveData() {
		let person = { name: '张三', age: 18 };
		// console.log(person.toString());
		window.sessionStorage.setItem('msg', 'hello');
		window.sessionStorage.setItem('msg2', 666);
		window.sessionStorage.setItem('person', JSON.stringify(person));
	};
	function readData() {
		console.log(window.sessionStorage.getItem('msg'));
		console.log(window.sessionStorage.getItem('msg2'));
		console.log(window.sessionStorage.getItem('person'));
		console.log(window.sessionStorage.getItem('msg3'));
		console.log(window.sessionStorage.getItem('person2'));
	};
	function deleteData() {
		window.sessionStorage.removeItem('msg');
	};
	function deleteAllData() {
		window.sessionStorage.clear();
	}
script>

html>

9、TodoList本地存储

#只需更改了App.vue

src/App.vue

10、组件的自定义事件

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。
3. 绑定自定义事件：
   1. 第一种方式，在父组件中：```<Demo @atguigu="test"/>```或 ```<Demo v-on:atguigu="test"/>```
   2. 第二种方式，在父组件中：
      ```js
      <Demo ref="demo"/>
      ......
      mounted(){
         this.$refs.xxx.$on('atguigu',this.test)
      }

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

触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App),
	// mounted() {
	// 	setTimeout(() => {
	// 		this.$destroy();
	// 	}, 3000);
	// },
}).$mount('#app')

src/App.vue

src/components/School.vue

src/components/Student.vue

11、TodoList自定义事件

src/App.vue

src/components/MyHeader.vue

src/components/MyFooter.vue

12、全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 安装全局事件总线：

   ```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)
}
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

// Vue.prototype.x = {a:1,b:2}
// console.log(Vue.prototype)
// const Demo = Vue.extend({})
// const vc = new Demo()
// Vue.prototype.x = vc

new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this		//安装全局事件总线
	},
}).$mount('#app')

src/App.vue

src/components/School.vue

src/components/Student.vue

13、TodoList全局事件总线

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this		//安装全局事件总线，$bus就是当前应用的vm
	},
}).$mount('#app')

src/App.vue

src/components/MyList.vue

src/components/MyItem.vue

14、消息订阅与发布(pubsub)

下载pubsub-js库

PS E:\VueProjects\Vue_study> cd vue_test
PS E:\VueProjects\Vue_study\vue_test> npm install pubsub-js
npm WARN [email protected] requires a peer of less@^3.5.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor in 12.829s
PS E:\VueProjects\Vue_study\vue_test>

1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 使用步骤：

   1. 安装pubsub：```npm i pubsub-js```

   2. 引入: ```import pubsub from 'pubsub-js'```

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>

      ```js
      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }

  4. 提供数据：```pubsub.publish('xxx',数据)```

  5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去取消订阅。

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App)
}).$mount('#app')

src/App.vue

src/components/School.vue

src/components/Student.vue

15、TodoList消息订阅与发布（pubsub）

src/App.vue

src/components/MyItem.vue

16、TodoList编辑(nextTick)

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

src/App.vue

src/components/MyItem.vue

17、Vue封装过度与动画

animate.css库:https://www.npmjs.com/package/animate.css

PS E:\VueProjects\Vue_study\vue_test> npm install animate.css
npm WARN [email protected] requires a peer of less@^3.5.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor in 18.107s
PS E:\VueProjects\Vue_study\vue_test>

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
2. 图示:如下
3. 写法：
   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属性：
      ```vue
      <transition name="hello">
      	<h1 v-show="isShow">你好啊！</h1>
      </transition>

备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值。

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Test.vue

src/components/Test2.vue

src/components/Test3.vue

18、TodoList封装过度与动画

src/components/MyItem.vue

src/components/MyList.vue

19、vue脚手架配置代理服务器

安装axios

PS E:\VueProjects\Vue_study\vue_test> npm install axios
npm WARN [email protected] requires a peer of less@^3.5.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor in 12.815s
PS E:\VueProjects\Vue_study\vue_test>

#方法一：
在vue.config.js中添加如下配置：
```js
devServer:{
  proxy:"http://localhost:5000"
}
```
说明：
1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

#方法二：
编写vue.config.js配置具体代理规则：
```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. 缺点：配置略微繁琐，请求资源时必须加前缀。

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改配置项,关闭语法检查(语法检查的时候把不规范的代码(即Componemts组件命名不规范)当成了错误)
  lintOnSave: false,
	// 开启代理服务器(方式一)
	// devServer: {
  //   proxy: 'http://localhost:5000'
  // },
	//开启代理服务器(方式二)
	devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:5000',
				// 用于支持websocket
        ws: true,
				// 用于控制请求中的host值(默认为true向服务器撒谎其请求地址,为fasle则是正确的自身请求地址)
        changeOrigin: true,
				// 过滤掉axios请求的(http://localhost:8080/api1/students)在中的api1
				pathRewrite:{'^/api1':''},
      },
      '/api2': {
        target: 'http://localhost:5001',
				// 用于支持websocket
        ws: true,
				// 用于控制请求中的host值(默认为true向服务器撒谎其请求地址,为fasle则是正确的自身请求地址)
        changeOrigin: false,
				// 过滤掉axios请求的(http://localhost:8080/api2/cars)在中的api2
				pathRewrite:{'^/api2':''},
      },
    }
  }
})

public/students

axios配置代理时请求路劲同名会选择前端有的文件，而不会去请求服务器

	vue.config.js配置(不完美)
	// 开启代理服务器
	devServer: {
    proxy: 'http://localhost:5000'
  }
注:	1、不能配置多个代理
		2、不能灵活的控制走不走代理

20、Github搜索案例

public/css/boostrap.css

#此处引入bootstrap.css

public/index.html





	
	
	
	
	
	
	
	
	
	
	
	
		<%= htmlWebpackPlugin.options.title %>

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Search.vue

src/components/List.vue

21、Github搜索案例(v-resource)

安装v-resource插件

PS E:\VueProjects\Vue_study\vue_test> npm install vue-resource
npm WARN [email protected] requires a peer of less@^3.5.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 25 packages from 10 contributors in 19.756s
PS E:\VueProjects\Vue_study\vue_test>

src/main.js

import Vue from 'vue'
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
Vue.config.productionTip = false;
Vue.use(vueResource)
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/components/Search.vue

22、插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 ===> 子组件</strong> 。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：
   1. 默认插槽：
      ```vue
      父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>

  2. 具名插槽：

  ```vue
  父组件中：
          
              
  
              
          
  子组件中：
          
  
  ```

作用域插槽：

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

具体编码：

父组件中：
		
			
		

		
			
		
子组件中：

##### 1、默认插槽

src/main.js

```js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Category.vue

2、具名插槽

src/main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Category.vue

3、作用域插槽

src/main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Category.vue

23、Vuex（插件）

1、Vue插件

#使用场景
1.多个组件依赖于同一个状态
2.来自不同组件的行为需要变更同一状态
Github：https://github.com/vue.js/vuex

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
}).$mount('#app')

src/App.vue

src/components/Count.vue

#	:value="(js表达式计算)"

2、Vuex的工作原理图

3、搭建Vuex环境

PS E:\VueProjects\Vue_study> npm install vuex@3
npm WARN saveError ENOENT: no such file or directory, open 'E:\VueProjects\Vue_study\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'E:\VueProjects\Vue_study\package.json'
npm WARN [email protected] requires a peer of vue@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN Vue_study No description
npm WARN Vue_study No repository field.
npm WARN Vue_study No README data
npm WARN Vue_study No license field.

+ [email protected]
added 1 package from 1 contributor in 1.099s

1、创建文件：```src/store/index.js```

```shell
方式一：src/vuex/store.js
方式二(官网):src/store/index.js
```

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

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

1. 组件中读取vuex中的数据：```$store.state.sum```

2. 组件中修改vuex中的数据：```$store.dispatch('action中的方法名',数据)```或 ```$store.commit('mutations中的方法名',数据)```

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

src/main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

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

const vm = new Vue({
	render:h=>h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
	store:store,
}).$mount('#app')
console.log(vm)

src/App.vue

src/store/index.js

//改文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//使用vuex插件
Vue.use(Vuex)

//准备actions----用于响应组件中的动作
const actions = {
	jia(context,value){
		console.log('actions中的jia被调用了',context,value);
		context.commit('JIA',value);
	},
	// jian(context,value){
	// 	console.log('actions中的jian被调用了',context,value);
	// 	context.commit('JIAN',value);
	// },
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了',context,value);
		if(context.state.sum % 2){
			context.commit('JIA',value);
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了',context,value);
		setTimeout(() => {
			context.commit('JIA',value);
		}, 500);
	},
}
//准备mutations----用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了',state,value);
		state.sum = state.sum + value;
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了',state,value);
		state.sum = state.sum - value;
	}
}
//准备state----用于存储数据
const state = {
	sum:0,		//当前的和
}

const store = new Vuex.Store({
	actions:actions,
	mutations:mutations,
	state:state
})

//暴露/导出store
export default store

src/components/Count.vue

4、getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
2. 在```store.js```中追加```getters```配置
   ```js
   ......
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })

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

5、四个map方法的使用

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

computed: {
    // 1、手写计算属性接取store的值
    // sum(){
    // 	return this.$store.state.sum;
    // },
    // school(){
    // 	return this.$store.state.school;
    // },
    // subject(){
    // 	return this.$store.state.subject;
    // },
    // 2、借助mapState生成计算属性，从state中读取数据(对象写法)
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    // 3、借助mapState生成计算属性，从state中读取数据(数组写法)
    ...mapState(['sum','school','subject']),
},

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

computed: {
    // 1、手写计算属性接取store的值
    // bigSum(){
    // 	return this.$store.getters.bigSum;
    // },
    // 2、借助mapGetters生成计算属性，从state中读取数据(对象写法)
    // ...mapGetters({bigSum:'bigSum'}),
    // 3、借助mapGetters生成计算属性，从state中读取数据(数组写法)
    ...mapGetters(['bigSum']),
},

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

methods:{
    // 1、手写计算属性发送值
    // JIA(){
    // 	// this.$store.dispatch('jia',this.n);
    // 	this.$store.commit('JIA',this.n);
    // },
    // JIAN(){
    // 	// this.$store.dispatch('jian',this.n);
    // 	this.$store.commit('JIAN',this.n);
    // },
    // 2、借助mapMutations生成对应的方法,方法中调用commit去联系mutations(对象写法)
    // ...mapMutations({JIA:'JIA',JIAN:'JIAN'}),
    // 3、借助mapMutations生成对应的方法,方法中调用commit去联系mutations(数组写法)
    ...mapMutations(['JIA','JIAN']),
}

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

methods:{
    // 1、手写计算属性发送值
    // jiaOdd(){
    // 	this.$store.dispatch('jiaOdd',this.n);
    // },
    // jiaWait(){
    // 	this.$store.dispatch('jiaWait',this.n);
    // },
    // 2、借助mapActions生成对应的方法,方法中调用commit去联系actions(对象写法)
    // ...mapActions({jiaOdd:'jiaOdd',jiaWait:'jiaWait'}),
    // 3、借助mapActions生成对应的方法,方法中调用commit去联系actions(数组写法)
    ...mapActions(['jiaOdd','jiaWait']),
}

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

6、模块化+命名空间

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

修改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'}),

24、路由

PS E:\VueProjects\Vue_study> npm install vue-router@3
npm WARN saveError ENOENT: no such file or directory, open 'E:\VueProjects\Vue_study\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'E:\VueProjects\Vue_study\package.json'
npm WARN [email protected] requires a peer of vue@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN Vue_study No description
npm WARN Vue_study No repository field.
npm WARN Vue_study No README data
npm WARN Vue_study No license field.

+ [email protected]
added 1 package from 1 contributor in 10.539s

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

1.基本使用

安装vue-router，命令：npm i vue-router@3
应用插件：Vue.use(VueRouter)

编写router配置项:

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

实现切换（active-class可配置高亮样式）
```
About
```
指定展示位置

2.几个注意点

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

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

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

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

跳转（要写完整路径）：
```
News
```

4.路由的query参数

传递参数
```
跳转
				

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

5.命名路由

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

如何使用

给路由命名：

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

简化跳转：
```
跳转


跳转


跳转
```

6.路由的params参数

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

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

传递参数
```
跳转
				

跳转
```
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
接收参数：
```
$route.params.id
$route.params.title
```

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

8.的replace属性

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

9.编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活

具体编码：

//$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.缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。
具体编码：
```
 
    
```

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

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

12.路由守卫

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

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
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(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 (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

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

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

25、服务端运行前端代码

test_server

1、项目打包生成dist文件
npm run build
2、初始化服务器
npm init
3、安装express
npm install express
4、新建并编写服务器主文件server.js
5、新建static文件夹存放静态资源
6、将打包生成的dist文件里的东西放入staitc文件夹里
7、运行node server

#解决路由history模式下的刷新页面404
1、npm官网:https://www.npmjs.com/
2、搜索connect-history-api-fallback中间件
https://www.npmjs.com/package/connect-history-api-fallback
3、下载connect-history-api-fallback
npm install --save connect-history-api-fallback

26、element-ui的基本使用

1、安装element-ui
npm install element-ui
2、编写main.js
```vue
import Vue from 'vue'
import App from './App.vue'

//引入element-ui组件库
import ElementUI from 'element-ui';
//引入element-ui全部样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
//使用element-ui
Vue.use(ElementUI);

new Vue({
	render:h=>h(App),
}).$mount('#app')
```

27、按需引入

1、安装babel-plugin-component
npm install babel-plugin-component -D
2、修改babel.config.js
```js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
		// ["es2015", { "modules": false }],
		["@babel/preset-env", { "modules": false }]
  ],
	plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
```
3、编写main.js
```vue
import Vue from 'vue'
import App from './App.vue'

//引入element-ui组件库
// import ElementUI from 'element-ui';
//引入element-ui全部样式
// import 'element-ui/lib/theme-chalk/index.css';

//按需引入element-ui组件
import { Button, Row, DatePicker } from 'element-ui';

Vue.config.productionTip = false
//使用element-ui
// Vue.use(ElementUI);
//按需引入使用element-ui
Vue.component('el-button', Button);
Vue.component('el-row', Row);
Vue.component('el-date-picker', DatePicker);


new Vue({
	render:h=>h(App),
}).$mount('#app')
```

src/App.vue

三、Vue3

一、Vue3简介

1.Vue3简介

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2.Vue3带来了什么

1.性能的提升

打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%

…

2.源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking

…

3.拥抱TypeScript

Vue3可以更好的支持TypeScript

4.新的特性

Composition API（组合API）
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- …
新的内置组件
- Fragment
- Teleport
- Suspense
其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为 v-on 的修饰符
- …

二、创建Vue3.0工程

1.使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue3_test
## 启动
cd vue3_test
npm run serve

2.使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

什么是vite？—— 新一代前端构建工具。
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
传统构建与 vite构建对比图

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

三、常用 Composition API

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1.拉开序幕的setup

理解：Vue3.0中一个新的配置项，值为一个函数。
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
注意点：
1. 尽量不要与Vue2.x配置混用
  - Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
  - 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
  - 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.ref函数

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：{{xxx}}
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

3.reactive函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive定义的响应式数据是“深层次的”。
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

4.Vue3.0中的响应式原理

vue2.x的响应式

实现原理：
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
```
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
```
存在问题：
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

实现原理:

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

MDN文档中描述的Proxy与Reflect：

Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
	// 拦截读取属性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'

5.reactive对比ref

从定义数据角度对比：
- ref用来定义：基本类型数据。
- reactive用来定义：对象（或数组）类型数据。
- 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比：
- ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
- reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
- reactive定义的数据：操作数据与读取数据：均不需要.value。

6.setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

7.计算属性与监视

1.computed函数

与Vue2.x中computed配置功能一致

写法

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

2.watch函数

与Vue2.x中watch配置功能一致

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.name,(newValue,oldValue)=>{
	console.log('person的name变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
	console.log('person的name或age变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

3.watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

8.生命周期

vue2.x的生命周期

vue3.0的生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
- beforeCreate===>setup()
- created=======>setup()
- beforeMount ===>onBeforeMount
- mounted=======>onMounted
- beforeUpdate===>onBeforeUpdate
- updated =======>onUpdated
- beforeUnmount ==>onBeforeUnmount
- unmounted =====>onUnmounted

9.自定义hook函数

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

10.toRef

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

四、其它 Composition API

1.shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
什么时候使用?
- 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2.readonly 与 shallowReadonly

readonly: 让一个响应式数据变为只读的（深只读）。
shallowReadonly：让一个响应式数据变为只读的（浅只读）。
应用场景: 不希望数据被修改时。

3.toRaw 与 markRaw

toRaw：
- 作用：将一个由reactive生成的响应式对象转为普通对象。
- 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
markRaw：
- 作用：标记一个对象，使其永远不会再成为响应式对象。
- 应用场景:
  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4.customRef

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

实现防抖效果：

5.provide 与 inject

作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

具体写法：

祖组件中：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

后代组件中：

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

6.响应式数据的判断

isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

五、Composition API 的优势

1.Options API 存在的问题（配置式API）

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

2.Composition API 的优势（组合式API）

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

六、新的组件

1.Fragment

在Vue2中: 组件必须有一个根标签==
==
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

2.Teleport

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
```
	
		
			我是一个弹窗
			
		
	
```

3.Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default与 fallback

七、其他

1.全局API的转移

Vue 2.x 有许多全局 API 和配置。

例如：注册全局组件、注册全局指令等。

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: ''
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

Vue3.0中对这些API做出了调整：

将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（`Vue`）	3.x 实例 API (`app`)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

2.其他改变

data选项应始终被声明为一个函数。

过度类名的更改：

Vue2.x写法

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3.x写法

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes
移除v-on.native修饰符
- 父组件中绑定事件
- 子组件中声明自定义事件
移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

四、小技巧

一、强制刷新页面

1.强制刷新页面
按住shift+刷新

Vue教程

一、Vue

一、Vue简介

一、Vue是什么？

二、谁开发的？

三、Vue的特点

四、搭建开发环境

五、名词解析

1、回调函数

二、Vue入门

一、初识Vue

Hello,{{name}}

二、Vue模版语法

插值语法

Hello,{{name}}

指令语法

三、数据绑定

四、el与data的两种写法

Hello,{{name}}

五、MVVM模型

六、数据代理

1、Object.defineProperty

2、数据代理的定义

3、Vue中的数据代理

学校名称:{{name}}

学校地址:{{address}}

七、事件处理

1、事件的基本使用

ComeOn{{name}}

2、事件的修饰符

ComeOn {{name}}

3、键盘事件

ComeOn {{name}}

八、计算属性

1、计算属性_插值语法实现

ComeOn {{name}}

2、计算属性_methods实现

ComeOn {{name}}

3、计算属性_计算属性实现

ComeOn {{name}}

4、计算属性_简单实现

ComeOn {{name}}

九、监控属性

1、监视属性_天气案例

ComeOn {{name}},{{x}}

今天天气很{{isHot ? '炎热' : '凉爽'}}

今天天气很{{info}}

2、监视属性_天气实现

ComeOn {{name}}

今天天气很{{info}}

3、监视属性_深度监视

ComeOn {{name}}

今天天气很{{info}}

a的值是:{{numbers.a}}

b的值是:{{numbers.b}}

4、监视属性_简写

ComeOn {{name}}

今天天气很{{info}}

5、监视属性_姓名案例

ComeOn {{name}}

十、绑定样式

ComeOn {{name}}

十一、条件渲染

ComeOn {{name}}

Wellcome to {{school}}

Wellcome to {{school}}

Wellcome to {{school}}

Wellcome to {{school}}

当前n值为：{{n}}

hello

Jin

广州

十二、列表渲染

1、基本列表

ComeOn {{name}}

人员列表（遍历数组）

人员列表（遍历数组）

汽车信息（遍历对象）

测试遍历字符串

测试遍历指定次数