♥️♥️♥️ 李哈哈要奋发啦～冲冲冲！！！相信只要坚持学习会有所回报的！♥️♥️♥️

跟着尚硅谷张天禹老师的视屏教程系统性地过了一遍vue2的知识点，受益匪浅，对平时做项目的技术点有了更深的认识！特做下笔记，方便日后回顾复习。

基础

MVVM模型&数据代理

1. 什么是MVVM模型

1. M：模型(Model)：data中的数据
2. V：视图(View)：模板代码
3. VM：视图模型(ViewModel)：Vue实例

2. Object.defineproperty方法

小需求：person有个属性age且属性值是通过读取number值得来的。 如果person对象内直接定义属性age:number,运行时可以拿到值为18，当将number值改为19时，再次获取仍为18。可以使用defineproperty方法里面的get函数实现，再联合set函数实现两者的关联。

let number = 18;
let person = {
    name: '张三',
    sex: '男',
    //age: number
};
//console.log(person.age); //18
//number = 19;
//console.log(person.age); //18

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

number = 20;
console.log(person.age); // 20 调用getter
person.age = 30;
console.log(number); //30 调用setter

Object.defineproperty方法定义的属性默认是不可枚举的，也就是用for...in...等方法遍历不出来。且默认不可更改及删除。如果想更改将默认的属性值设置为true。

3. 数据代理

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

实现一个最简单的数据代理:对象obj内有个属性 x,想让另一个对象obj2可以进行对 x 的操作。

let obj = { x:100 };
let obj2 = { y:200 };
Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    }
    set(value){
        obj.x = value;
    }
})

Vue中的数据代理 总结：

1. Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2. Vue中数据代理的好处：更加方便的操作data中的数据
3. 基本原理：

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

生命周期

1. 定义

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

2. 流程图

事件处理

1. 事件的基本使用

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

<button @click= "tapBtn($event,1)"></button>

 tapBtn(e,type){
     console.log(e,type); //可以拿到事件对象和传递过来的参数1
 }

2. 事件修饰符

1. prevent： 阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素时才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

修饰符可以连续写，如showInfo.stop.prevent()。下面演示不常用的修饰符

html代码：

 <!-- 阻止事件捕获 -->
 <div class="box1" @click.capture="showMes(1)">box1
    <div class="box2" @click="showMes(2)">box2</div>
 </div> 
 <!-- self修饰符:只有当事件作用在box3本身，才调用tapBox3函数，也可阻止事件冒泡 -->
 <div class="box3" @click.self = "tapBox3">
    <button @click= "tapMe">点击我</button>
 </div>
 <!-- passive修饰符运用：滚动事件 -->
 <ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

css代码：

.list{
    width: 500px;
    height: 300px;
    overflow: auto;
    background-color: peru;
}
//滚动条样式
.list::-webkit-scrollbar-track {
    background-color: green;
}
.list::-webkit-scrollbar {
    width: 20px;
}
.list::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 50%;
}
li{
    width: 100%;
    height: 200px;
}

js代码：

//点击box2
showMes(val){
    console.log(val); // 1 2  不添加capture修饰符输出：2 1
},
//wheel:当滚动鼠标的滚轮之后，首先触发了滚动事件，然后执行回调执行demo函数，执行完毕再执行默认行为把页面滚动条往下走。
//视觉上有点卡顿，必须得执行完for循环滚动条才下移。这时可以使用passive修饰符。
demo(){
    for(let i = 0;i<10000;i++){
         console.log("#");
    }
}

注意：

• 事件处理是先捕获(由外往内)，再冒泡(由内往外)。默认情况事件冒泡才是处理事件的。添加capture修饰符后，box1的事件在捕获就处理了。

• 滚动事件有两种，一类滚动条滚动(scoll)，一类滚动轮滚动(wheel)。小区别：滚动到底部，wheel仍然会触发函数，scroll不会。

3. 键盘事件

Vue中常用的按键别名(9个)：

