slot 插槽 内容分发 一般用在父组件给子组件传递
复杂的html标签或者内容时使用
在子组件里面去定义
如果父组件没有配置内容 直接使用默认内容
1个组件可以slot插槽
插槽可以起名字（具名插槽）
父组件分配内容，使用父组件的内容
slot默认的name名字叫做default 

vue中三种传参问题

路由

pathVue Router 是vue.js的官方的路由管理器
spa ：single page application 单页面应用开发

原理：onhashchange 事件
window.onhashchange()=>{
console.log(location.hash)
//当页面的hash发生改变后就会触发
}

单页面开发的优点
提供流畅的用户体验 不用重新请求页面服务器压力小
缺点：不利于seo搜索 首次加载慢 历史管理需要自己编程管理

使用路由步骤
1、定义组件对象
2、创建路由的实例
3、配置路由规则
4、在Vue的实例配置路由功能

下面介绍几种路由的跳转和获取

声明式跳转
<!-- <router-link tag="li" to="/detail/0">新闻一</router-link>
<router-link tag="li" to="/detail/1">新闻二</router-link>
<router-link :to="{path:'/main/home'}">首页</router-link>
<router-link :to="{name:'menu'}">订单</router-link>
-->
<!-- <li @click="goDetail">新闻一</li>
<li @click="$router.push('/detail/1')">新闻二</li> -->
{
path:"/hoem/:id', 配置
name:home,
component:home
}
获取
当前的路由对象
$route
用法 {{$route.params.id}}
//或者this.$route.params.id
还有一个全局的路由对象
$router
this.$router.go(-1)//回到上一个路由
this.$router.replace();//替换
替换的参数和push一样

编程式跳转
#### 编程式跳转

this.$router.push('/detail') // 字符串
this.$router.push(`/detail/${bianliang}`)
动态路由发送 接收this.$route.params.xxx
index配置 path:/detail/:id

this.$router.push({path:'/detail/0'}) //对象

this.$router.push({name:'detail',params:{id:0}}) //对象
//注意这种是利用规则里面配置的name path不能结和params

在获取时，this.$route.params.xxx

params传参一刷新就没了
query传参会拼接在URL地址后面 刷新也不会消失

this.$router.push({path:'/detail?id=0'})

this.$router.push({name:'detail',query:{id:0}})

this.$router.push({path:'/detail',query:{id:0}})

在获取时，this.$route.query.id

//利用axios传参第二个参数传参与后台的接受
//注意第二个参数写{params:{}} 在里面的对象里写我们需要的数据
this.$http.get('/api/detail',{params:{id:this.$route.params.id}}).then(res=>{
console.log(res.data,"详情页接收到的数据")
})
后台接收是console.log(req.query)

配置路由的时候二级菜单可以不写全 他会自动补全 但是注意不能加/
例如下面例子
也就是children里面的path配置 那个hit前面不能加斜杠 不然不会自动补全前面的
但是重定向需要写全了 只有在children里面的才不用写全

再放一波简易版的路由配置

 routes: [

  linkActiveClass：“active”， //点击时候自动给添加class类名

     {

       path: '/home',

       name: 'home',

       component: home,

       redirect:"/home/hit",

       children:[

         {

           path:'hit',

           component:IsHit

         },{

           path:'upcomingMovies',

           component:upcomingMovies

         }

       ]

     },{

       path: '/login',

       name: 'login',

       component: login

     },{

       path: '*',

       redirect:"/home"

     }

   ]

路由拦截

组件内守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
有三个参数 to from next
next可以穿path 或者什么都不传 布尔值

全局的钩子函数 上面三个是在某一个组件内
beforeEach 路由跳转之前
afterEach 跳转之后
注意这个函数是指的进入了这个页面后触发的所以没有next参数
用法 在index.js中
let router=new Router({})
router.beforeEach((to,from,next)=>{
写完逻辑调用next
})

hash和history传参问题

hash只在前端使用
history 并不真实存在

切换路由模式
在router下面的index.js中
new Router({
mode:"history" 这样就是history模式 不加#号
mode:"hash" 默认是这个 #后面的
})

过滤器

注意过滤器没有修改原数据 而且不需要数据改变后触发 这和computed有区别

vue.js允许你自定义过滤器 可被用作一些常见的文本格式化
过滤器可以用在两个地方 mustache差值和v-bind表达式
过滤器应该被添加在JavaScript表达式的尾部 由管道符指示 管道符：“|”
举例 {{name|过滤器名称(传参)}} 这样写的话页面就不会直接把name输出 而后先
执行name后面的过滤器 然后在输出name
还可以多次调用过滤器 例如 {{name|过滤器1|过滤器2}}
从左往右执行 别最后一个过滤器输出的东西赋值给name

全局定义
定义一个过滤器 Vue.filter("过滤器的名称",(参数一，参数二)=>{
参数一被定义死了 永远是过滤器管道符前面哪一个数据
参数二是过滤器传过来的参数

函数里面写要对传过来的数据进行什么处理
})

私有过滤器
filters:{
过滤器名称和处理函数 写法类似于methods ：{}
}

过滤器调用就近原则 意思就是私有过滤器和全局过滤器名字重复 先执行私有

案例说明
改变msg的值然后展示在页面上面去
<template>
<div>
<h4>订单</h4>
{{msg|serch}}
</div>
</template>

<script>
export default {
data(){
return {
msg:"我想实现过滤器"
}
},
filters:{
serch(el){
console.log(el)
return el.replace("想实现","成功实现了")
}
}
}
</script>

vuex

animate.css

使用animate.css这个第三方库实现动画效果
<transition
enter-active-class="第三方的一些名字实现进场动画"
leave-active-class="第三方的一些名字实现出场动画"
:duration="800" 入场和离场的时间 统一设置
:duration={leave:133,enter:433} //分开设置
>
包裹想要有动画效果的元素
<元素 class="animated">
</transition>