路由的使用

一、什么是路由

路由是单页面应用程序 简称：SPA
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源。
前端路由：对于单页面应用程序来说，主要通过URL中的hash（# 号）来实现不同页面之间的切换。

二、页面跳转

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

三、使用路由的步骤

1.引入路由
2.创建路由实例
3.创建映射关系
 ①数组里面是路由对象
 ②对象里面有path：路由路径，name:名字，component：路由组件
4.将映射关系挂载到路由上面
5.router-view标签 预留展示区域

四、键盘修饰符

事件.键码
 例：input type="text" @ keyup.m="key" (只有输入m时才会执行)
 例：input type="text" @ keyup.a="key" (只有输入a时才会执行)

五、过滤器

 作用：常见的文本格式化
 用处：插值表达式 v-bind表达式
 用法：管道符连接 |
全局过滤器(main.js中书写)
 第一个参数：过滤器名字
 第二个参数：回调函数

Vue.filter(id: 'setMsg' , defintion:function  (){
console.log(data)  //管道符前面的内容
console.log(format)  //传递回来的参数
 return  data.replace('厉害'，'***')
 })

 如果有第二个过滤器 data就是第一个过滤器的返回值
私有过滤器

filters：{
setMsg3(data , format){
console.log(data)  //管道符前面的内容
console.log(format)  //传递回来的参数
}
}

六、自定义指令

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

2.全局自定义指令

  第一个参数：自定义指令名字
  第二个参数：对象

第一个参数：自定义指令名字
第二个参数：对象
Vue.directive(id:'color'，definition:{
//只调用一次，指令第一次绑定到元素时调用
bind(el:，binding:)  {
console.log(el)  //绑定的元素
console.log(binding)  //信息对象
}，
//这个元素以及渲染到页面上后执行   真实DOM
inserted(el){
console.log(el)//绑定的元素
el.focus()
}，
//更新之后触发的函数
update(el){
console.log(el)
}，
})

3.私有自定义指令

directives:{
//相当于bind函数
color(el，binding){
console.log(el)//绑定的元素
console.log(binding)
el.focus()
}，
color2:{
     inserted(){ }
     }
     }

4.全局自定义指令 main.js

  Vue.directive(自定义指令的名字，{bind(){}只调用一次，指令第一次绑定到元素时调用，inserted(){}中国元素已经渲染到界面上之后执行真实DOM,update(){}更新之后触发的函数}

5.私有指令 和data平级

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