• 回车 => enter
• 删除 => delete (捕获“”删除和“退格”键)
• 退出 => esc
• 空格 => space
• 换行 => tab（特殊，必须配合keydown使用）
• 上 => up
• 下 => down
• 左 => left
• 右 => right

Vue未提供别名的按键(如key值为CapsLock)，可以使用按键原始的key值去绑定，但注意要转为kebab-case (短横线小写命名)；

系统修饰键（用法特殊）：ctrl、alt、shift、meta

• 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。如果要求指定其他键，可连续写（如@keyup.ctrl.y）
• 配合keydown使用：正常触发事件。（另：@keyup.tap不会执行绑定的函数，因为tap本身有别的功能，不用等tap键抬起，它就已经切走了）

也可以使用keyCode去指定具体的按键（不推荐，有些浏览器不支持了）

Vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名。（不推荐）

<!--html-->
<!--按下回车键时执行函数tapkey-->
<input type="text" placeholder="按下回车提示输入" @keyup.enter="tapKey">
<!--<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="tapKey">-->

<!-- ctrl+y 后执行函数 -->
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="tapKey">

tapKey(e){
  console.log(e.key,e.keyCode); //按键的名称和键码
}

计算属性和监听器

1. 计算属性computed

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？

• 初次读取时会执行一次。
• 当依赖的数据发生改变时会被再次调用。

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

• 计算属性最终会出现在vm上，直接读取使用即可。
• 如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生。

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

// 注：vm只是为了测试用
const vm = new Vue({
    el: '#root',
    data: {
        firstName: '',
        lastName: '',
        
        //下面介绍watch使用的属性
        isHot: true,
        number: {
            a: 1,
            b: 2
        },
    },
    computed:{
        //完整写法
        /*fullName:{
            //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
            //get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时。
            get(){
                console.log('get被调用了');
                return this.firstName + '-' + this.lastName
            },
            //set什么时候调用？当fullNzme被改变时
            set(value){
                console.log(value);
                const arr = value.split('-');
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        },*/
        //简写：当计算属性只读不改，可简写成下面形式
        fullName(){
            console.log('get被调用了');
            return this.firstName + '-' + this.lastName
        }
    },
    //👇看下面介绍
    watch:{}
})

2. 监视属性watch

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作。
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：

• new Vue时传入watch配置
• 通过vue实例vm.$watch监视

深度监视

1. Vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测对象内部值改变（多层）。

备注

1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

watch:{
    //监视多级结构中所有属性的变化
    number:{
        deep: true,
        handler(){
            console.log("number改变了")
        }
    },
    //正常写法
    /*isHot:{
        immediate: true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldvalue)
        }
    }*/
    //简写：当只需要响应者handler的时候
    isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldvalue)
    }
}

//====监视另一种写法=====
vm.$watch('isHot',{
    //immediate: true, 
    handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldvalue)
    }
})
//简写
vm.$watch('isHot',function(newValue,oldvalue){
   console.log('isHot被修改了',newValue,oldvalue)
})

computer和watch之间的区别：

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2. 所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

样式绑定

1. class绑定

以下nomal、arguigu1、arguigu2、arguigu2为样式类。

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">样式展示</div>
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">样式展示</div>
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定要不要用 -->
<div class="basic" :class="classObj">样式展示</div>
<!-- 同上 <div class="basic" :class="{arguigu1:showA,arguigu2:showB}">样式展示</div> -->

 data: {
    mood: 'normal',
    classArr:['arguigu1','arguigu2','arguigu3'],
    classObj: {
        arguigu1: false,
        arguigu2: false
    },
    showA: true,
    showB: false
},

2. style绑定

<!-- 字符串写法 -->
<div class="basic" :style="{fontSize: fsize+'px'}">样式展示</div>
<!-- 对象写法（常用） -->
<div class="basic" :style="styleObj">样式展示</div>
<!-- 数组写法 （很少用）-->
<div class="basic" :style="[styleObj, styleObj2]">样式展示</div>

data:{
    fsize: 40,
    styleObj:{
        fontSize: '40px',
        color: 'red'
    },
    styleObj2:{
        background: "#f00"
    }
},

