Vue2基础笔记一、初识Vue 创建一个vue实例,且传入一个配置对象; root容器里的代码依然符合html代码规范，

一、初识Vue

创建一个vue实例,且传入一个配置对象; root容器里的代码依然符合html代码规范，只不过混入一些Vue语法; root容器里的代码被称为【Vue模板】; <div id='root'><h1>hello,{{name}}</h1></div>; Vue实例与容器是一对一关系; 真实开发中只有一个Vue实例,是配合着组件一起使用的; {{xxx}}中的xxx要写js表达式;

-表达式：一个表达式会产生一个值，可以放在任何需要它的地方；

二、Vue模板语法有2大类

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

三、Vue有2种数据绑定

单项绑定(v-bind)：数据只能从data流向页面;
双向绑定(v-model)：数据不仅能从data流向页面，也能从页面流向data; 注：双向绑定一般应用在表单类元素上;v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

四、data与el的2种写法

el有2种写法：

new Vue时候配置el属性；
先创建Vue实例，随后在通过vm.$mount('#root')指定el的值；

data有2种写法：

对象式
函数式注：学到组件时，data必须使用函数式，否则会报错；由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

五、MVVM模型

M：模型(model)-data中的数据；
V：视图(view)- 模板代码；
VM：视图模型(ViewModel)-Vue实例；注：data中所有的属性，最后都出现在了vm身上；vm身上所有的属性，及Vue原型上所有的属性，在Vue模板中都可直接使用。

六、数据代理

回顾Object.defineProperty();

Object.defineProperty()方法可以传三个参数, ①需要添加属性的对象; ②需要添加属性的属性名; ③配置项;配置项中有两个方法:get()、set()。

数据代理:通过一个对象代理对另一个对象中属性的操作。
Vue中的数据代理:通过vm对象来代理data对象中属性的操作。
vue数据代理的好处:更加方便操作data中的数据。
基本原理:通过Object.defineProperty()把data对象上的属性添加到vm上,为每一个添加到vm上的属性,都指定getter/setter,在getter/setter内部去操作data中对应的属性。

七、事件

事件的基本使用：

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

Vue中的事件修饰符

prevent：阻止默认事件(常用)
stop：阻止事件冒泡(常用)
once：事件只触发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才会触发事件
passive：事件的默认行为立即执行，无需等待事件回调函数执行完毕注：修饰符可以连续写;

键盘事件 1).Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete
- 退出 => esc
- 空格 => space
- 换行 => tab(特殊，必须配合keydown使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right 2).Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

3).系统修饰键(用法特殊)：ctrl、alt、shift、meta(Win键)

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会触发
配合keydown使用：正常触发事件 4).也可以使用keyCode去指定具体的按键(不推荐)

5).Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

八、计算属性

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

九、监视属性与深度监视

监视属性：

当被监视的属性发生变化时，回调函数自动调用，进行相关操作；
监视的属性必须存在，才能进行监视；
监视的两种写法：

(1).new Vue时传入watch配置
(2).通过vm.$watch监视深度监视：

Vue中的watch默认不监测对象内部值的改变。
配置deep：true可以监测对象内部值的改变。注：

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

//第一种监视方式

    watch: {
        person: {
            immediate: true,                    //初始化时handler调用一次
            deep: true,                         //开启深度监视
            handler(newValue, oldValue) {
                console.log("handler被调用了!!!", newValue, oldValue)
            }
        }
    },
        
//监视属性的简写方式

watch: {
    person(newValue, oldValue) {
        console.log("-----person被调用了!!!!", oldValue)
    }
}
    
    
    
    
//第二种监视方式 

    vm.$watch("person",{
         immediate:true,                 //初始化时handler调用一次
         handler(newValue,oldValue){
         console.log("handler被调用了!!!",newValue,oldValue)
         }
    })

十、watch与computed的区别

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

两个重要的小原则：
- (1).被Vue所管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
- (2).所有不被Vue所管理的函数(定时器的回调、ajax的回调、promise的回调)，最好写成箭头函数，这样this的指向才是vm 或组件实例对象

