VUE 爬坑笔记 (4)

兄弟组件之间传值

1. 创建一个空的vue实例，作为事件总线
2. 在数据源位置使用这个vue实例的$emit方法自定义一个事件
3. 在要获取数据的地方的mounted()立即执行钩子函数里使用此vue实例的$on方法的默认参数值获取数据

VUE动画

• 使用过渡类名或第三方CSS动画库都是完整的动画，同时包含了入场和出场，如果想要实现半场动画，只能根据钩子函数
• beforeEnter 设置动画入场状态
• enter 入场完成后的状态和动画效果
• afterEnter 入场动画完成的瞬间
• v-for列表过渡效果,使用transitionGrop标签，群体注册事件

SPA(single Page Application) 单页面应用程序

• 一个网站的所有功能都在一个页面上进行切换，网页不会整体刷新，所有数据通过Ajax异步请求并渲染到页面上
• 页面的切换都是通过 Hash(锚链接)实现的

路由

• 后端路由：URL地址到后端处理函数之间的对应关系
• 前端路由：hash到组件之间的对应关系
• 前端路由目的：单应用程序开发

vue-router

• 路由创建过程
  1. (创建连接)在页面中创建需要的 hash 连接
  2. (创建组件)创建于hash地址对应的组件
  3. (创建对应关系)监听URL地址中hash的变化，根据最新的hash值找到要显示的组件
  4. (路由器组件的容器)把路由中匹配到的要显示的组件放到页面中指定的容器进行显示
• VUE路由创建步骤
  1. 使用 <router-link></router-link>标签的to属性指定要跳转的hash地址

     <router-link to="/home">首页</router-link>
     <router-link to="/moive">电影</router-link>
     <router-link to="/about">关于</router-link>
     

  2. 创建组件配置项

     const home = {
             template: `<h2>首页</h2>`
         }
         const moive = {
             template: `<h2>电影</h2>`
         }
         const about = {
             template: `<h2>关于</h2>`
         }
     

  3. 实例化路由对象，在配置对象中使用routes数组属性配置hash到组件之间的对应关系

     const router = new VueRouter({
         routes: [
             {path: '/home', component: home},
             {path: '/moive', component: moive},
             {path: '/about', component: about}
         ]
     })
     

  4. 挂载到VUE实例中,在页面中挂载一个router-view标签容器

     //html
     <router-view></router-view>