路由的使用

一、什么是路由（单页面应用程序 SPA）

        后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源

        前端路由：对于单页面应用程序来说，主要通过URL中的hasp（#号）来实现不同页面之间的切换

二、页面跳转

<router-link to="/key">跳转的地址</router-link>

三、使用路由的步骤

        1、引入路由

        2、创建路由实例

        3、创建映射关系

                数组里面是路由对象

                对象里面有path：路由路径，name：名字，component：路由组件

        4、将映射关系挂载到路由上面

        5、预留展示区域

                <router-view></router-view>

四、启动项目：npm run serve

五、键盘修饰符 事件.键值或者键码

六、过滤器

        1、作用：常见的文本格式化

        2、用处：插值表达式 v-bind表达式

        3、用法：管道符连接 |

        4、全局过滤器：main.js 书写

                Vue.filter(过滤器的名字，回调函数(data：管道符前面的数据，format：传递回来的参数){return})

        5、私有过滤器：和data平级

                filters：{过滤器的名字(data：管道符前面的数据，format：传递回来的参数){return}}

七、自定义指令

        1、使用：v-指令的名字

        2、全局自定义指令在main.js写

        3、Vue.directive

                (自定义指令名字，{bind(){}只调用一次，指令第一次绑定到元素是调用，inserted(){}这个元素已经渲染到页面上之后执行 真实DOM，update(){}更新之后触发的函数})

        4、私有指令 和data平级

                a、directives：{ 指令的名字(){} 相当于bind函数 }

                b、directives：{指令的名字：{bind(){}只调用一次，指令第一次绑定到元素是调用，inserted(){}这个元素已经渲染到页面上之后执行 真实DOM，update(){}更新之后触发的函数}}