十一、绑定样式

1.class样式：

写法: :class = "xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定的样式个数确定，名字确定，但要动态决定用不用
数组写法适用于：要绑定的样式个数不确定，名字也不确定 2.style样式：

：style="{fontSize: xxx}"其中xxx是动态值。：style="[a,b]"其中a、b是样式对象

十二、条件渲染

1.v-if：

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

2.v-show：

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

注:使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到，template只能用v-if，功能是不影响结构，

十三、列表渲染

1.v-for指令：

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

十四、Vue监视数据的原理

1.Vue会监测data中所有层次的数据。

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

通过Setter实现监测，且要在new Vue时就传入要监测的数据，对象中后追加的属性，Vue默认不做响应式处理，如果要使后加的属性做响应式，请做如下处理：

Vue.set(target, propertyName/index,value) 或

vm.$set(target,propertyName/index,value)

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

通过包裹数组更新元素的方法实现，本质上做了两件事： (1).调用原生对应的方法对数组进行更新； (2).重新解析模板，进而更新页面。

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

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

注、Vue.set() 或 vm.$set()不能给vm 或 vm的根数据对象添加属性!

十五、收集表单数据

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

2.<input type="radio" /> ,则v-model收集的是value的值,且要给标签配置value值。

3.<input type="checkbox" />
(1).没有配置input的value属性，那么收集的就是checked(勾选 或 未勾选，是布尔值)
(2).配置input的value属性：
- v-model的初始值是非数组，那么收集的就是checked(勾选 或 未勾选，是布尔值);
- v-model的初始值是数组，那么收集的就是value组成的数组

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

1.lazy：失去焦点再收集数据；

2.number：输入字符串转为有效的数字；

3.trim：输入首尾空格过滤。

十六、过滤器

定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法： (1)Vue.filter(name,callback)——全局过滤器； (2).new Vue({filter:{ }})——局部过滤器。

3.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"。

注：
(1). 过滤器也可以接收额外参数，多个过滤器也可以串联；

(2).并没有改变原本的数据，是产生新的对应的数据。

十七、内置指令

v-text指令：作用：向其所在的节点中渲染文本内容。与插值语法的区别：v-text会替换掉节点中的内容，插值则不会。

2.v-html指令：

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

3.v-cloak指令(没有值):

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

4.v-once指令：

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

5.v-pre指令：

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

十八、自定义指令总结

定义语法：

(1).局部指令:

new Vue({
    directives:{指令名: 配置对象}
});
new Vue({
    directives:{指令名: 回调函数}
})

(2).全局指令:

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

2. 配置对象中常用的3个回调:

(1). bind：指令与元素成功绑定时调用。

(2). inserted：指令所在元素被插入页面时调用。

(3). update：指令所在模板结构被重新解析时调用。

注：

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

十九、生命周期钩子

生命周期：

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

常用的生命周期钩子：

(1).mounted：发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 (2).beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

(1).销毁后借助Vue开发者工具看不到任何信息。 (2).销毁后自定义事件会失效、但原生DOM事件依然有效。 (3).一般不会在beforeDestroy操作数据、因为即便操作数据、也不会再触发更新流程了。

二十、组件

Vue中使用组件的三大步骤： 1.定义组件(创建组件)

2.注册组件

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

如何定义一个组件？使用Vue.extend(options)创建，其中options 和 new Vue(options)时传入的那个options几乎一样，但也有区别， 区别如下：

1.el不要写，为什么？———最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器。

2.data必须写成函数，为什么？———避免组件被复用时，数据存在引用关系。

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

如何注册组件？

1.局部注册：靠new Vue的时候传入components选项；

2.全局注册：靠Vue.component("组件名"，组件)

关于组件名：

一个单词组成：第一种写法(首字母小写)：school。第二种写法(首字母大写)：School；

多个单词组成：第一种写法(kebab-case命名):my-school。第二种写法(CamelCase命名):MySchool(需要脚手架支持)。

