●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 不会重新加载页面。
文章来源地址https://www.toymoban.com/news/detail-600642.html
文章来源：https://www.toymoban.com/news/detail-600642.html
到了这里，关于第四十四天的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
