6.2作业

1.vue中hash模式和history模式的区别

1.外观：hash的url有个#符号，history没有。

2.刷新：hash刷新会加载到地址栏对应的页面，history刷新浏览器会重新发起请求，如果服务端没有匹配当前的url，就会出现404页面。

3.兼容性：hash能兼容到IE8，history只能兼容到IE10。

4.服务端支持：hash（#及后面的内容）的变化不会导致浏览器向服务器发起请求；history刷新会重新向服务器发起请求，需要在服务端做处理：如果没有匹配到资源，就返回同一个html页面.

5.原理：hash通过监听浏览器的onhashchange()事件，查找对应的路由规则；history利用H5新增的pushState()和replaceState()方法改变url。

6.记录：hash模式只有#后面的内容被修改才会添加新的记录栈；history通过pushState()设置的url于当前url一模一样也会被记录到历史记录栈。
 

17.写出vue插槽有哪些，如何使用

插槽就是子组件提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。通俗的说是：slot 是父组件建控制了子组件显示或隐藏相关内容。
插槽又分为三种，1.普通插槽    2.具命插槽     3.作用域插槽
      1.匿名插槽 : 父组件传递 一个html结构 给子组件 
        (1)子组件:  <slot> 插槽默认内容 </slot>
        (2)父组件:  <子组件> html结构 </子组件>
      2.具名插槽 : 父组件传递 多个html结构 给子组件
        (1)子组件: 给插槽添加一个name(插槽名)
          <slot name="插槽名"> 插槽默认内容  </slot>
        (2)父组件: 使用 v-slot:插槽名 或  #插槽名
          <子组件> 
            <template v-slot:插槽名>
                html结构
            </template>
          </子组件>
      3.作用域插槽

                前面的两个插槽强调的是填充占位的【位置】；
                作用域插槽强调的则是数据作用的【范围】；

                作用域插槽，就是带参数（数据）的插槽；
                在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制。

                在子组件中放置一个带参数（数据）的插槽：

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: 'classList',
    data() {
        return {
            isAllwo: {
                one: 'one',
                two: 'two'
            }　　
        }
    }
}
</script>

在父组件中引用该子组件，并通过slot-scope来接受子组件的插槽中传过来的参数和使用该数据。

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

这时页面展示的内容会是【作用域插槽：插槽中参数值是one】。

因为在template的{{}}是支持表达式的，这个时候就可以利用子组件传过来的参数值的不同进行页面内容的定制。

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| '空值' }}
            </template>
        </classList>
    </div>
</template>

这时，如果子组件中传过来的参数是空值，页面的展示内容就会是【作用域插槽：插槽中参数值是空值】。