注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h1、H2都不行。

(2).可以使用name配置项指定组件在开发工具中呈现的名字。

关于组件标签：

第一种写法：<school></school>；

第二种写法：<school/>

注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

一个简写方式： const school = Vue.extend(options) 可简写为：const school = options
关于VueComponent:

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

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

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

4.VueComponent的实例对象，简称vc，也可称组件实例对象。

一个重要的内置关系：

  VueComponent.prototype.__proto__ === Vue.prototype

为什么有这个内置关系：让组件实例对象(vc)可以访问到Vue原型上的属性和方法。

二十一、脚手架

关于不同版本的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函数去指定具体内容。

ref属性

1.被用来给元素或子组件注册引用信息(id的替代者)

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)

3.使用方式:

<h1 ref="xxx">....</h1> 或 <School ref="xxx"></School>

获取：this.$refs.xxx

配置项props

功能：让组件接收外部传过来的数据 (1）传递数据：

<Demo name="xxx"/>

(2).接收数据：

第一种方式（只接受）：

props:["name"]

第二种方式（限制类型）：

props:{ name:Number //类型 }

第三种方式（限制类型，必要性，指定默认值）：

props:{
         name{
                 type:String,     //类型
                 required:true,     //必要性
                 default:"xxx"     //默认值
         }
}

注：props是只读的，Vue底层会监测你对props的修改，如果进行修改，就会发出警告。

mixin(混入)

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

使用方式：

第一步定义混入，例如：

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

第二步使用混入，例如：

（1）全局混入：Vue.mixin(xxx)

(2) 局部混入：mixins；[xxx]

scoped样式作用：让样式在局部生效，防止冲突。写法：
Vue.config.js配置文件

使用vue.inspect > output.js可以查看到vue脚手架的默认配置。使用vue.config.js可以对脚手架进行个性化定制。详情见：cli.vue.js.org/zh

插件

功能：用于增强Vue

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

    定义插件：{
            install（Vue）{}
    }
    使用插件：Vue.use()

二十二、组件的自定义事件

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

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

3.绑定自定义事件：

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

(2).第二种方式，在父组件在：
            <Demo ref="dem"/>
            .....
            mounted(){
                this.$refs.dem.$on("speed",this.test)
            }
            
 (3).若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4.触发自定义事件：this.$emit("speed",数据)。

5.解绑自定义事件：this.$off("speed"),解绑所有自定义事件：this.$off()。

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

7.注意：通过this.$refs.dem.$on("speed",回调)绑定自定义事件时，回调要么写在methods中，要么写箭头函数，否则this会出问题。

二十三、全局事件总线（GlobalEventBus）

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

2.安装全局事件总线：

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

3.使用事件总线：

  (1).接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
  
  mounted() {
      this.$bus.$on("xxx",回调)
   }
   (2).提供数据：this.$bus.$emit("xxx",数据)

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

二十四、消息订阅与发布

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

2.使用步骤：

   (1).安装pubSub：npm i pubsub-js
   (2).引入import pubsub from "pubsub-js"

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

   mounted() {
       this.pid = pubsub.subscribe("xxx",this.demo)  //订阅消息
   }

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

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

二十五、nextTick

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

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

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

二十六、Vue封装的过渡与动画

1.作用:在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。 2.写法：（1）.准备好样式：

```
元素进入的样式：
```
1.v-enter：进入的起点

2.v-enter-active：进入过程中

3.v-enter-to：进入的终点
```
元素离开的样式：
```
1.v-leave：离开的起点

2.v-leave-active：离开过程中

3.v-leave-to：离开的终点

（2）.使用包裹要过渡的元素，并配置name属性；
（3）备注：若有多个元素要过渡，则需要使用：,且每个元素都要指定key值。

二十七、vue脚手架配置代理

方法一：在vue.config.js中添加如下配置：参考vue官方vue-cli

说明： 1.优点：配置简单，请求资源时直接发给前端即可；

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理；

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器。

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

说明： 1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理；

2.缺点：配置略微繁琐，请求资源时必须加前缀。

二十八、插槽

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

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

3.使用方式：

1.默认插槽

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

2.具名插槽

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

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

2.具体编码：

        父组件中：
                <Category>
                <template scope="scopeData">
                //生成的是ul列表
                    <ul>
                        <li v-for="g in scopeData.games" :key="g"></li>
                    </ul>
                </template>
                </Category>
                
                
                <Category>
                <template scope="scopeData">
                //生成的是h4列表
                        <h4 v-for="g in scopeData.games" :key="g"></h4>
                </template>
                </Category>
                
         子组件中：
                <template>
                    <div> 
                        <slot :games="games">插槽默认内容</slot> //定义插槽
                    </div>
                </template>
                
                
                <script>
                export default {
                    name:"Category",
                    props:["title"],
                    //数据在子组件自身
                    data() {
                        return:{
                            games:["红色警戒","穿越火线"，"劲舞团"，"超级玛丽"]
                        }
                    }
                }
                </script>

二十九、Vuex

1.概念：

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

2.何时使用？

多个组件需要共享数据时

3.搭建Vuex环境

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

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

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

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

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

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

Vue.config.productionTip = false
new Vue({
  el: "#app",
  render(h) {
    return h(App)
  },
  store,
  beforeCreate() {
    Vue.prototype.$bus = this
    console.log(this)
  }
})

4.基本使用

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

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

   const actions = {
       //响应组件中加的动作
       jia(context,value){
          context.commit("JIA",value)
       }
   }

   const mutations = {
       //执行JIA
       JIA(state,value){
           state.sum += value
       }
   }

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

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

2.组件中读取Vuex中的数据：$store.state.sum

3.组件中修改Vuex中的数据：

$store.dispatch("action中的方法名"，数据) 或 $store.commit("mutations中的方法名"，数据)

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

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

(2).在store.js中追加getters配置

......

const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

//创建并暴露store export default new Vuex.Store({ ... getters })

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

6.四个map方法的使用

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

computed:{
    //借助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"}),
    //借助mapGetters生成计算属性：bigSum(数组写法)
    ...mapState(["bigSum"]),
}

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

methods:{
    //靠mapActions生成：incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:"jiaOdd",incrementWait:"jiaWait"})
    //靠mapActions生成：incrementOdd、incrementWait(数组形式)
    ...mapActions(["jiaOdd","jiaWait"])
}

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

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

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

7.模块化+命名空间

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

(2).修改store.js

const countAbout = {
    namespaced:true,
    state:{},
    mutations:{},
    actions:{},
    getters:{
        bigSum(state){
            return state.sum * 10
        }
    }
}

const personAbout = {
    namespaced:true,
    state:{},
    mutations:{},
    actions:{}
}

const state = new Vue.store({
    modules:{
        countAbout,
        personAbout
    }
})

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

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

(4).开启命名空间，组件中读取gettters数据：

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

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

 //方式一：自己直接读取
 this.$store.dispatch("personAbout/addPersonWang",person)
//方式二：借助mapActions读取

 ...mapActions("countAbout",{incrementOdd:"jiaOdd",incrementWait:"jiaWait"}),

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

 //方式一：自己直接读取commit
 this.$store.commit("personAbout/addPersonWang",person)
//方式二：借助mapMutations读取

 ...mapMutations("countAbout",{increment:"JIA",decrement:"JIAN"}),

三十、路由

1.理解：

一个路由（route）就是一组映射关系(key-value),多个路由需要路由器（router）进行管理。

2.前端路由：

key是路径，value是组件。

3.基本使用

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

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

(3).编写router配置项：

    //引入VueRouter
    import VueRouter from "vue-router";
    //引入组件
    import aboutBig from "../components/aboutBig.vue"
    import homeBig from "../components/homeBig.vue"

    //创建一个路由器
    export default new VueRouter({
        //配置一个路由
        routes: [
            {
                path: "/about",
                component: aboutBig
            },
            {
                path: "/home",
                component: homeBig
            },
        ]
    })

(4).实现切换

      <!-- Vue中借助router-link标签实现路由的切换 -->
      <router-link to="/about">ABOUT</router-link>

(5).指定展示位置

      <!-- 指定组件呈现的位置 -->
      <router-view></router-view>

4.几个注意点：

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

2.通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载，

3.每个组件都有自己的$route属性，里面存储着自己的路由信息，

4.整个应用只有一个router，可以通过组件的$router属性获取到。

5.多级路由：

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

    routes: [
        {
            path: "/about",
            component: aboutBig
        },
        {
            path: "/home",
            component: homeBig,
            children: [    //通过children配置子级路由
                {
                    path: "news", //此处一定不要写:/news
                    component: NewsBing
                },
                {
                    path: "massing",   //此处一定不要写：/massing
                    component: MassingBing,
                    children: [       //通过children配置子级路由
                        {
                            name: "box",   //给路由命名
                            path: "dires",  //此处不写：/dires
                            component: diresIng
                        }
                    ]
                }
            ]
        },
    ]

2.跳转(要写完整路径)：

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

6.路由的query参数：

1、传递参数

 <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/massing/dires?id=${p.id}&name=${p.name}`">
      {{ p.name }}</router-link>
    <!--对象的形式——query传参 -->
    <router-link
      :to="{
        path：'/home/massing/dires',
        query: {
          id: p.id,
          name: p.name,
        },
      }"
    >
      {{ p.name }}
    </router-link>

2.接收参数：

$route.query.id
$route.query.name

7.命名路由：

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

2.如何使用：

使用name给路由命名；
跳转时可以用name代替path；

8.路由的params参数：

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

        {
            path: "/home",
            component: homeBig,
            children: [                            //通过children配置子级路由
                {
                    path: "news",                   //此处一定不要写:/news
                    component: NewsBing
                },
                {
                    path: "massing",               //此处一定不要写：/massing
                    component: MassingBing,
                    children: [                    //通过children配置子级路由
                        {
                            name: "box",           //给路由命名
                            path: "dires/:id/:title",         //使用占位符声明接收params参数
                            component: diresIng
                        }
                    ]
                }
            ]
        },

2.传递参数

 <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="`/home/massing/dires/id=${p.id}/name=${p.name}`">
      {{ p.name }}</router-link>
    <!--对象的形式——params传参 -->
    <router-link
      :to="{
        name：'box',
        params: {
          id: p.id,
          name: p.name,
        },
      }"
    >
      {{ p.name }}
    </router-link>

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

3.接收参数：

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

9.路由的props配置：

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

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

10.<router-link>的replace属性

1.作用：控制路由跳转时操作浏览器历史记录的模式；

2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为：push；

3.如何开启replace模式：<router-link replace .....>News</router-link>

11.编程式路由导航：

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

2.具体编码：

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

this.$router.replace({
    name:"box",
    params:{
        id:xxx,
        name:xxx
    }
})

this.$router.forward()  //前进
this.$router.back()   //后退
this.$router.go()   //可能进也可能后退

12.缓存路由组件：

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

2.具体编码：

  <keep-alive include="News">  //News是要缓存的组件名
      <router-view></router-view>
  </keep-alive>

13.两个新的生命周期钩子：

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

2.具体名字：

1.activated路由组件被激活时触发。
2.deactivated路由组件失活时触发。

14.路由守卫：

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

4.独享守卫：

beforeEnter(to,from,next){
    if(to.meta,isAuth){
       if(localStorage.getItem("school") === "atguigu"){
        next()
        } else{
            alert("暂无权查看")
        }
    }else{
        next()
    }
}

5.组件路由守卫

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

三十一、路由器的两种工作模式

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

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

3.hash模式：

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

4.histor模式：

1.地址干净、美观；
2.兼容性和hash模式相比略差；
3.应用部署上线时需要后端人员支持，解决刷新页面服务器端404的问题。