条件渲染

v-if vs v-show

v-if适用于切换频率较低的场景，v-show适用于切换频率较高的场景。使用v-if时，元素可能无法获取到，而使用v-show时元素一定可以获取到。来自官网解析👇：

列表渲染

1. v-for指令

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

<!--遍历指定次数：1 2 3 4 5-->
<div v-for="num in 5">{{num}}</div>

2.key的用法和原理

使用index作为key,有可能出错，特别是一旦有输入类型的节点。

使用id作为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更新 ==> 界面有问题。

（3）如果没有写key，Vue会将遍历的索引值index默认作为key。

4. 开发中如何选择key?

(1) 最好使用每条数据的唯一标志作为可以，比如id、手机号、身份证号、学号等唯一值。

（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key时没有问题的。

3. 列表过滤

需求：后台返回列表，输入框搜索关键字(词)，筛选出存在的列表。

使用watch和computed两种方法过滤，明显这里用计算属性效果更好。

...
data: {
    keyWord: '',
    sortType: 0, //下面排序用：0原顺序， 1降序，2升序
    persons:[
        {id:1,name:'王二',age:25},
        {id:2,name:'张三',age:19},
        {id:3,name:'李四',age:23}
    ],
    // filPerson: [] //使用watch监视过滤时得写
},
computed:{
    filPerson(){
        return this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord)!== -1
        })
    }
},
// watch:{
//     keyWord:{
//         immediate: true, //初始化调用，未搜索filPerson有值为全数组值
//         handler(newV){
//             this.filPerson = this.persons.filter((p)=>{
//                 return p.name.indexOf(newV)!== -1
//             })
//         }
//     }
// },
...

4.列表排序

就上述需求后，再添加一小需求，将搜索后的列表按年龄进行排序操作。

...
 computed:{
    filPerson(){
        const arr =  this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord)!== -1
        });
        //判断一下是否需要排序
        if(this.sortType){
            arr.sort((p1, p2)=>{
                return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
        }
        return arr
    }
},
...

Vue检测数据的原理

1.原理

1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？

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

（1）对象中后追加的属性，Vue默认不做响应式处理；

（2）如需给后添加的属性做响应式，请使用如下API：

• Vue.set(taeget, prpoertyName/index, value) 或
• vm.$set(target, propertyName/index, value)

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

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

（1）调用原生对应的方法对数组进行更新。

（2）重新解析模版，进而更新页面。

4. 在Vue修改数组中的某个元素一定要用如下方法（官网参考）：

• 使用这些(改变原数组)API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()；
• 使用 Vue.set() 或 vm.$set()。

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

2.数据劫持

行为描述：如果有人修改了data里面的数据，就马上被其setter劫持到了。劫持之后修改数据，然后解析模版。数据劫持和数据代理都离不开Object.defineProperty()。

收集表单数据

1. v-model的使用

官网文档：表单输入绑定

• 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

• 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

• 若：<input type="checkout"/>

1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）；
2. 配置input的value属性：

（1）v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）；

（2）v-model的初始值是数组，那么收集的就是value组成的数组。

备注：v-model的三个修饰符：

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字(使用type="number"获取的为数字的字符串类型)
• trim：输入首尾空格过滤

<form @submit.prevent="postData">
    <div class="f-item">
        <!--for和输入框id对应，点击文字输入框就会聚集-->
        <label for="demo">账号：</label>
        <input type="text" id="demo">
    </div>
    <div class="f-item">
         <!--for和输入框id对应，点击文字输入框就会聚集-->
         年龄：<input type="text" v-model.number="userInfo.age">
    </div>
    <div class="f-item">
        <!--name值相同，说明为一组只能选择一个-->
        性别：
        男<input type="radio" name="sex" value="1" v-model.number="userInfo.sex">
        女<input type="radio" name="sex" value="2" v-model.number="userInfo.sex">
   </div>
    <button>提交</button>
</form>

内置指令

我们学过的指令：

