第四十四天

●scoped 属性

     HTML5 中的新属性(布尔属性)。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。父组件的样式将不会渗透到子组件中。

     实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

●CSS动画

     动画允许元素从一种样式逐渐变为另一种样式。可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。

     关键帧保持元素在特定时间具有的样式。

要使用关键帧，先创建一个带名称的 @keyframes 规则，对使用 animation-name 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

     可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。

@keyframes规则

     在@keyframes规则中指定CSS样式时，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到元素。

    from等价于 0%。

    to等价于 100%。

如果多个关键帧使用同一个名称，以最后一次定义的为准。 

@keyframes 不存在层叠样式的情况，所以动画在一个阶段只会使用一个的关键帧的数据。

●Vue中的事件修饰符：

1.prevent:阻止默认事件(常用)(加了它，点击不会跳转；不加，点击会跳转)；

2.stop：阻止事件冒泡(常用)(不加，showInfo中的弹窗会执行两次；加了，showInfo中的弹窗只执行一次)；

3.once:事件只触发一次(常用)；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

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

●键盘事件

.Vue中常用的按键别名：

回车 => enter

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

退出 => esc

空格 => space

换行 => tab(特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

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

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

(1).配合keyup使用：按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

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

●Vue Router

     Vue.js 官方的路由管理器。

•相关配置

①首先引入vue和vue-router：

     import Vue from "vue";

     import VueRouter from "vue-router";

②再告知Vue使用vue-router

     Vue.use(VueRouter);

③定义一个新的VueRouter，并export到外面，方便在mian.js中的new Vue中注册。

const router = new VueRouter({

  mode: "history",

  base: process.env.BASE_URL,

  routes

});

export default router;

④new VueRouter有三个参数。

    mode代表路由模式，它的默认值是hash模式，hash模式很丑，且不支持锚定向，所以如果希望有个漂亮的路由或支持锚定向，可以考虑使用history模式。

    base代表应用的基路径，process.env.BASE_URL是指从从环境进程中根据运行环境获取的api的base_url

    routes 则是具体的路由配置列表，这个参数最核心也最关键

•path：指定当前路由的路径,当浏览器url与path匹配时router-view就会渲染当前route对象指定视图组件component/components。

    Vue的router支持动态路径,以 "/:属性名"形式作为当前path字符串中的一部分。这段字符串路由将作为动态路由匹配真实url上响应字符串信息

•component : Component | () => import(组件)：当前浏览器url与路由的path匹配时所渲染的路由组件

     路由的懒加载,通过函数的形式,可以让项目中哪些不许一开始就要加载的组件,加载到项目中去     

     只有浏览器跳转到当前路由时,该路由组件才会加载到项目中去    

     减少不必要的加载降低应用加载速度和运行带宽

在项目开发中应用中不需要一开始就加载的路由组件请使用懒加载

•name: 给路由命名,让路由成为具名路由。路由的导航就可以使用name进行跳转。（路由使用location导航时只有具名路由可以直接接受pramas传参）

•redirect： string | Location | Function

   重定向路由，当前应用访问导航至该路由时，这个路由会（以替换的形式）自动重定向到redirect指定的新路由

     redirect 支持函数的形式,该函数接收一个参数就是个访问oldpath时生成的location对象

    redirect 函数的形式必须返回重定向路由的path或location

•props: boolean | Object | Function

     路由的动态匹配一般情况下只能通过,this.$route.params获取动态匹配到的值。

    当设置props属性后动态匹配到的键值对可以作为组件props直接传递给视图组件，这样大大降低组件的耦合性 布尔值。

    如果 props 被设置为 true，route.params 所有键值对将会被设置为组件props属性。

      props对象形式,就是将对象key作为渲染组件props属性名,value就是对应属性值 。

      props的函数写法接收当前路由信息对象作为参数,该函数会返回一个对象.对象的key就是渲染组件props属性名,value就是对应属性值 。

•children?: Array[RouteConfig]

嵌套路由，可以给当前路由设置二级路由

•beforeEnter: (to: Route, from: Route, next: Function) => void

     路由的独享守卫,当应用将要导航到当前路由时,可以使用该守卫进行一些逻辑运算实现是否阻止本次导航。

●history模式和hash模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

•history模式

history ：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法(需要特定浏览器支持）。

     这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。

     只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

•hash模式

hash： 即地址栏 URL 中的 # 符号。

比如这个 URL：http://localhost:8081/#/form hash 的值为 #/form。

特点：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。