css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用

css作用域

• 默认情况下的样式都是全局样式

• 如果给style标签加了scoped代表样式给自己和子组件的根标签使用

  • 父组件没有scoped属性，子组件有scoped：父组件无法操作子组件样式
  • 父组件有scoped属性，子组件没有，父组件也无法设置子组件样式
  • 父子组件都有，父子组件无法设置对方样式

路由

路由其实就是根据不同的路径显示了不同的组件

锚点：就是网址上#和后面的部分，锚点也叫hash

监听锚点改变事件window.onhashchange拿到改变后的锚点进行判断，应该显示哪个组件

window.location.hash 获取hash

路由VueRouter使用

1. 下包 ：

npm i vue-router

2. 导包

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3. 用包

//1.导入组件
//2.创建路由规则
let router = [{
    
    path:'路径'，component:组件}]
//3.实例化路由对象
let router = new VueRouter({
    
    routers})
//4.挂载到Vue实例
new Vue({
    
    
	router
	router:h=>(App)
}).mount('#app')

注意：

• 如果想要看到路由切换的组件，必须有一个路由出口
• <router-link to>本质就是a标签

路由的跳转与传值

专业名词：编程式导航，其实就是用代码进行跳转

路由重定向

路由重定向就是改变当前的路由地址到另一个路由地址

{
    
    path:'/',redirect:'/foo'}

注意：：

• redirect不是传组件而是传路径
• alias:可以给路径起别名

axios基地址配制与全局调用

• 把axios对象设置给 Vue.prototype.$axios 就可以了
• 在main.js有Vue构造函数，所以上面代码写在main.js里
• 这是利用：构造函数实例化出来的对象也可以访问原型对象里的属性

  Vue.prototype.$axios = axios.create({
    
    
        // 配置副本的一些信息
        baseURL:'https://autumnfish.cn/'
      })

• 这代表创建一个新的axios对象，并使用以上作为基地址
• 基地址如果设置了，会自动帮你拼接，但是如果你发请求时就写好了全网址，就不帮你拼接了

moment

官方文档： http://momentjs.cn/docs/#/parsing/string/

• 是一个用来处理日期和时间的插件
• 用法：
  • 下包

  npm i moment

• 导包

 import moment from 'moment'

• 用包

moment().format('时间格式')  // 获取当前时间
moment('字符串').format('时间格式') // 字符串内容是什么日期，那么得到就是什么日期
moment(数字).format('时间格式') // 代表传入时间戳，得到对应的格式

过滤器的基本使用(就是对某个字符的加工)

有的时候，有些数据没法直接拿来用，就需要对这些数据进行加工处理，过滤器就是用来做这个功能的

• 过滤器专门用来对要输出的内容进行加工处理
• 过滤器使用：

{
   
   { 原数据 | 过滤器名字 }}

filtters:{
    
    
    
    过滤器名字 (val) {
    
    
        
        return 结果
    }
}