• v-bind: 单向绑定解析表达式，可简写为:xxx
• v-model: 双向数据绑定
• v-for: 遍历数组、对象、字符串
• v-on: 绑定事件监听，可简写为@
• v-if: 条件渲染（动态控制节点是否存在）
• v-else-if: 条件渲染（动态控制节点是否存在）
• v-else: 条件渲染（动态控制节点是否存在）
• v-show: 条件渲染（动态控制节点是否展示）

v-text 指令：

1. 作用：向其所在的节点中渲染文本内容。
2. 与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。

v-html指令：

1. 作用：向指定节点中渲染包含html结构的内容。
2. 与插值语法的区别：

• v-html会替换掉节点中所有的内容，{{xx}}则不会。
• v-html可以识别html结构。

3. 严重注意：v-html有安全性问题！！！！

• 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
• 一定是在可信的内容上使用v-html,永不要用在用户提交的内容上！

v-cloak指令（没有值）：

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

[v-cloak]{
    display: none;
}

<h2 v-cloak>{{name}}</h2>

v-once指令：

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

v-pre指令：

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

可复用性 & 组合

过滤器

官网文档

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

语法：

1. 注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{});
2. 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名";

备注：

1. 过滤器也可以接收额外参数、多个过滤器也可以串联；
2. 并没有改变原本的数据，是产生新的对应的数据。

自定义指令

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

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

一、定义语法：

（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命名。

<div v-text="n"></div>
<div>变大10倍：<span v-big="n"></span></div>
<button @click="n++">放大</button>
<input type="text" v-fbind:value="val">

// //定义全局指令
// Vue.directive('fbind',{
//     bind(element,binding){
//         element.value = binding.value;
//     },
//     inserted(element,binding){
//         element.focus();
//     },
//     update(element,binding){
//         element.value = binding.value;
//     }
// })
const vm = new Vue({
    el: '#root',
    data: {
        n: 1,
        val: "",
    },
    //定义局部指令
    directives:{
        //big函数何时会被调用？1.指令与元素成功绑定时（一上来）；2.指令所在的模板被重新解析时
        //由上可知：使用函数简写方式只包含了bind和update,没有写inserted.
        big(element,binding){
            console.log("big",this); //此处的this是window
            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;
            }
        }
    }
})

深入了解组件

• 为什么：一个界面的功能很复杂；
• 作用：复用编码，简化项目编码，提高运行效率。

1. 组件的定义

实现应用中局部功能代码和资源的集合。（官网：组件的基础） Vue中使用组件的三大步骤：

1. 定义组件(创建组件)

2. 注册组件

3. 使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：

• el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
• data必须写成函数，为什么？---避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

• 局部组册：靠new Vue的时候传入components选项
• 全局注册：靠Vue.component('组件名',组件)

2. 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。

<div id="root">
    <school></school>
</div>

//=====非单文件讲解======
//定义School组件
const School = Vue.extend({ //Vue.extend可省略不写，Vue会自动加上
    name: 'School',
    template:`
      <div>
        <h2>学校：{{name}}</h2>
        <h2>地址：北京</h2>
      </div>
    `,
    data(){
        return {
            name:'尚硅谷'
        }
    }
})
new Vue({
    el:'#root',
    components:{
        School
    }
})

3. 内置关系

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

4. 组件的自定义事件(子传父通信)

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：

（1）第一种方式，在父组件中：<Demo @getSname="getStudentName"/> 或 <Demo v-on:getSname="getStudentName"/>；

（2）第二种方式，在父组件中：<Demo ref="student">；

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

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

<!-- ========父组件 html ========== -->
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@或v-on) -->
<Student @getSname = "getStudentName"/>
<!-- <Student @getSname.once = "getStudentName"/> -->

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法，使用ref) -->
<!-- <Student ref="student"/> -->

//======= 父组件 js =========
...
components: {
    School,
    Student
},
methods: {
    getStudentName(name,...params){
      console.log('App收到学生名：',name);
    }
},
mounted() {
    //this.$refs.student.$on('getSname',this.getStudentName); //第二种写法：绑定自定义事件
    // this.$refs.student.$once('getSname',this.getStudentName); //绑定自定义事件（一次性）
}
 ...

