css作用域
-
默认情况下的样式都是全局样式
-
如果给style标签加了scoped代表样式给自己和子组件的根标签使用
- 父组件没有scoped属性,子组件有scoped:父组件无法操作子组件样式
- 父组件有scoped属性,子组件没有,父组件也无法设置子组件样式
- 父子组件都有,父子组件无法设置对方样式
路由
路由其实就是根据不同的路径显示了不同的组件
锚点:就是网址上#和后面的部分,锚点也叫hash
监听锚点改变事件window.onhashchange拿到改变后的锚点进行判断,应该显示哪个组件
window.location.hash 获取hash
路由VueRouter使用
- 下包 :
npm i vue-router
- 导包
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 用包
//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 结果
}
}