# idooy-vue-study

**Repository Path**: antirust/idooy-vue-study

## Basic Information

- **Project Name**: idooy-vue-study
- **Description**: vue2学习过程中的练习代码和笔记
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-17
- **Last Updated**: 2023-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2

## README

- [观看的视频教程资源（尚硅谷）](https://www.bilibili.com/video/BV1Zy4y1K7SH);无意间翻看了几集之后，如获至宝；有种相见恨晚的感觉，立即决定重新学习。

- 本人借此机会由衷的感谢尚硅谷提供的众多优秀教学视频；愿其越来越辉煌。

- 当前页所记录的知识点都来自于视频教程；[本次学习过程练习的代码地址](https://gitee.com/antirust/vue-study/tree/master/repeat-study)

# 散落的知识点
- 同时满足以下三个条件会出现跨域问题
  - 浏览器的安全策略，同源策略
  - 请求是XMLHttpRequest对象发出，即务必是xhr,比如Ajax请求
  - 请求发出的“源”和目标服务器不同源

- 两个重要原则
  - 被Vue所管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
  - 所有不被Vue所管理的函数（定时器的回调、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象
- VueComponent的实例对象，简称`vc`，即组件实例对象；`Vue.extend(options)`；
- 每次调用Vue.extend，返回的都是一个全新的VueComponent
- Vue的实例对象，简称`vm`：`new Vue(options)`
- this指向：

  - 组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
  - vm配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
- ref标签属性：

  - 被用来给元素或者子组件注册引用信息（id的代替者）
  - 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)
  - 使用方式：`<h1 ref='xxx'></h1>`或者`<组件名 ref='xxx'></组件名>`
  - 获取：`this.$refs.xxx`
- `<style scoped>`可以有效防止组件间的样式冲突，使样式只在各自的组件中生效，但是一般情况下`App`组件不会使用`scoped`
- web-storage

  - 存储内容大小一般支持5MB左右，（不同的浏览器是不一样的）
- 浏览器通过`Window.sessionStorage`和`Window.localStorage`属性来实现本地存储机制
  - SessionStorage的存储内容会随着浏览器标签页的关闭而消失
- LocalStorage的存储内容如何消失；调用API或者是手动操作浏览器进行清除
  - `xxxxStorage.getItem('key')`,如果对应的key不存在，返回的是null；`另外JSON.parse(null)的结果也是null`
- `xxxxStorage.clear()`:清除所有
  - `xxxxStorage.removeItem('key')`：根据key删除
- `xxxxStorage.getItem('key')`：获取对应key的值
  - `xxxxStorage.setItem('key','value')`：存储某个数据
- nanoid
  - `npm i nanoid`命令安装，用于生产类似于UUID的字符串
  - `import {nanoid} from 'nanoid'`
  - `nanoid()`生产随机的字符串



# Vue小案例

## TodoList

[todoList案例效果视频演示](https://gitee.com/antirust/vue-study/raw/master/repeat-study-video/todoList.wmv)；可以先看看效果；[案例的源代码](https://gitee.com/antirust/vue-study/tree/master/repeat-study/22_TodoList%E5%B0%8F%E6%A1%88%E4%BE%8B/02_src_%E7%BC%96%E8%BE%91+nextTick%E4%BC%98%E5%8C%96)

- 数据使用本地化`localStorage`进行存储
- 整个页面划分为四个组件（除App）；他们之间的关系如下：
  - 兄弟组件：兄弟间组件通信使用的是全局事件总线
  - 父子组件：父传子当然是`props`;子传父使用的是自定义事件
- 其中，为了解决数据渲染和模板解析之间的前后顺序问题，使用了Vue.nextTick（）

## GitHub用户信息搜索

借助GitHub提供的开发API获取用户信息，并进行展示，相对于TodoList案例比较简单

[该小案例的效果视频演示下载观看](https://gitee.com/antirust/vue-study/raw/master/repeat-study-video/GitHub%E7%94%A8%E6%88%B7%E6%90%9C%E7%B4%A2.wmv)

[源码地址](https://gitee.com/antirust/vue-study/tree/master/repeat-study/23_GitHub%E6%90%9C%E7%B4%A2%E6%A1%88%E4%BE%8B/github-search)

### 资源引入小技巧

![](./repeat-study-img/bootstrapcss.png)

上图的问题可以使用`link`解决

![](./repeat-study-img/indexhtmllinkbootstrap.png)



# 第一章：vue核心



**vue的安装方式**，因为是入门，所以就下载到本地使用script标签直接引入。下载了开发版本和生产版本

![](./repeat-study-img/vueInstall.png)

**引入成功**

![](./repeat-study-img/vueLoadin.png)

**消除第二个提醒**

![](./repeat-study-img/productionTipFalse.png)

设置`Vue`对象的全局配置属性,这个可以在vue官方网站的API中找到

```java
//阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip=false
```

![](./repeat-study-img/productionTip.png)

## vue初体验

![](./repeat-study-img/helloVue.png)

**总结**

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

![](./repeat-study-img/vuehelloWorld.png)



## devTools安装

[gitHub地址](https://github.com/vuejs/devtools)

![](./repeat-study-img/vuetoolsinstall.png)

## vue模板语法

Vue模板语法分为两大类：

- 插值语法；{{js表达式}}
  - 功能：用于模板中标签体中的内容
  - 写法：{{XXX}}，XXX是js表达式，且可以直接读取Vue对象data中所有属性，也可以是methods中的函数调用`{{demo()}}`,会把demo函数的返回值解析出来
- 指令语法：
  - 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件....）
  - 举例：`v-bind:href="XXX"` 或者简写成` :href="XXX",XXX`同样要写JS表达式，且可以直接读取Vue对象data中所有的属性值
  - 备注：Vue有很多的指令，且形式都是`v-????`此处只是拿`v-bind`举个例子

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue插值和指令语法</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好！{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="url">百度一下</a>
    </div>
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:"jack",
            url:"www.baidu.com"
        }
    })
</script>
</html>
```

## vue数据绑定

### v-bind

Vue有两种数据绑定的方式：

- 单向绑定(v-bind):数据只能从data流向页面

### v-model

- 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data
- 备注：
  - 双向绑定一般都应用在表单类元素上（如：input、select等）
  - `v-model:value` 可以简写成 `v-model`;因为v-model默认收集的就是value的值

**v-model的三个修饰符：**

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

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

​	trim:输入收尾空格过滤

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 双向数据绑定</title>
    <script src="../vue.js/vue.js"></script>
</head>
<body>
    <!-- 学习完MVVM模型以后回头看这里的单向数据绑定，就是Model中的数据流向模型即view视图 -->
    <div id="root">
        <h1>v-bind单向数据绑定</h1>
        单向数据绑定：<input v-bind:value="name"/>
        单向数据绑定简写：<input :value="name"/>
        <hr/>
        <!-- 双向数据绑定；model中的数据可以流向view，同时view视图影响model中的数据 -->
        <h1>v-model双向数据绑定</h1>
        双向数据绑定：<input v-model:value="name"/> 
        <!--v-model，只作用在表单元素（他们的共同特点就是都有value属性），默认是服务value属性；
            因此可以直接简写成v-model="name"  
        -->
        双向数据绑定简写：<input v-model="name"/>    
        

    </div>
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:"jack"
        }
    })
</script>
</html>
```



## el和data不同写法

>  **el的不同写法**
>
> ```html
> <script>
>     //阻止 vue 在启动时生成生产提示。
>     Vue.config.productionTip=false
> 
>     // el的第一种写法
>     const v = new Vue({
>         // el的第一种写法，也算是一种常规的写法吧 
>         // el:"#root"
>         data:{
>             name:"jack"
>         }
>     })
> 
>     console.log(v)
> 
>     // el第二种写法,使用Vue原型中的$mount
>     v.$mount("#root")
> 
> </script>
> ```
>
> 总结：
>
> - Vue构建时配置对象中的`el`属性
> - Vue构建成功以后，再通过`vm.$mount("#root")`进行指定`el`的值

扩展一个知识点，算是见识吧；如图所示；Vue对象的众多属性中，很多都是`$`开头，这些呢都是供我们程序员使用的，其他的供Vue底层使用

![](./repeat-study-img/VueAttr.png)

> **data的不同写法**
>
> ```javascript
> <script>
>     //阻止 vue 在启动时生成生产提示。
>     Vue.config.productionTip=false
>     const v = new Vue({
> 
>         el:"#root",
>         // data 的第一种写法：对象式
>         /**data:{
>             name:"jack"
>         }*/
> 
> 
>         // data 的第二种写法：函数式
>         /**data:function(){
> 
>             console.log("此处的this是Vue实例对象",this)
>             // 要求函数必须返回一个对象
>             return {
>                 name:"jack"
>             }
>         }*/
> 
>         // data 的第二种写法：箭头函数式；万万不可
>         /**data:()=>{
> 
>             console.log("此处的this就不再是Vue实例对象，而是Window对象",this)
>             // 要求函数必须返回一个对象
>             return {
>                 name:"jack"
>             }
>         }*/
>         // data的函数式写法，我们还可以简写成以下
>         data(){
>             return{
>                 name:"jack"
>             }
>         }
>     })
> 
> </script>
> ```
>
> ## data的两种写法
>
> - 对象式
> - 函数式
> - 如何选择：目前学习哪种写法都是可以的，等到了后面学习了组件，data必须使用函数式，否则报错
> - 一个重要的原则：由Vue管理的函数，一定不要使用箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是Window实例

## MVVM模型

![](./repeat-study-img/mvvm.png)

对应代码中是什么样子的呢？

```html
<body>




    <!-- ===============MVVM模型中的view，即模板============== -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>
    <!-- =================================================== -->


    

</body>

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




    // ********************MVVM模型中的ViewModel,即Vue对象***********************
    new Vue({
    // ******************************************************************* 
    
    

        el:"#root", 



        // @@@@@@@@@@@@@@@@@@@@@@@ MVVM模型中的Model @@@@@@@@@@@@@@@@@@@@@@@
        data:{
            name:'world'
        }
        //@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    })
</script>
```

## vue数据代理

### Object.defineProperty

`Object.defineProperty(参数1，参数2，参数3)`可以对已定义的对象进行属性添加。

- 参数1：要操作的对象
- 参数2：添加的属性名
- 参数3：配置项

![](./repeat-study-img/defineProperties.png)

**四个基本的属性配置项**

上图中`age`属性所默认展示的特点在配置项（参数3）都有对应的属性进行控制

```javascript
    // 定义一个对象
    let person = {
        name:"jack",
        address:"中国"
    }

    // 使用Object.defineProperty给person对象添加属性age
    Object.defineProperty(person,"age",{
        value:18,
        enumerable:true,// 控制属性是否可枚举；默认是false
        writable:true,  // 控制属性是否可被修改；默认是false
        configurable:true,// 控制属性是否可以被删除；默认是false
    })
```

**高级属性配置项**

![](./repeat-study-img/getterSetter.png)

### 何为数据代理

**通俗讲；就是可以通过一个对象去操作（读、写）另一个对象的属性**

![](./repeat-study-img/dataproxy.png)

![](./repeat-study-img/dataproxyoptions.png)

### vue中的数据代理

基于上面学习的数据代理，知道数据代理是发生在至少两个对象之间的。通过一个对象去操作另一个对象的过程；那么在vue中，这两个对象分别就是`vm`与`data`,`vm`数据代理了`data`对象

![](./repeat-study-img/vmdataproxy.png)

![](./repeat-study-img/proxyvue.png)

## 事件处理

### 基本使用

1、使用`v-on：xxx 或者 @XXX`绑定事件，其中XXX就是事件名

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

3、methods中配置的函数，不要使用箭头函数；否则this就不是vm了

4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象

5、@click=“demo” 和 @click=“demo($event)"效果是一样的。

### 事件函数传值

```html
<!-- 入参用一个参数接收的话，那么此时这个入参的值就是 event 对象 -->
<button v-on:click="show_info_1">点击展示提示信息(不传值)</button>
<!-- 此时形参是什么，入参就是什么，只是event对象不见了 -->
<button v-on:click="show_info_2('666')">点击展示提示信息(传值)</button>
<!-- 那么event事件对象该怎么传值呢，使用'$event'占个位，顺序任意 -->
<button v-on:click="show_info_3('666',$event)">点击展示传值又传event</button>
```

>```js
>    new Vue({
>        el:"#root", // el即element；通常使用css的标签选择器将vue和容器绑定起来
>        data:{ // vue中存储的数据，向Vue对象绑定的容器中提供数据；暂且使用对象进行存储。
>            name:'world'
>        },
>        methods:{
>            show_info_1(event){
>                console.log("函数调用‘show_info_1’不传参数进来，默认的参数就是event事件对象",event)
>                alert("你好呀！"+event)
>            },
>            // 此时 event 对象就不见了
>            show_info_2(arg){
>                console.log("函数调用‘show_info_2(值)’传参数进来，那么参数arg的值就是传进来的形参值",arg)
>                alert("你好呀！"+arg)
>            },
>            show_info_3(arg,event){
>                alert("你好呀！"+arg)
>                console.log("event对象接受到了！",event)
>            }
>        }
>
>    })
>```



### 键盘事件

**键盘常用的两个事件名称**

`keyup`:键盘按下去松手弹上来，此刻触发事件

`keydown`:键盘按键只要按下去就触发事件



1、Vue中常用的**按键别名**：

​		回车 => enter

​		删除 => delete (捕获“删除”和“退格”键)

​		退出 => esc

​		空格 => space

​		换行 => tab；(不适合用keyup,必须配合keydown使用)

​		上 => up

​		下 => down

​		左 => left

​		右 => right

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

> 键盘上任意的按键 = { 按键名（event.key），按键编码(enent.keyCode)}
>
> 短横线命名：切换大小写按键的key=CapsLock,要这样使用@keyup.caps-lock="函数"

3、系统修饰键（用法特殊）：**ctrl、alt、shift、meta(win键)、tab**

​	3.1、配合keyup使用；按下修饰键的同时，再按下其他任意字母键，随后释放字母键，事件才会触发

> 嘿；那需求非要`ctrl+y`组合键呢，**@keyup.ctrl.y="函数"**

​	3.2、配合keydown使用：正常触发事件

4、也可以使用keyCode去指定具体的按键（不推荐）

> vue中没有提供的别名按键；如果想自定义按键，建议使用原始的key值去绑定，因为keyCode对于不同的键盘可能不同

5、Vue.config.keyCodes.自定义别名 = 键码，可以去自定义按键别名；定制以后就可以这样使用 @keyup.自定义别名=“函数”

### 事件修饰符

Vue中事件修饰符

- prevent:阻止默认事件（常用）

  > a标签的点击不是默认跳转嘛，这个就是a标签的默认事件；

- stop：阻止事件冒泡（常用）

  >嵌套的两级标签，即父子标签，默认触发子标签的事件，父标签的事件也会被执行；冒泡的通俗理解

- once：事件只触发一次（常用）

- capture：使用事件的捕获模式

- self：只有event.target是当前操作元素才触发事件

- passive：事件的默认行为立即执行，无需等待事件回调执行完毕

```html
    <div id="root">
        <a href="https://www.baidu.com/" @click.prevent="show_info_1">默认点击跳转百度，prevent会阻止其跳转</a>
        <br/>

        <div style="background: red;width:200px;height:100px" @click="div_click">
            <!-- stop 阻止事件冒泡 -->
            <button @click.stop="show_info_button">点击展示提示信息</button>
        </div>
        
    </div>
```

**事件修饰符还可以连续调用**

```html
 <button @click.stop.prevent="show_info_button">点击展示提示信息</button>
```

## 计算属性

- 定义：计算属性严格意义上说它就不存在；要通过**已有属性**计算得来

- 原理：底层接祖了Object.defineProperty()提供的getter和setter;

- get函数什么时候执行：

  - 初次读取该计算属性会执行一次
  - 当依赖的数据发生改变时会被再次调用

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

- 备注：

  - 计算属性最终会出现在vm上，直接读取使用即可；

    > 意思就是；模板中如何获取属性值的意思。模板中直接使用计算属性名{{fullName}}
    >
    > ![](./repeat-study-img/fullName.png)

  - 如果计算属性要被修改，那必须写set函数去响应修改计算属性所依赖的属性值

```html
<body>
    <div id="root">
    
        姓：<input v-model="firstName"/><br/><br/>
        名：<input v-model="lastName"/><br/><br/>
        <!-- 使用计算属性 -->
        全名：<span>{{fullName}}</span>
    </div>
</body>

<script>
 const vm = new Vue({
        el:"#root", 
        data:{ 
            firstName:'张',
            lastName:"三"
        },
        computed:{
            fullName:{
                // get有什么作用？读取fullName时，get就会被调用，且返回值就作为fullName的值
                // 但是get并不是每读取一次就调用一次，1、初次读取fullName时，并会缓存；2、所依赖的数据发生改变时
                get(){
                    return this.firstName + '-' + this.lastName
                },
                // set什么时候被调用？当fullName被修改时
                set(value){
                    const arr = value.split("-")
                    this.firstName=arr[0]
                    this.lastName=arr[1]
                }
            }
        }
    })
</script>
```

## 计算属性-简写

**计算属性更多的时候是供模板去读取；很少去修改；如果我们的计算属性考虑之后，它只提供读取，不可修改的话，就可以使用简写的形式，一句话：计算属性只读不写就可以简写**

```js
const vm = new Vue({
        el:"#root", 
        data:{ 
            firstName:'张',
            lastName:"三"
        },
        computed:{
            fullName(){
                return this.firstName + '-' + this.lastName
            }
        }
    })
```



## 监视属性

### 基本用法

- 当被监视的属性发生变化时，回调函数`handler`自动调用，进行相关的操作
- 监视的属性必须存在才可以进行监视
- 监视的两种写法：
  - new Vue时在配置对象中传入`watch`配置
  - 通过`vm.$watch`监视

![](./repeat-study-img/watchmethod.png)

### watch的属性

- `deep`:多级结构的对象，是否要开启深度监视；默认是false；
- `immediate`：初始化时让handler调用一次
- `handler(newValue,oldValue)`：属性监听到改变后的回调函数，这个是必不可少的；



```js
        watch:{
            // 监听 isHot 属性,这里的 isHot 是data对象的一级属性
            isHot:{
                // 初始化时让handler调用一下
                immediate:true,
            	// 开启深度监听
                deep:true,
                // isHot属性值发生改变，就会调用该方法
                handler(newVal,oldVal){
                    console.log("isHot的新值："+newVal+";isHot的旧值："+oldVal)
                }
            }
        }
```

### watch的简写

**简写的前提**：如果不需要使用`deep和immediate`这两个属性，只关注回调函数`handler`就可以使用简写形式

```js
        watch:{
            // 若不在乎监听属性的 deep 和 immediate 属性，就可以简写成下面的样子
            // isHot:{
            //     // 页面加载时就调用一次handler方法
            //     immediate:true,
            //     handler(){
            //         console.log("isHot属性发生的改变，被监听到了")
            //     }
            // }
            isHot(newVal,oldVal){
                console.log("isHot属性发生的改变，被监听到了;新值："+newVal+"旧值："+oldVal)
            }
        }
```

### 深度监视

默认情况下，vue只能监视到data对象的一级属性值的改变，如果一级属性值是个复杂的对象，比如下面;一级属性test是个复杂的对象，如果test.a.b.c的值发生改变时，想被监听的话，就需要使用`deep:true`

> ```json
> 	data:{ 
>             isHot:true,
>             // 多级属性，监听测试对象
>             test:{
>                 a:1,
>                 b:{
>                     c:1
>                 }
>             }
>         }
> ```

开启深度监听

```js
   new Vue({
        el:"#root", 
        data:{ 
            isHot:true,
            // 多级属性，监听测试对象
            test:{
                a:1,
                b:{
                    c:1
                }
            }

        },
        computed:{
            weather(){
                return this.isHot?"炎热":"凉爽"
            }
        },
        methods:{
            exchange_weather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            // 监听 isHot 属性,这里的 isHot 是data对象的一级属性
            isHot:{
            
                // isHot属性值发生改变，就会调用该方法
                handler(newVal,oldVal){
                    console.log("isHot的新值："+newVal+";isHot的旧值："+oldVal)
                }
            },
            // 如果test对象中任意属性值发生了改变，都可以被监听到，该怎么办？
            test:{
                // 深度监听，如果监听的data属性是个多级的深层次结构的复杂对象，
                // 如果其中任意属性改变都想被监听到的话，就使用deep:true
                deep:true,
                handler(){
                    console.log("test对象中的任意属性发生了改变")
                }
            }
        }
    })
```

### 监听某个对象下指定的属性

```js
        watch:{
            // 但是我就只想监听test对象指定的a属性，其他不管，怎么办？
            'test.a':{
                handler(){
                    console.log("仅仅只监听test对象中a属性发生了改变")
                }
            }
        }
```

### computed和watch区别

计算属性和监听属性之间的区别

> computed能完成的功能，watch都可以完成，反之不行；例如：watch可以进行异步操作

例如`全名示例`中，如果想让`姓`改变一秒后，才修改全名，那么在computed中使用定时器是办不到，只能使用watch实现异步操作

```js
        watch:{
            // 第一个参数是新值，第二个参数是旧值
            firstName(val){
                setTimeout(()=>{
                    this.fullName = val + "-" + this.lastName
                },5000)
                
            },
            lastName(val){
                this.fullName = this.firstName +"-"+val
            }
        }
```

## 样式绑定

一、class样式绑定

- 写法；**:class="XXX"**;其中XXX可以是data中的普通属性名、对象属性名、数组属性名
  - 普通属性名适用于：类名不确定，要动态获取
  - 对象属性名适用于：要绑定多个样式，个数和class名都不确定
  - 数组属性名适用于：要绑定多个样式，个数是确定的，名字也是确定的，但是不确定用不用
- style样式
  - **:style="{fontSize:XXX}"**,其中XXX是动态值，即data中的属性值
  - **:style="[a，b]"**;其中a、b是样式对象



## 条件渲染

**v-show**

- v-show="布尔值、布尔变量、布尔表达式"
- 特点：不展示DOM元素，仅仅是因为使用了`display:none`样式进行了隐藏,
- 基于特点适用于切换频率较高的场景

**v-if**

- 写法：

  - v-if="布尔值、布尔变量、布尔表达式"

  - v-else-if="布尔值、布尔变量、布尔表达式"

  - v-else="布尔值、布尔变量、布尔表达式"

  - 需要注意的是v-if\v-else-if\v-else这三个要不间断的连续使用，不能被其他标签打断，不然如图所示

    >![](./repeat-study-img/v-if-else.png)
    >
    >正确的写法：
    >
    >```html
    ><!-- 可以直接是布尔值 -->
    >        <h1 v-if="false">hello-1,{{name}}</h1>
    >        <!-- 可以是一个表达式 -->
    >        <h1 v-else-if="1===1">hello-2,{{name}}</h1>
    >        <!-- 可以是vue中的变量 -->
    >        <h1 v-else>hello-3,{{name}}</h1><br/><br/>
    >```



- 特点：不展示的DOM被直接移除 了；所以不适用切换太频繁的场景

​        

## v-for循环

### 基本使用

v-for的基本使用，可以遍历数组、对象、字符串、甚至是指定的次数的遍历；

```js
    <div id="root">
        <h1>列表的基本使用，遍历</h1>
<!-- =========================================================== -->
        <h2>遍历数组</h2>
        <ul>
            <li v-for="person in persons" :key="person.id">
                {{person.name}}--{{person.age}}
            </li>
        </ul>
<!-- =========================================================== -->        
        <h2>遍历对象student:{ name:'小明', gender:'男', grade:'三年级' }</h2>
        <h3>属性名为key;属性值为value</h3>
        <ul>
            <li v-for="(value,key) in student" :key="key">
                {{key}}---{{value}}
            </li>
        </ul>
<!-- =========================================================== -->
        <h2>遍历字符串'hello'</h2>
        <h3>第一个参数为字符;第二个参数为字符索引</h3>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}---{{index}}
            </li>
        </ul>
<!-- =========================================================== -->
        <h2>遍历指定的数字[5];v-for="(num,index) in 5"</h2>
        <h3>第一个参数num从1开始递增;第二个参数从0开始递增</h3>
        <ul>
            <li v-for="(num,index) in 5" :key="index">
                {{num}}---{{index}}
            </li>
        </ul>
 <!-- =========================================================== -->       
    </div>
</body>

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

    // 构建一个vue实例对象，唯一参数就是配置对象
    new Vue({
        el:"#root", // el即element；通常使用css的标签选择器将vue和容器绑定起来
        data:{ // vue中存储的数据，向Vue对象绑定的容器中提供数据；暂且使用对象进行存储。
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ],
            student:{
                name:'小明',
                gender:'男',
                grade:'三年级'
            },
            str:'hello'
        }
    })
</script>
```

### key="index"可能引发的问题

​	下面仅仅只是把`key="index"`可能会引发的问题进行了阐述；为什么会出现这样的问题，会在之后的原理中描述；至于怎么避免出现的下述这样的问题；那只能说在下面描述的情况下不使用index就行



- 若对数据进行：逆序添加、逆序删除等破坏遍历顺序的操作；会使真实DOM产生不必要的更新，这种更新对页面效果没有影响；**但是效率低,问题不大**

  >
  >
  >```json
  >// 如果key="index"
  >persons:[
  >    {id:'001',name:'张三',age:18},// key = 0
  >    {id:'002',name:'李四',age:19},// key = 1
  >    {id:'003',name:'王五',age:20} // key = 2
  >]
  >```
  >
  >从数组`persons`头部添加数据`{id:'004',name:'赵四',age:21},`；那么原有的三条数据的key的顺序就会被打乱了
  >
  >```json
  >persons:[
  >    {id:'004',name:'赵四',age:21}, // key = 0
  >    {id:'001',name:'张三',age:18}, // key = 1            key = 0
  >    {id:'002',name:'李四',age:19}, // key = 2            key = 1
  >    {id:'003',name:'王五',age:20}  // key = 3            key = 2
  >]
  >```
  >
  >但是这种情况对遍历的标签中没有输入类的DOM在页面上是没有影响的，有影响的仅仅是效率；后面的key原理会说明
  >
  >![](./repeat-study-img/forkeyok.png)
  >
  >

- 如果遍历的标签节点中包含输入类的DOM；这个时候就会产生错误的DOM更新；**页面都会有明显的问题;影响较大**

  >
  >
  >基于上面，如果`li`标签中添加上`<input>`标签，那么问题就大了，如下图所示
  >
  >![](./repeat-study-img/keyindexerror.png)

### key的原理

key就是在遍历时vue中虚拟DOM中每条记录的唯一标识；下图根据上面出现的问题粗略的描述了一下key的原理

![](./repeat-study-img/errorinfo.png)

## 列表过滤

[列表过滤练习代码](https://gitee.com/antirust/vue-study/tree/master/repeat-study/12_%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93)

## Vue.set()

- Vue会监视data中所有层次的数据

- 如何检测对象中的数据？通过setter实现监视，且要在new Vue时就传入要检测的数据

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

- 如何检测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：

  - 调用原生对应的方法对数组进行更新
  - 重新解析模板，进而更新页面

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

  - Vue.set() 或者 vm.$set()

  - 使用这些API：

    - push（）
    - pop（）
    - pop（）
    - shift（）
    - unshift（）
    - splice（）
    - sort（）
    - reverse（）

    

  **特别注意：Vue.set() 和 vm.$set() 不能给`vm(new Vue({}))` 或 `vm(vm._data)`的根数据添加属性**

## 收集表单数据

- 若：`<input type="text"/>`则v-model收集的是value值，用户输入的就是value值
- 若：`<input type="radio"/>`,则v-model收集的是value值，且一定要给标签配置value属性才行
- 若：`<input type="checkbox"/>`,
  - 没配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - 配置input的value属性
    - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    - v-model的初始值是数组，那么收集的就是value组成的数组

**备注：不要忘记v-model还有三个好用的修饰符**

**v-model的三个修饰符：**

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

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

​	trim:输入收尾空格过滤

[对应的源代码](https://gitee.com/antirust/vue-study/blob/master/repeat-study/13_%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE/%E6%94%B6%E9%9B%86%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE.html)

## 过滤器

- 定义：对要显示的数据进行特定格式化后再展示（适用于一些简单逻辑处理的场景），其他复杂的逻辑处理，当然是要使用`methods和computed`

- 注册过滤器：

  - ```javascript
    // 全局
    
    Vue.filter('自定义过滤器名'，function(value,...){
        return 逻辑处理后的值
    })
    ```

    

  - ```javascript
    // 局部
    new Vue({
        filters:{
            '自定义过滤器函数名'(value,...){
                return 逻辑处理后的结果
            }
        }
    })
    ```

- 使用过滤器

  - 插值语法中 {{XXX | 过滤器名}}
  - 配合v-bind使用；v-bind:属性=“XXX | 过滤器名”

- 过滤器不仅可以接受默认的`value`值（第一个参数）；也可以接受其他额外参数

- 多个过滤器也可以串联起来使用

- 过滤器并没有改变原本的数据，是产生了一个新的数据

- **注意：过滤器不能配合`v-model`使用**

**代码示例：**

>使用示例
>
>```html
><body>
>    <div id="root">
>        <!-- 使用过滤器给name属性追加字符串 -->
>        <h1>{{hi | addWorld }}</h1>
>         <!-- 过滤器额外的传递参数 -->
>        <h1>{{hi | addWorldArg('world') }}</h1>
>         <!-- 多个过滤器串联使用 -->
>        <h1>{{hi | addWorldArg('world') | addName('tom') }}</h1>
>    </div>
></body>
>```
>
>注册示例
>
>```javascript
> new Vue({
>        el:"#root",
>        data:{ 
>            hi:'hello'
>        },
>        filters:{
>            addWorld(value){
>                return value + ' world'
>            },
>            addWorldArg(value,arg){
>                return value +' '+ arg
>            },
>            addName(value,name){
>                return value + ' ' +name
>            }
>        }
>        
>    })
>```





## vue的内置指令

之前已经接触和学习了一部分指令，接下就把vue中内置指令都罗列出来

| 指令                   | 描述                                                         | 简写 |
| ---------------------- | ------------------------------------------------------------ | ---- |
| v-bind                 | 单向绑定数据和解析表达式                                     | `:`  |
| v-model                | 双向数据绑定，`v-model:value` 可以简写成 `v-model`;因为v-model默认收集的就是value的值 | 无   |
| v-for                  | 遍历数组、对象、字符串                                       | 无   |
| v-on                   | 绑定事件监听                                                 | `@`  |
| v-if、v-else、v-else   | 条件渲染（动态控制节点是否存在）                             | 无   |
| v-show                 | 条件渲染（动态控制节点是否展示）                             | 无   |
| v-text                 | 给所在的标签渲染文本内容，与插值语法的区别：v-text会替换掉节点中的内容 | 无   |
| v-html                 | 也是给所在的标签渲染文本内容,但是v-html能解析标签，即可识别html代码，但是容易引起xss攻击 | 无   |
| v-cloak (该指令没有值) | 本质就是一个特殊的属性，配合css可以解决网速慢时页面展示出来{{XXX}}的问题,这个在学习的时候觉得不太常用，就没有详细的记录； | 无   |
| v-once (该指令没有值)  | v-once所在节点在初次动态渲染后，就不会在读取数据(脱离了响应式)![](./repeat-study-img/once.png) | 无   |
| v-pre（该指令没有值）  | 所在节点Vue不在进行编译（插值语法、指令等都不认识）；所以在没有插值和指令的节点使用会加快编译的速度![](./repeat-study-img/vPre.png) | 无   |

## 自定义指令

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



![](./repeat-study-img/customv.png)



**需求2：**定义一个v-focus-bind指令，和v-bind功能类似；但可以让其绑定的input元素一直可以自动获取焦点；引出三个常用的配置回调;这三个回调函数把指令的运行的时机分的更加的详细；

![](./repeat-study-img/focus.png)



**总结：**

>- 定义：有两种不同的定义方式，一种是局部的定义方式，另一种就是全局的定义方式，可以参看需求1和需求2
>
>  ```javascript
>  // 第一种局部的定义方式，这里的big函数其实包含了三个常用回调中的bind和update
>  new Vue({
>          el:"#root", 
>          data:{ 
>              number:'1'
>          },
>          // 何时调用？ 1、指令和元素成功绑定时(模板第一次渲染)；
>          //          2、指令所在模板被重新渲染解析时
>          directives:{
>              big(element,binding){
>                  element.innerText = binding.value * 10
>              }
>          }
>  })
>  
>  // 第二种 全局的配置方式和三个常用的回调函数
>  Vue.directive('focus-bind',{
>          // 指令和元素成功绑定时(模板第一次渲染)
>          bind(element,binding){
>              element.value = binding.value
>          },
>          // vue把元素写入页面时回调
>          inserted(element,binding){
>              element.focus()
>          },
>          // 指令所在模板被重新渲染解析时
>          update(element,binding){
>              element.value = binding.value
>              element.focus()
>          }
>  })
>  
>  ```
>
>  
>
>- 自定义指令如果是复合单词，不要使用驼峰命名，而是要使用 `-`
>
>  ![](./repeat-study-img/mingmin.png)
>
>- 三个常用的回调函数和回调时机
>
>  - bind：指令和元素成功绑定时(模板第一次渲染)
>  - inserted：指令所在元素被插入页面时回调
>  - update：指令所在模板被重新渲染解析时
>
>

## Vue生命周期

- **生命周期有名“生命周期回调函数”**；

- 说白了就是Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 这些特殊的函数，名称是固定不可更改的，但是函数的具体内容需要开发人员实现
- 生命周期函数中的**this**指向是 **vm** 或者 **组件实例对象**

**关于销毁Vue实例**

1、销毁后借助Vue开发者工具看不到任何信息

2、销毁后自定义事件会失效，但原生DOM事件依然有效

3、一般不会在beforeDestroy中操作数据，因为即便操作数据，也不会再触发更新流程了。

![](./repeat-study-img/lifecycle.png)

# 第二章：组件化编程

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

![](./repeat-study-img/component.png)



## 单文件组件

一个文件中只包含一个组件，即一个组件就是一个.vue文件

## 组件基本使用

Vue中使用组件的三大步骤

​	一、定义组件，就是先创建一个组件

>**Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：**
>
>- el不要写，为什么？---因为组件就是一块砖，哪里需要往哪里搬；这流动的东西怎么好给它找个窝呢
>- data必须要写成函数，为什么？---因为组件可以到处使用，避免复用时，数据存在引用关系；修改一个牵动所有组件中的数据，肯定不行
>- 可以使用`template`配置组件结构

​	二、注册组件；分为局部注册和全局注册

>- 局部注册：给vm的components属性编写一个配置对象
>
>```javascript
>    // 第一步、创建一个组件对象实例school ============================
>    const school = Vue.extend({
>        name:'school',
>        template:`
>        <div>
>            <h2>学校名称：{{schoolName}}</h2> 
>            <h2>学校地址：{{schoolAddress}}</h2>
>        </div>`,
>        data(){
>            return{
>                schoolName:'尚硅谷',
>                schoolAddress:'北京昌平'
>            }
>        }
>    })
>    
>       // Vue的实例之一 ==============================================
>    new Vue({
>        el:"#root", 
>        // 第二步、注册组件（局部）
>        components:{school}
>    })
>
>```
>
>
>
>- 全局注册：Vue.component(‘组件名’，组件)
>
>```javascript
>    const student = Vue.extend({
>        name:'student',
>        template:`
>        <div>
>            <h3>学生姓名：{{studentName}}</h3> 
>            <h3>学生年龄：{{studentAge}}</h3>
>        </div>`,
>        data(){
>            return{
>                studentName:'Tom',
>                studentAge:19
>            }
>        }
>    })
>
>    // 全局注册 student 组件 ==================================
>    Vue.component('student',student)
>```
>
>

​	三、使用组件；写个组件标签就可以正常的使用了

>第一种写法：`<school></school>`
>
>第二种写法：`<school/>`；注意不使用脚手架的话，这种写法会导致后续组件不能正常渲染



## 组件注册命名

- 一个单词
  - 全小写，比如 school
  - 首字母大写，比如School
- 多个单词
  - kebab-case命名；比如 my-school
  - CamelCase命名: 比如 MySchool（这种方式需要Vue脚手架支持）

## 组件创建简写

`const school = Vue.extend(options)`可以简写成`const school = options`



## 重要的内置关系

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

举个例子：`Vue.prototype.xxx = {a:'1'};那么所有的组件实例vc,通过this.xxx就可以获取到对象{a:‘1’}`

![](./repeat-study-img/componentVueRelation.png)

# 第三章：使用脚手架

## 前言

​	上面的组件化编程，我们使用的是非单文件组件（即涉及到的组件都在一个文件里）；但是在实际的开发中，我们使用的却是`单文件组件`；即一个组件就是一个个`.vue`文件；

​	之前提到vue组件就是html结构和资源的集合;常用的css、html、js等都包含在一个个组件中，也就是`.vue`文件中，在vue文件中这三部分是由不同的标签进行区分和管理的，如下所示

```vue
<template>
    <!-- 组件的结构 -->
</template>

<script>
// 组件交互相关的代码
</script>

<style>
/* 组件相关的样式 */
</style>
```

​	接下来将之前非单文件组件中的`School`组件改写成单文件组件的`School.vue`；下图是各个部分的比对详情

![](./repeat-study-img/vueFile.png)

## 脚手架作用

​	下面将一步步的抽取组件往脚手架的方向靠、有助于我们更好的理解脚手架的作用;之前聊到过在Vue的组件开发中，VM关联管理所有的组件实例对象；但是在开发中这其中还有一个叫`App`的组件介于VM和所有组件实例对象之间；是一人之下万人之上的存在；这样VM只关心和管理App组件；其余的组件全部由App组件进行统一的组装。所以VM通过App间接的对所有的组件进行了管理。下图就是将`School和Student`组件导入`App`



![](./repeat-study-img/appvue.png)

​	App组件将所有的组件都组装起来不假，可是组件必须要在Vue实例中才有用呀；App得把搜集起来的组件交给VM对象才可以。那么这个Vue实例在哪里呢？这个专门创建Vue实例的地方就是`main.js有的脚手架也叫index.js`文件;以及模板容器怎么配置？vue.js在何时引入？

![](./repeat-study-img/vuecopeapp.png)



现在代码的这几个文件是没有办法运行起来的，第一、浏览器压根就不认识.vue文件；第二、浏览器也不识别ES6模块化导入导出的语法。目前暴露的这两个问题，使用vue的脚手架就可以帮我们解决；

## Vue脚手架

Vue脚手架是Vue官方提供的标椎化开发工具（开发平台）;

**npm下载镜像**

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

### Vue-cli安装

**环境依赖**: vue-cli依赖Node.js和全局的webpack

安装命令(全局安装，只需要执行一次)：`npm install -g @vue/cli`

构建脚手架项目(来到项目的目标目录执行)：`vue create 自定义项目名称`；命令执行后控制台如图所示

![](./repeat-study-img/es4.png)



### vue-cli3目录结构

![](./repeat-study-img/vuecliinit.png)

### Vue的不同版本

​	熟悉了脚手架的目录结构，接着就从`main.js`文件开始，如下图所示；其中`render`函数目前还不知道是什么(后面会专门学习)，所以就替换成了另一种写法；但是启动之后报错了；大概的意思就是我们目前运行的vue版本不能解析模板；提示我们需要使用`render`函数或者`vue的其他版本`

![](./repeat-study-img/renderreplaceerror.png)



vue是怎么引入运行时的依赖版本的，以及为什么运行时的版本就不能正常的解析模板呢？下图有描述

![](./repeat-study-img/vueversion.png)

因为`render`我们本身就不熟悉，因此就替换版本，使用最全乎的`vue.js`，替换之后就成功了。

![](./repeat-study-img/vueversionreplace.png)



**总结：关于不同版本的Vue**

- vue.js与vue.runtime.xxx.js的区别
  - vue.js是完整版的vue，包含：核心功能+模板解析器
  - vue.runtime.xxx.js是运行版的vue，只包含：核心功能；没有模板解析器
- 因为vue.runtime.xxx.js没有模板解析器，所有不能使用template配置项，需要使用render函数接受到的createElement函数去指定具体内容

​	

### 验证单文件组件

​	之前学习单文件组件时，编写的`School.vue`和`Student.vue`文件因为需要借助脚手架的运行时环境就没有验证写的对不对，现在有了脚手架，就验证一下是否正确

![](./repeat-study-img/singlesuccess.png)

```html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 为了兼容IE而进行的设置 -->
    <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">
    <!-- webpack的写法，<%= htmlWebpackPlugin.options.title %>就是项目的名称 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- noscript 如果浏览器不支持JS，就运行里边的脚本 -->
    <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>
    <!-- built files will be auto injected -->
  </body>
</html>
```

### render函数

​	通过上面知道`render: h=>h(App)`和`template:'<App></App>',components:{App}`是一样的效果；但是使用运行时的vue版本时，又必须使用render函数

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

上面的render函数写法，使用下面的代码过渡一下

![](./repeat-study-img/renderguodu.png)



```javascript
  render:(createElement)=>{
    console.log(typeof createElement) // function 
    // 参数1：标签元素；参数2：标签体内容
    return createElement(App)
  }
  
  // 最终简写成
  render:h => h(App)
```



## vue.config.js

- 脚手架3的默认配置是隐藏起来的。使用`vue inspect > output.js`可以查看脚手架3的默认配置


- 在脚手架项目的`package.json`同级目录下创建`vue.config.js`文件可以对脚手架进行个性化的配置，[具体能配置哪些，Vue官方已经整理好了](https://cli.vuejs.org/zh/config/)

### 代理服务

**这里只是针对开发环境；生产环境谁会这么干呢？后台解决跨域才是真正的解决跨域**

​	这里的`代理服务`特指前端Vue提供的服务代理解决方案。Vue提供了两种方式，第一种相对简单但是不够灵活、代理的服务单一；第二种方式更加全面。要很明确Vue服务代理解决的是浏览器同源策略下不同源的前后服务跨域请求所带来的问题。

![](./repeat-study-img/vueserveproxy.png)

如果前端应用和后端 API不同源，需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 `vue.config.js` 中的 `devServer.proxy` 选项来配置。

```js
module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}
```

![](./repeat-study-img/cros.png)



上面的配置是vue脚手架中提供的最简单的方式，当然简单就意味着局限

- 局限一：在”没有匹配到静态文件的请求“这种情况下，才会 代理到`http://localhost:8080`。即脚手架的根目录下存在请求的资源就不会发出代理请求，也就不会去找后台服务API

>![](./repeat-study-img/staticreq.png)

- 局限二：只能代理一个地址，在微服务的大环境下，这种配置肯定不行

**接下来的配置会解决以上所有的问题：**

```js
// 方式二、更加全面的代理配置
module.exports = {
  devServer: {
    // proxy对象属性'/api'和'/foo',简单说就是请求的前缀，用来标识不同的请求应该走不同的代理服务
    proxy: {
      // student打头的请求走该代理
      // 假设前端服务端口是8080；那么http://localhost:8080/student/getInfo请求就走代理
      '/student': {
        target: 'http://localhost:8081', // 代理的服务地址
        ws: true, // 是否支持WebScoket请求，默认是true
        changeOrigin: true //是否对后台服务暴露真实的请求地址，默认是true
      },
      // /school打头的请求走该代理
      '/school': {
        target: 'http://localhost:8082'
      }
    }
  }
}
```

对第二种配置方式的特殊情况进行一个说明：

​	描述：`http://localhost:8080/student/getInfo`走第一个代理；`http://localhost:8080/school/getName`走第二个代理。这个基于上面的配置是无可厚非的；我们分别那不同的请求前缀来匹配不同的代理服务。

​	但有这么一种情况；后台应用服务器没有配置应用上下文，那它提供的`getInfo`API的绝对请求路径就应该是`http://localhost:8081/getinfo`，

可是前端为了区分不同的请求走对应的代理服务不可避免的需要添加了`/student`前缀；这样前端请求`http://localhost:8080/student/getInfo`确实会找到代理服务发送请求`http://localhost:8081/student/getInfo`。可是代理发送`http://localhost:8081/student/getInfo`请求给后端API时出现404了。

这样的情况怎么解决呢？一个`pathRewrite:{'^/student':''}`配置就可以解决，如下所示

```js
// 方式二、更加全面的代理配置
module.exports = {
  devServer: {
    // proxy对象属性'/api'和'/foo',简单说就是请求的前缀，用来标识不同的请求应该走不同的代理服务
    proxy: {
      // student打头的请求走该代理
      // 假设前端服务端口是8080；那么http://localhost:8080/student/getInfo请求就走代理
      '/student': {
        target: 'http://localhost:8081', // 代理的服务地址
        // 代理服务发送真实请求时，去掉'/student'前缀
        pathRewrite:{'^/student':''}
        // ws: true, // 是否支持WebScoket请求，默认是true
        // changeOrigin: true //是否对后台服务暴露真实的请求地址，默认是true
      },
      // /school打头的请求走该代理
      '/school': {
        target: 'http://localhost:8082'
      }
    }
  }
}
```

## .env环境变量

[官方文档](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)

下图就开发环境的环境变量如果定义和获取进行简单的描述

![](./repeat-study-img/vueenv-1.png)







# 第四章：组件开发

以下组件相关学习都是基于脚手架进行的；



## ref标签属性

ref标签属性：

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

![](./repeat-study-img/ref.png)





## props配置项

**父组件 ====》子组件**

​	组件实例对象的`props`配置项，可以把数据传递给组件，反过来说就是让组件自己可以接受来自其他组件的数据，比如下图中；App.vue组件可以传递数据给`Student.vue以及School.vue`这两个组件；这两个组件可以通过`props`配置项来接受数据；并在接受的时候可以配置一些规则。

​	注意：1、props中的属性是只读的，为了避免开发人员修改props中的属性；Vue底层对其进行监测，如果开发人员错误的对其进行了修改，就会发出警告；2、若确实需要修改，那么请通过data中的数据对其进行修改。

| props属性只读；不能修改                 | 确实需要修改，可使用data或computed    |
| --------------------------------------- | ------------------------------------- |
| ![](./repeat-study-img/modifyprops.png) | ![](./repeat-study-img/dataprops.png) |



**使用案例**

- 数据传递：**`<组件标签  自定义属性名=“属性值”/>`**

- 接受数据；有三种不同的方式

  1、方式一；`props:['name','sex','age']`

  2、方式二；可以限制类型

  >```json
  >   props:{
  >      name:String,
  >      sex:String,
  >      age:Number
  >    }
  >```
  >
  >![](./repeat-study-img/propserror.png)

  

  3、方式三；限制类型、限制必要性、默认值

  > ```json
  > // 第三种、最严格：类型 + 必传项 + 默认值
  >     props:{
  >       name:{
  >         type:String,
  >         required:true
  >       },
  >       sex:{
  >         type:String,
  >         default:'男'
  >       },
  >       age:{
  >         type:Number
  >       }
  >     }
  > ```
  >
  > ![](./repeat-study-img/mulprops.png)



## 组件自定义事件

**1、这是一种组件间通信的方式;是子组件给父组件传递数据。子组件 ===》父组件**

给谁自定义事件？是组件，准确点就是子组件标签；之前学习的内置事件可都是针对元素标签的

**2、两种自定义事件的实现方式**

**实现方式一**

![](./repeat-study-img/customevent.png)

**实现方式二、**还可以使用`ref`属性进行实现；因为触发自定义事件的是子组件实例对象；通过ref也是可以拿到子组件的实例对象的

![](./repeat-study-img/customrefevent.png)

**3、自定义事件只触发一次，可以使用`once`修饰符或$once方法**

```html
<Student @sendStudentInfo.once="getStudentInfo"/>
```

```javascript
this.$refs.student.$once('sendStudentInfo',this.getStudentInfo)
```

**4、触发自定义事件：`this.$emit('自定义事件名'，参数)`**

**5、解绑自定义事件：`this.$off('自定义事件名')`、`this.$off(['自定义事件名1','自定义事件名2'])`或者`this.$off()`直接解绑所有自定义事件**

**6、组件标签上也可以绑定原生的DOM事件，只是需要使用`native`修饰符；否则还当时自定义事件处理**

**7、注意；通过`this.$refs.student.$on('sendStudentInfo',回调函数)`绑定自定义事件时，回调要么配置在`methods`中，要么用箭头函数，否则this的指向会出现问题。**

![](./repeat-study-img/jiantouzhxiang.png)

## 全局事件总线

**总结**：

- GlobalEventBus ;一种组件通信的方式； 可以实现任意组件间通信

- 安装全局事件总线，比较标准的写法

  - ```js
    new Vue({
        render: h => h(App),
        // 安装全局事件总线，$bus就是当前应用的VM
        beforeCreate(){
            Vue.prototype.$bus = this
        }
    }).$mount('#app')
    ```

- 使用全局总线

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

  - ```js
        mounted(){
          // 向总线中注册一个自定义事件‘studentName’，并指定回调函数
          // 待到其他组件触发事件就回调函数
          this.$bus.$on('studentName',(arg)=>{
            this.name = arg
          })
        }
    ```

  - 提供数据：

    ```js
        methods:{
          sendSchoolName(){
            // 通过总线触发自定义事件 studentName
            this.$bus.$emit('studentName',this.name)
          }
        }
    ```

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



**图解**，[对应的源码笔记](https://gitee.com/antirust/vue-study/tree/master/repeat-study/20_%E8%84%9A%E6%89%8B%E6%9E%B6HelloWorld/05_src_%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF)

**![](./repeat-study-img/bus.png)**

那么这个总线谁能满足要求呢？这里直接给出结论；视频中老师一步步的引导讲的非常好，此处不做过多的阐述。下图就是总线的定义

![](./repeat-study-img/buswho.png)

基于上面的配置，下面进行一个简单的小练习

![](./repeat-study-img/register.png)

![](./repeat-study-img/trigger.png)

## 消息订阅与发布

1、一种组件间通信的方式，使用于任意组件间通信

2、使用步骤：需要借助第三方库

​	2.1、安装`pubsub-js;`; `npm i pubsub-js`

​	2.2、引入：`import pubsub from 'pubsub-js'`

3、接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

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

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

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

## nextTick

语法：`this.$nextTick(回调函数)`

作用：在下一次DOM更新结束后执行其指定的回调

使用场景：当数据改变后，**要基于更新后的新DOM进行某些操作时**，要在nextTick所指定的回调函数中执行

## 插槽

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

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

**描述**：组件标签体间编写了html结构以后，往子组件的哪个地方放就成了一个问题；slot插槽就是用来解决这个问题的。

#### 默认插槽

一对一的情况；组件中的所有html元素都将渲染在组件中的同一个地方；那么使用一个`<slot></slot>`足够；

![](./repeat-study-img/defaultSlot.png)

#### 具名插槽

​	但是组件中的html元素都将渲染在组件中的不同地方；那么需要多个`<slot></slot>`才行，当然为了区分需要进行标识加以区分

![](./repeat-study-img/nameSlot-1.png)

![](./repeat-study-img/nameSlotOver.png)

#### template标签

template标签可以将需要的html结构包起来，当成一个整体使用指定的插槽

![](./repeat-study-img/templateSlot.png)

#### 作用域插槽

使用下图简单的回顾一下默认插槽和具名插槽，帮助我们理解作用域插槽

![](./repeat-study-img/scopeslot-1.png)

理解：数据在子组件的自身，但父组件需要根据子组件的数据来生成对应的html结构

![](./repeat-study-img/scopeslot-2.png)

```html
 <!-- 父组件  -->
<template>
    <div class="content">
        <Student title="游戏">
           <ul slot-scope="scopeData">
            <li v-for="(game,index) in scopeData.gameNameList" :key="index">{{game}}</li>
           </ul>
        </Student>
        <Student title="游戏">
           <ol slot-scope="scopeData">
            <li v-for="(game,index) in scopeData.gameNameList" :key="index">{{game}}</li>
           </ol>
        </Student>
        <Student title="游戏">
            <template slot-scope="scopeData">
                <h4 v-for="game in scopeData.gameNameList" :key="game">{{game}}</h4>
            </template>
        </Student>
    </div>
</template>

 <!-- 子组件  -------------------------------------------------------------->
<template>
  <div class="solt-div">
    <div class="title">{{title}}模块</div>
    <slot :gameNameList="games"></slot>
  </div>  
</template>
<script>
export default {
    name:'Student',
    data(){
      return{
        games:['穿越火线','极品飞车','神庙逃亡','消消乐']
      }
    },
    props:['title']
}
</script>
```



# 第五章：网络请求

## axios安装使用

安装一个命令就搞定：`npm i axios`，

引入`import axios from 'axios'`

```js
import axios  from 'axios'

export default {
    name:'Student',
    methods:{
      getStudent(){
        axios.get('http://localhost:8080/student').then(
          response => {
            console.log('获取学生信息请求成功！',response.data)
          },
          error => {
            console.log('获取学生信息请求失败！',error.message)
          }
        )
      },
      getSchool(){
        axios.get('http://localhost:8080/school').then(
          response => {
            console.log('获取学校信息请求成功！',response.data)
          },
          error => {
            console.log('获取学校信息请求失败！',error.message)
          }
        )
      },
    }

}
```



## vue服务代理

[gitee锚点链接](https://gitee.com/antirust/vue-study#%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1)

[本地编辑器锚点链接](###代理服务)

# 第六章：vuex

[vuex官方网址](https://vuex.vuejs.org/zh/)

## 概念

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

​	上一次学习到的可以在任意组件间通信的还是“全局事件总线”和“消息订阅与发布”；

![](./repeat-study-img/eventbus.png)

如果使用vuex的话

![](./repeat-study-img/vuexfirst.png)

## vuex原理

![](./repeat-study-img/vuexPrinciple.png)



## vuex的安装

​	在2022年2月7日，vue3成为了默认版本；即`npm i vue`安装的直接是就是vue3了；vue3成为默认版本的同时，vuex也更新到了4版本，`npm i vuex`,安装的就是vuex4。而vuex4只能在vue3中使用；如果非要在vue2中使用vuex4就会出现下图的错误

![](./repeat-study-img/vuexinstall.png)

总结：

- **vue2中，要用vuex3**
- **vue3中，要用vuex4**

目前使用就是vue2，所以就要安装vuex3版本，要怎么样安装呢？

```node
npm i vuex@3
```



## vuex搭建-引导

**该部分的笔记打算啰嗦些，将视频中老师的引导都适当的记录下来**；前期引导部分的编码可能是不对。最后呈现的才是最终的正确使用方式

### vm的store配置项

vuex是插件，插件就应该使用`Vue.use(Vuex)`；插件配置完成，vm的配置项中的`store`属性就起作用了；即vm和所有的vc都可见了，他们的实例对象中都会有个`$store`属性

![](./repeat-study-img/Vuexuse.png)

### 构建Store实例

Vue配置项`store`最终需要的是一个`Store`实例，而不是什么’hello store‘。所以就构建store实例并配置；下图是引入顺序错误而导致的问题

![](./repeat-study-img/storeCreateBefore.png)



### 完整的Vuex搭建

![](./repeat-study-img/vuexBuildSuccess.png)

**src/store/index.js**

```js
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// store对象管理着Actions\Mutations\State三个对象
const actions = {

}
const mutations = {

}
const state = {
    // 用于存储数据
}

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

**main.js**

```js
import Vue from 'vue'
import App from './App'

Vue.config.productionTip= false

import store from './store'

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

console.log(vm)
```

## vuex的使用

### 初体验

上面已经搭建好了vuex运行时的一个环境，那么如何使用Vuex进行共享数据集中式的管理呢？两张图对比着体会一下；

![](./repeat-study-img/vuex.png)

![](./repeat-study-img/vuexinituse.png)



### 基本使用

基于一个求和的案例，将vuex进行一个基本的学习和使用；后期都是围绕该案例的代码进行扩展学习和优化,比如：

1. `this.$store.state.sum`的简写
2. 模块化拆分
3. ...........

![](./repeat-study-img/culsum.png)



```js
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// store对象管理着Actions\Mutations\State三个对象
const actions = {
    jia(context,value){
        console.log("actions中的jia被调用了",context,value)
        context.commit('JIA',value)
    },
    jian(context,value){
        context.commit('JIAN',value)
    },
    jiaOdd(context,value){
        if(context.state.sum%2){
            context.commit('JIA_ODD',value)
        }
    },
    jiaWait(context,value){
        setTimeout(() => {
            context.commit('JIA_WAIT',value)
        }, 1000);
        
    }
}
const mutations = {
    JIA(state,value){
        console.log("mutations中的JIA被调用了",state)
        state.sum += value
    },
    JIAN(state,value){
        state.sum -= value
    },
    JIA_ODD(state,value){
        state.sum += value
    },
    JIA_WAIT(state,value){
        state.sum += value
    }
}
const state = {
    sum: 0 
}

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

```js
<template>
  <div>
    <h2>当前的求和为：{{sum}}</h2>
    <select v-model.number="number">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <button @click="increament">+</button>
    <button @click="decreament">-</button>
    <button @click="increamentOdd">当前求和值为奇数再相加</button>
    <button @click="increamentWait">等一等再加</button>
  </div>  
</template>
<script>
export default {
    name:'Count',
    data(){
      return{
        number:1 // 每次需要累加的初识数值 
      }
    },
    computed:{
      sum(){
        return this.$store.state.sum
      }
    },
    methods:{
      increament(){
        this.$store.dispatch('jia',this.number)
      },
      decreament(){
        this.$store.dispatch('jian',this.number)
      },
      increamentOdd(){
        this.$store.dispatch('jiaOdd',this.number)
      },
      increamentWait(){
        this.$store.dispatch('jiaWait',this.number)
      },
    }
}
</script>
<style scoped>
button{
  margin:5px
}
</style>
```

### 组件直接commit

之前学习vuex的原理时，图中的组件可以绕开Actions直接commit数据给Mutations；如果在Actions中没有什么逻辑需要处理的话，组件就可以直接commit数据给Mutations

![](./repeat-study-img/vuexPrinciple.png)

![](./repeat-study-img/dispatch-1.png)



![](./repeat-study-img/dispatch-2.png)



### 参数说明

对vuex原理图中提到的API方法的参数作出说明：

**实参**：

- dispatch('参数1'，‘参数2’)
  - 参数1：自定义名称（约定是小写）；为了对应和找到Actions中的函数
  - 参数2：需要传递给Actions的值，可以是组件中的任意值
- commit('参数1'，‘参数2’)
  - 参数1：自定义名称（约定是大写）；为了对应和找到Mutations中的函数
  - 参数2：需要传递给Mutations的值

**形参**：

- actions中函数（参数1，参数2）
  - 参数1：context，上下文对象，可以看成是一个迷你版的store对象实例，如下图
  - 参数2：value，传过来的值
- mutations中函数（参数1，参数2）
  - 参数1：state，就是state对象，可以拿到共享变量，如下图
  - 参数2：value，传进来的值	



![](./repeat-study-img/vuexparam.png)

## getters的使用

- 当多个组件需要对state中的数据经过相同的逻辑处理后再使用，就可以使用getters;
- 在Vuex的配置项中添加`getters`属性
- 组件中获取数据`$store.getters.函数名`

比如需要对求和后的sum进行10倍运算的逻辑：

![](./repeat-study-img/mulsumdemo.png)

![](./repeat-study-img/gettersvuex.png)

## mapState

组件从vuex中获取共享变量的简洁方式：

```js
computed:{
      sum(){
        return this.$store.state.sum
      },
      school(){
        return this.$store.state.school
      },
      subject(){
        return this.$store.state.subject
      }
},
```

```js
import {mapState} from 'vuex'
```



![](./repeat-study-img/mapState-1.png)

**如何优化？**

![](./repeat-study-img/mapState-2.png)

## mapGetters

组件从store的getters中获取值的简洁写法；

```js
import {mapState,mapGetters} from 'vuex'
```



![](./repeat-study-img/gettersSimple.png)

```html
<template>
  <div>
    <h2>当前的求和为：{{sum}}</h2>
    <h2>当前的求和放大10倍的值为：{{mulSum}}</h2>
    <h2>我在{{school}},学习{{subject}}课程</h2>
  </div>  
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name:'Count',
    data(){
      return{
        number:1 // 每次需要累加的初识数值 
      }
    },
    computed:{
      // sum(){
      //   return this.$store.state.sum
      // },
      // school(){
      //   return this.$store.state.school
      // },
      // subject(){
      //   return this.$store.state.subject
      // },

      // 对象形式
      // ...mapState({sum:'sum',school:'school',subject:'subject'}),
      // 数组形式,如果vuex中的变量和计算属性函数名称一样，就可以使用数组更加方便
      ...mapState(['sum','school','subject']),

      // sumForGetter(){
      //   return this.$store.getters.mulSum
      // }
      // 对象形式
      // ...mapGetters({sumForGetter:'mulSum'})
      // 数组形式;如果vuex中的getters函数名和计算属性函数名称一样，就可以使用数组更加方便
      ...mapGetters(['mulSum'])
      
    }
}
</script>
```

## mapActions

mapActions优化的是这坨代码；dispatch向Actions中提交数据；所以也不难理解vuex将它命名为`mapActions`

![](./repeat-study-img/mapActions-1.png)

使用mapActions实现

![](./repeat-study-img/mapActions-2.png)



## mapMutations

组件绕开Actions直接commit数据给Mutations的这写法也是有简写方式的

![](./repeat-study-img/mapMutations.png)



## namespaced

借助`nameSpace`可以将src/store/index.js中的代码进行模块化的拆分

### 模块化拆分为对象

![](./repeat-study-img/buyiyang.png)

![](./repeat-study-img/nameSpace-1.png)

```js
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const countOperations = {
    actions:{
        jiaOdd(context,value){
            if(context.state.sum%2){
                context.commit('JIA_ODD',value)
            }
        },
        jiaWait(context,value){
            setTimeout(() => {
                context.commit('JIA_WAIT',value)
            }, 1000);
            
        }
    },
    mutations:{
        JIA(state,value){
            console.log("mutations中的JIA被调用了",state)
            state.sum += value
        },
        JIAN(state,value){
            state.sum -= value
        },
        JIA_ODD(state,value){
            state.sum += value
        },
        JIA_WAIT(state,value){
            state.sum += value
        }
    },
    getters:{
        mulSum(state){
            return state.sum * 10 
        }
    },
    state:{
        sum: 0,
        school:'尚硅谷',
        subject:'java',
    }
}

const personOperations={
    actions:{
        addPerson(context,value){
            // console.log(value)
            context.commit('ADD_PERSON',value)
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            state.personList.unshift(value)
        }
    },
    getters:{},
    state:{
        personList:[
            {id:'kZluDlz2dAVGbdLv9sKbA',name:'普安'}
        ]
    }
}

// 创建并暴露store
export default new Vuex.Store({
    modules:{
        count:countOperations,
        person:personOperations
    }
})
```

经过上面的模块化拆分以后和配置以后，store属性的state存储的属性值如下：

![](./repeat-study-img/console--1.png)

### 组件mapXXX调用

#### mapState

![](./repeat-study-img/modulesstate.png)



#### mapGetters

![](./repeat-study-img/getterssss.png)

#### mapMutations

![](./repeat-study-img/mapMustationsss.png)

#### mapActions

![](./repeat-study-img/mapac.png)

### 传统调用方式的改变

#### 拿state共享数据

![](./repeat-study-img/stateperson.png)

#### getters拿共享数据

因为getters中存储的属性名比较特殊，所以相对于state来说差异还是挺大

![](./repeat-study-img/getterstesu.png)

#### dispatch修改数据

![](./repeat-study-img/dispatch-3.png)

#### commit修改数据

![](./repeat-study-img/mutationsssss.png)

### 模块化拆分成文件

![](./repeat-study-img/拆分.png)

# 第七章：vue-router

route：路由（key-value）

router：路由器(一组路由)

## VueRouter安装

​	2022年2月7日，vue-router的默认版本为vue-router4；vue-router4只能在vue3中使用；vue2只能使用vue-router3；因为当前使用的vue2.所以就安装vue-router3

```npm
npm i vue-router@3
```

## VueRouter基本使用

1. 安装vue-router
2. 导入vue-router;并使用Vue.use(VueRouter)配置插件
3. 创建router对象；配置路由
4. 在Vue的配置项中添加router对象实例
5. 使用`<router-link>`实现路由的切换
6. `<router-view>` 指定组件的呈现位置

![](./repeat-study-img/initrouter.png)

## 几个注意点

1、路由组件通常存放在`pages`文件夹，一般组件通常就存放在`components`文件夹



2、路由组件切换，被”隐藏“的组件默认是被销毁的，用到时再重新进行挂载；可以在路由组件中使用`mounted()和beforeDistroy()进行验证`



3、每个路由组件都有自己的`$route`属性，里边存储自身的路由信息



4、整个应用只有一个`router`，每一个路由组件都可以通过`$router`属性获得



## 嵌套路由

[嵌套路由案例效果视频下载](https://gitee.com/antirust/vue-study/raw/master/repeat-study-video/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.wmv)

嵌套路由，即多级路由

- 路由规则配置

```js
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news', //注意除了一级路由，其他路由的path不要带‘/’
                    component:News
                },
                {
                    path:'messages',
                    component:Messages
                },
            ]
        },
    ]
})
```

- 路由跳转时，要写将父级路由的path都带上;`to="/home/news"`

```html
<router-link class="list-group-item" active-class="active" to="/home/news">新闻</router-link>
```

![](./repeat-study-img/qtluyou.png)

## 路由传参

在路由跳转的时候携带参数给路由组件

### query传参

[案例效果演示视频下载地址](https://gitee.com/antirust/vue-study/raw/master/repeat-study-video/%E8%B7%AF%E7%94%B1query%E4%BC%A0%E5%8F%82.wmv)

[练习的代码](https://gitee.com/antirust/vue-study/tree/master/repeat-study/20_%E8%84%9A%E6%89%8B%E6%9E%B6HelloWorld/16_src_%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82Query)

在路由跳转的时候携带上参数；有两种不同的写法

```html
      <li v-for="detail in detailList" :key="detail.id">
        <!-- <a>{{detail.content}}</a> -->
        <!-- 方式一：跳转路由并携带Query参数，to的字符串拼接写法 -->
        <router-link :to="`/home/messages/detail?content=${detail.content}`">{{detail.title}}</router-link>

        <!-- 方式二：跳转路由并携带Query参数，to的对象写法 -->
        <router-link :to="{
          path:'/home/messages/detail',
          query:{
            content:detail.content
          }
        }">
          {{detail.title}}
        </router-link>
      </li>
```

![](./repeat-study-img/queryobject.png)

### params传参

一、字符串拼接的方式

![](./repeat-study-img/paramrouter.png)

二、对象的形式

![](./repeat-study-img/param222.png)

> **注意：这里有个坑：使用params进行传值并且使用的是对象的配置方式，一定要注意不能使用`path`;要使用`name`**



## 路由跳转写法

> **注意：params传参；不管什么方式；都需要在路径上进行占位**
>
> ![](./repeat-study-img/routeee.png)

- 直接使用路由配置的`path`的属性值

```html
<router-link class="list-group-item" active-class="active" to="/home/news">新闻</router-link>
```



- 跳转还需携带query参数，字符串拼接

```html
 <!-- 跳转路由并携带Query参数，to的字符串拼接写法 -->
 <router-link :to="`/home/messages/detail?content=${detail.content}`">{{detail.title}}</router-link>
```



- `对象+路由配置的path属性+query`的方式；对于Query传参特别友好；

```html

        <!-- 跳转路由并携带Query参数，to的对象写法 -->
        <router-link :to="{
          path:'/home/messages/detail',
          query:{
            content:detail.content,
            .......              
          }
        }">
          {{detail.title}}
        </router-link>
```

- `对象+路由配置的name属性+params`的方式;记得在路径上占位

```html
<router-link :to="{
          name:'detail', // params只能配合name使用，不能和path一起使用
          params:{
            content:detail.content,
            .........
          }
}">
      {{detail.title}}
</router-link>
```

- `params`的字符串形式；记得占位

```html
<router-link :to="`/home/messages/detail/${detail.content}`">{{detail.title}}</router-link> 
```

- `对象+路由配置的name属性+query`的方式

```html

        <router-link :to="{
          name:'detail',
          query:{
            content:detail.content,
            .......              
          }
        }">
          {{detail.title}}
        </router-link>
```



## 路由命名

在路由规则配置中给每一个路由对象起个名字进行唯一的标识

作用：如果子组件路径层级太深可以用来简化跳转的路径

![](./repeat-study-img/nameroute.png)

## 路由的props配置

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

这里的props指的是路由对象的props属性；即下图的所示位置

![](./repeat-study-img/props-2.png)

如图所示；目前路由组件是这样接受路由参数的，看上去比较繁琐；如果使用路由的props配置路由组件接受参数将变得更加的简单。

![](./repeat-study-img/props-1.png)

### 对象

这种的好像没有办法把query参数或者params参数获取到放进props中；只能传递某些固定的值

![](./repeat-study-img/props-3.png)

### 布尔值

> **注意：这种方式只能把params参数传递给路由组件；query参数形式就行不通**

![](./repeat-study-img/props-4.png)

### 函数

>**这种方式是最强大的；自定义的固定属性值、params参数、query参数都不在话下**

![](./repeat-study-img/props-5.png)

## router-link的replace属性

[视频效果演示下载](https://gitee.com/antirust/vue-study/raw/master/repeat-study-video/replace.wmv)

浏览器的历史记录有两种写入方式：分别是`push`和`replace`

| push（默认）           | replace                                                      |
| ---------------------- | ------------------------------------------------------------ |
| 将所有的记录都压入栈中 | 如果某个路由跳转是replace方式；那么该条记录在进栈的时候会将栈顶的数据（记录）给替换掉 |

基于上面的理解;学习一下`router-link的replace属性`

![](./repeat-study-img/replace-1.png)

## 编程时路由导航

​	路由的跳转一直借助`<router-link to="/home/news">新闻</router-link>`实现；即路由的跳转可以不借助`<router-link>`标签，可以使用对应的API进行调整；更加的灵活

- 路由调整

```js
this.$router.push({
    name:'detail',
      params:{
      content:detail.content
    }
})

this.$router.replace({
    name:'detail',
      params:{
      content:detail.content
    }
})
```

![](./repeat-study-img/apirouter.png)



- 前进、后退

```js
this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go(正负数) // 可前进也可后退
```

![](./repeat-study-img/routerapi.png)

## 缓存路由组件

路由跳转时；组件会被销毁。标签`<keep-alive include="News"></keep-alive>`可以让被隐藏的组件保持挂载，不被销毁

```html
				<!-- 单值写法 -->
				<keep-alive include="News">
					
				<!-- 多个值；使用数组 -->
				<keep-alive :include="['News','Messages']">
					<router-view></router-view>
				</keep-alive>	
```

![](./repeat-study-img/keepactive.png)

从生命周期函数的角度看现象：

![](./repeat-study-img/keepa.png)



## 新的生命周期函数

路由组件所独有的两个生命周期函数；用于捕获路由组件的激活状态。

  				   ` keep-alive`可以让路由组件在切换的时候不被销毁并缓存起来；也就是说路由组件如果使用keep-alive;那么它不会调用生命周期函数`beforeDestroy()；mounted()也只会初始化一次`;所以；如果在这种情况下想在组件“激活”和“失活”的时候做点事情有点困难。于是乎就有了下面的这两个新的钩子函数

```html
			<keep-alive :include="['News','Messages']">
				<router-view></router-view>
			</keep-alive>	

<!-- News组件和Messages组件将会被缓存起来 -->
```


`activated`：路由组件被激活时触发。

`deactivated`：路由组件失活的时候触发。

## 路由守卫



### 全局路由守卫

- **前置路由守卫：**全局前置路由守卫；初始化执行、每个路由组件跳转前执行
- **后置路由守卫：**全局后置路由守卫；初始化执行、每个路由组件成功跳转后执行

![](./repeat-study-img/routerforeach.png)



**前置路由守卫应用**:进行权限认证

```js
// 全局前置路由守卫；初始化执行、每个路由组件跳转前执行
router.beforeEach((to,from,next)=>{
    // console.log("前置路由守卫",to,from)
    if(to.meta.isAuth){
        if(localStorage.getItem('username')==='tom'){
            next()
        }else{
            alert('没有访问权限')
        }
    }else{
        next()
    }
})

```



**后置路由守卫应用：**标签的title切换

```js
// 全局后置路由守卫；初始化执行、每个路由组件成功跳转后执行
router.afterEach((to)=>{
    // console.log("后置路由守卫",to,from)
    // 每个路由的页签title展示
    document.title = to.meta.title || 'vue学习练习'
})
```

![](./repeat-study-img/title.png)

```js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import Messages from '../pages/Messages.vue'
import News from '../pages/News.vue'
import Detail from '../pages/Detail.vue'

const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            meta:{title:'有关信息展示'}
        },
        {
            name:'home',
            path:'/home',
            component:Home,
            meta:{title:'系统欢迎页'},
            children:[
                {
                    path:'news',
                    component:News,
                    // isAuth:true用于在全局前置路由守卫进行权限验证
                    meta:{isAuth:false,title:'新闻报道'}
                },
                {
                    path:'messages',
                    component:Messages,
                    // isAuth:true用于在全局前置路由守卫进行权限验证
                    meta:{isAuth:false,title:'小道消息'},
                    children:[
                        {
                            name:'detail',
                            path:'detail/:text',
                            component:Detail,
                            meta:{title:'消息详细信息'},
                            props(route){
                                return{
                                    content:route.params.text
                                }
                            }
                        }
                    ]
                },
            ]
        },
    ]
})

// 全局前置路由守卫；初始化执行、每个路由组件跳转前执行
router.beforeEach((to,from,next)=>{
    // console.log("前置路由守卫",to,from)
    if(to.meta.isAuth){
        if(localStorage.getItem('username')==='tom'){
            next()
        }else{
            alert('没有访问权限')
        }
    }else{
        next()
    }
})

// 全局后置路由守卫；初始化执行、每个路由组件成功跳转后执行
router.afterEach((to)=>{
    // console.log("后置路由守卫",to,from)
    // 每个路由的页签title展示
    document.title = to.meta.title || 'vue学习练习'
})


export default router
```

### 独享路由守卫

- 路由配置规则中的`beforeEnter`属性进行配置
- 独享路由守卫就仅仅只是一个`beforeEnter`,再无其他

![](./repeat-study-img/duxiang.png)



### 组件内路由守卫

在组件内配置路由守卫

![](./repeat-study-img/componentsroute.png)

![](./repeat-study-img/routeorder.png)

## 路由器工作模式



### hash模式

- 对于一个url来说；什么是hash值？  `#`以后的内容就是hash值。

```java
http://localhost:8080/#/home/messages/detail/1
```

- hash值不会包含在HTTP请求中，即；hash值不会带给服务器
- 特点：url地址中永远带着`#`

- 若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法
- 对浏览器的兼容性较好

### history模式

- 地址干净美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持；解决刷新页面服务端404的问题（刷新时将前端路由地址发送给了服务器）

# Vue3-常用Composition Api
setup是所有**Composition Api的表演舞台**
## 拉开序幕的setup
1. setup是vue3中一个新的配置项，值为一个函数
2. 组件中所用的；数据、方法等，均要配置在setup中。（vue2,数据要写在data中，方法要写在methods中）vue3不需要了
3. setup函数的两种返回值：
    1. 若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用
    2. 若返回一个渲染函数，则可以自定义渲染内容
## ref函数
数据响应式