//=====子组件 Student.vue=====
data:...
methods:{
    sendStudentName(){
      this.$emit('getSname',this.name);
    },
    unbind(){
      this.$off('getSname'); //解绑一个自定义事件
      //this.$off(['getSname','demo']); //解绑多个自定义事件
      //this.$off(); //解绑所有自定义事件
    },
    death(){
      this.$destroy();//销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全部都不奏效。
    }
}
...

5. 插槽(父传子通信)

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

（1）默认插槽：

//父组件中：
    <Category>
        <div>html结构1</div>
    </Category>
//子组件中：
    <template>
        <div>
            <!-- 定义插槽 -->
            <slot>插槽默认内容...</slot>
        </div>
    </template>

（2）具名插槽：

//父组件中：
    <Category>
        <template slot= "center">
            <div>html结构1</div>
        </template>
        <template v-slot= "footer">
            <div>html结构2</div>
        </template>
    </Category>
//子组件中：
    <template>
        <div>
            <!-- 定义插槽 -->
            <slot name="center">插槽默认内容...</slot>
            <slot name="footer">插槽默认内容...</slot>
        </div>
    </template>

（3）作用域插槽：

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

//父组件中：
    <Category>
        <template scope="scopeData">
             <!-- 生成的是ul列表 -->
             <ul>
                 <li v-for="g in scopeData.games" :key="g">{{g}}</li>
             </ul>
        </template>
    </Category>
    <Category>
        <!-- slot-scope为新API的写法/支持解构赋值 -->
        <template slot-scope="{games}">
             <!-- 生成的是h4标题 -->
             <h4 v-for="g in games" :key="g">{{g}}</h4>
        </template>
    </Category>
    
//子组件Category中：(数据在子组件中)
    <template>
        <div>
            <slot :games="games"></slot>
        </div>
    </template>

使用Vue脚手架

1. render函数

//=======main.js入口函数========
import Vue from 'vue' // 实际导入vue.runtime.esm.js，所以创建实例要配合render函数使用。
import App from './App.vue'

Vue.config.productionTip = false

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

//创建实例对象---vm
new Vue({
  render: h => h(App),
}).$mount('#app')

2. ref属性

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

3. 配置项props

功能：让组件接收外部传过来的数据。

（1）传递数据：<Demo name="xxx"/>

（2）接收数据：

//第一种方式（只接收）：
props:['name']
// 第二种方式（限制类型）：
props:{
    name: Number
}
//第三种方式（限制类型、限制必要性、指定默认值）：
props:{
    name: {
        type: String,
        required: true //必要的
        default: '哈哈' //默认值
    }
}

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

4. mixin(混入)

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

（1）第一步定义混合，例如：

//===== mixin.js =====
export const hunhe = {
    methods:{
        showName(){
            alert(this.name);
        }
    },
    mounted(){ //原则二：生命钩子里的数据与组件内部代码会合并，其他以组件内为组
        console.log('你好啊！')
    }
}

export const hunhe2 = {
    data(){
        return {
            x: 200, //原则一：混合和组件两个中谁有取谁，都有以组件内部为主
            y: 100
        }
    }
}

（2）第二步使用混入，例如：

• 全局混入：Vue.mixin(xxx)

//=====main.js引入======
import {hunhe, hunhe2} from '../mixin';
Vue.mixin(hunhe);
Vue.mixin(hunhe2);

• 局部混入：mixins:['xxx']

//=======组件内引用========
import {hunhe, hunhe2} from '../mixin';
export default {
    props: ...
    data: ...
    mixins:[hunhe,hunhe2]
}

5. 插件

功能：用于增强Vue

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

定义插件：

对象.install = function(Vue, options){
    // 1.添加全局过滤器
    Vue.filter(...)
    
    // 2.添加全局指令
    Vue.directive(...)
    
    // 3.配置全局混入（合）
    Vue.mixin(...)
    
    // 4.添加实例方法
    Vue.prototype.$myMethod = function(){...}
    Vue.prototype.$myProperty = xxxx
}

//例如 plugins.js
export detault{
    install(){}
}

使用插件：引入文件到main.js后，调用Vue.use()语句。

6. 全局事件总线(通信)

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 安装全局事件总线：

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

3. 使用事件总线：

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

methods(){
    demo(data){......}
}
mounted(){
    this.$bus.$on('xxxx',this.demo);
}

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

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

7. 消息订阅与发布(通信)

原生js无法轻松实现订阅与发布，借助第三方库，推荐

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 使用步骤：

（1）安装pubsub：npm i pubsub-js;

（2）引入import pubsub from 'pubsub-js';

（3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

mounted(){
    //接收的第一个参数msgName为xxx,如果回调函数抽出来写的话，可以用下划线_占位。Demo(_,data){}
    this.pid = pubsub.subcribe('xxx',(msgName,data)={ 
        //对接收来的data数据进行处理
    })
}

4. 提供数据：pubsub.publish('xxx',数据)；
5. 最好在beforDestroy钩子中，用Pubsub.unsubscribe(pid)去取消订阅。

8. nextTick

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

handleEdit(todo){
    if(todo.hasOwnProperty('isEdit')){
        todo.isEdit = true;
    }else{
        this.$set(todo,'isEdit',true)
    }
    this.$nextTick(function(){
        this.$refs.inputTitle.focus(); //自动聚焦
    })
}

9. 过渡 & 动画

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。（官网很详细）
2. 图示：

3. 写法：

（1）准备好样式：

• 元素进入的样式：v-enter(进入的起点)、 v-enter-active(进入过程中)、v-enter-to(进入的终点)；
• 元素离开的样式：v-leave(离开的起点)、 v-leave-active(离开过程中)、v-leave-to(离开的终点)；

（2）使用<transition>包裹要过渡的元素，并配置name属性：

  <transition name="hello">
      <h1 v-show="isShow">你好呀！</h1>
  </transition>

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

10. 解决开发环境Ajax跨域问题

1. 同源策略

定义：同源策略（Same origin policy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响，很容易收到 XSS、CSFR等攻击。

同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

2.跨域问题

同源策略带来的跨域问题,如何解决？可参考作者浪里行舟的文章九种跨域方式实现原理（完整版）。

其中开发环境的解决方案：配置代理服务器：

方法一

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

devServer:{
    proxy: "http://localhost:5000" //服务器实际域名
}

说明：

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

方法二

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

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

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

拓展

• 数据在哪里，操作数据的方法就在哪里。
• nanoid用于生成唯一id,import {nanoid} from 'nanoid',直接调用nanoid()生成。
• 使用v-model时切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
• props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

浏览器

1. cookie

cookie是客户端与服务端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件，但只能储存4kb的数据；目的是用于辨别用户身份，记录跟踪购物车的商品信息（如数量）、记录用户访问次数等。

cookie的内容主要包括：名字name，值value，过期时间expires，路径path和域domain。路径和域一起构成cookie的作用范围。
一般cookie储存在内存里，若设置了过期时间则储存在硬盘里，浏览器页面关闭也不会失效，直到设置的过期时间后才失效。
若不设置cookie的过期时间，则有效期为浏览器窗口的会话期间，关闭浏览器窗口就失效。

原理：

客户端请求服务器时，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。而客户端浏览器会把Cookie保存起来。当浏览器再请求服务器时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态。

//设置cookie: document.cookie = "key=value;";
setCookie(name,value,expiredays){//设置时间为天为过期单位
      var exdate=new Date();
      exdate.setDate(exdate.getDate()+expiredays);
      document.cookie=name + '=' + escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    },
    
//获取cookie
getCookie(name){
  var start = document.cookie.indexOf(name+'=')
  var end = document.cookie.indexOf(';',start)
  if(end=-1){
    end = document.cookie.length
  }
  return unescape(document.cookie.substring(start,end))
}

2. webstorage

web Storeage的概念和cookie很相似，
区别在于web Storage更够储存各多的数据，cookie的大小是受限的，
并且每次请求一个新的页面的时候都会被发送过去，无形中浪费了带宽，
另外cookie还需要指定作用域，不可跨越调用。

HTML5增加了两个储存方式：localStorage和sessionStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过Window.sessionStorage 和 Window.localStorage属性来实现本地存储机制。
3. 相关API：

• xxxxxStorange.setItem('key','value'):该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
• xxxxxStorange.getItem('key'):该方法接受一个键名作为参数，返回键名对应的值。
• xxxxxStorange.romoveItem('key'):该方法接受一个键名作为参数，并把该键名对应的键值对从存储中删除。
• xxxxxStorange.clear(): 该方法会清空存储中的所有数据。

4. 备注：

• SessionStorage存储的内容会随着浏览器窗口关闭而消失。
• LocalStorage存储的内容，需要手动清除才会消失。
• xxxxxStorange.getItem('key')如果key对应的value获取不到，那么getItem的返回值是null。
• 存进去的value值都会转成字符串，所以如果存储的value值是对象的话，用JSON.stringfy(value)转成对象字符串,取的时候用JSON.parse(value)函数解析一下。
• JSON.parse(null)的结果依然是null。

vuex（通信）

1. 使用

1. 概念：专门在Vue中实现集中式状态（数据）管理的Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且使用于任意组件间通信。
2. 应用场景：

（1）多个组件依赖于同一状态

（2）来自不同组件的行为需要变更同一状态

3. 搭建vuex环境

（1）创建文件： src/store/index.js

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

//准备state对象--保存具体数据的数值
const state = {
    sum: 0
}
//准备action对象--响应组件中用户的动作
const actions = {
    //响应组件中加的动作
    addVal(context,value){
        context.commit('ADDVAL',value);
    }
}
//准备mutation对象--修改state中的数据
const mutations = {
    //执行加
    ADDVAl(state,value){
        state.sum += value;
    }
}

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

（2）在main.js中创建vm时传如store配置项

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

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

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

（4）组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)。 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch,直接编写commit。

2. getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
2. 在store.js中追加getters配置。

......
const state = {},
const actions = {},
const mutations = {},
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}
//创建并暴露store
export default new Vuex.Store({
    ......
    getters
})

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

3. 四个map方法的使用

组件中使用：

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

computed:{
    /*sum(){
        return this.$store.state.sum
    },
    school(){
        return this.$store.state.school
    },
    subject(){
        return this.$store.state.subject
    }*/
    //上下等价


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

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

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

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

<div>
    <!-- 使用mapActions时，**参数**必须从这传才行 -->
    <button @click="incrementOdd(n)"></button>
    <button @click="incrementWait(n)"></button>
</div>

data:{
    n: 1
},
methods:{
    //程序员亲自写方法
    /*increment(){
        this.$store.dispatch('jiaOdd',this.n); //自己写方法，从这传**参数**
    },
    decrement(){
        this.$store.dispatch('jiaWait',this.n);
    },*/
    
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    
    //靠mapActions生成：jiaOdd、jiaWait（数组形式）(上面方法名必须改成与下面相同)
    ...mapActions(['jiaOdd','jiaWait']),
}

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

<div>
    <!-- 使用mapMutations时，参数必须从这传才行 -->
    <button @click="increment(n)"></button>
    <button @click="dncrement(n)"></button>
</div>

data:{
    n: 1
},
methods:{
    //程序员亲自写方法
    /*increment(){
        this.$store.commit('JIA',this.n); //自己写方法，从这传**参数**
    },
    decrement(){
        this.$store.commit('JIAN',this.n);
    },*/
    
    //靠mapMutations生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（数组形式）(上面方法名必须改成与下面相同)
    ...mapMutations(['JIA','JIAN']),
}

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

4. 模块化+命名空间

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

const countAbout = {
    namespaced: true, //开启命名空间
    state:{x:1},
    actions: {......},
    mutations: {......},
    getters: {......}
}
const personAbout = {
    namespaced: true, //开启命名空间
    state:{x:1},
    actions: {......},
    mutations: {......}
}
export default new Vuex.Store({
    modules: {
        countAbout,
        personAbout
    }
})

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

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

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

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

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

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

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

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

备注：也可抽出来另存为模块。

vue-router

1. 路由的理解

1. 什么是路由？

（1）一个路由就是一组映射关系（key - value）

（2）key为路径，value可能是 function 或 component。

2. 路由分类：

（1）后端路由：

• 理解：value 是 function，用于处理客户端提交的请求。
• 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

（2）前端路由：

• 理解：value是component，用于展示页面内容。
• 工作过程：当浏览器的路径改变时，对应的组件就会显示。

2. 基本运用

详见官网

3. 几个注意点

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

4.路由的query参数

（1）传递参数

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

（2）接收参数

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

5. 命名路由

作用：可以简化路由的跳转，详见官网

6. 路由的params参数

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

//=======src/router/index.js======
{
    path: '/home',
    component: Home,
    children: {
        name: 'xinxi'
        path: 'news/:id/:title', //使用占位符声明接收params参数
        component: News
    }
}

（2）传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/${m.id}/${m.title}`">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
    :to="{
        name: 'xinxi',
        params: {
            id: m.id,
            title: m.title
        }
    }"
 >跳转</router-link>

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

（3）接收参数：

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

7. 路由的props配置

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

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

8.<router-link>的replace属性

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

9. 编程式路由导航

1. 作用：不借助实现路由跳转，让路由跳转更加灵活。
2. 具体编码：

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

this.$router.replace({
    path:'/xiangqing',
    query:{
        id: xxx,
        title: xxx
    } 
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go(n) //可前进也可后退，n为前进后退的步数，后退为负

10. 缓存路由组件

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

2. 具体编码：

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

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

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   （1）activated路由组件被激活时触发。

   （2）deactivated路由组件失活时触发

12. 路由守卫

1. 作用：对路由进行权限设置。
2. 分类：全局守卫、独享守卫、组件内守卫。
3. 全局守卫：

//全局前置守卫：初始化执行、每次路由切换前执行。
router.beforeEach(to,from,next)=>{
   if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
     if(localStorage.getItem('school')==='atguigu'){ //权限控制的具体规则
        next() //放行
    }else {
        alert('暂无权限查看')
    }       
   }else{
        next() //放行
   }
}
    
//全局后置守卫：初始化执行、每次路由切换后执行。
router.afterEach(to,from)=>{
   if(to.meta.title){
      document.title = to.meta.title; //修改网页的title
   }else{
       document.title = 'vue_title';
   }
}
   

4. 独享守卫(只有beforeEnter)：

{
     name: ...,
     path: ...,
     component: ...,
     meta: {
        title: ...,
        isAuth: false
     },
    beforeEnter(to,from,next)=>{
       if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
         if(localStorage.getItem('school')==='atguigu'){ //权限控制的具体规则
            next() //放行
        }else {
            alert('暂无权限查看')
        }       
       }else{
            next() //放行
       }
    }
}    

13. 组件内路由守卫

export default {
    data(){},
    created(){},
    mounted(){},
    ....
    //进入守卫：通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next){
        ......
        next(); //放行
    },
    //离开守卫：通过路由规则，离开该组件时被调用
    beforeRouteLeave(to, from, next){
        ......
        next(); //放行
    }
}

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

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

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

3. hash模式：

   （1）地址中永远带着#号，不美观。

   （2）若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

   （3）兼容性较好。

4. history模式：

   （1）地址干净，美观。

   （2）兼容性和hash模式相比略差。

   （3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

Vue UI组件

1. 移动端常用UI组件库

   （1）Vant： gitee.com/vant-contri…

   （2）Cube UI：didi.github.io/cube-ui

   （3）Mint UI：mint-ui.github.io

2. PC端常用UI组件库

   （1）Element UI：element.eleme.cn

   （2）IView UI：www.iviewui.com