兄弟组件之间传值
- 创建一个空的vue实例，作为事件总线
- 在数据源位置使用这个vue实例的
$emit方法自定义一个事件 - 在要获取数据的地方的
mounted()立即执行钩子函数里使用此vue实例的$on方法的默认参数值获取数据
VUE动画
- 使用
过渡类名或第三方CSS动画库都是完整的动画，同时包含了入场和出场，如果想要实现半场动画，只能根据钩子函数 -
beforeEnter设置动画入场状态 -
enter入场完成后的状态和动画效果 -
afterEnter入场动画完成的瞬间 -
v-for列表过渡效果,使用transitionGrop标签，群体注册事件
SPA(single Page Application) 单页面应用程序
- 一个网站的所有功能都在一个页面上进行切换，网页不会整体刷新，所有数据通过Ajax异步请求并渲染到页面上
- 页面的切换都是通过
Hash(锚链接)实现的
路由
- 后端路由：URL地址到后端处理函数之间的对应关系
- 前端路由：hash到组件之间的对应关系
- 前端路由目的：单应用程序开发
vue-router
- 路由创建过程
- (创建连接)在页面中创建需要的 hash 连接
- (创建组件)创建于hash地址对应的组件
- (创建对应关系)监听URL地址中hash的变化，根据最新的hash值找到要显示的组件
- (路由器组件的容器)把路由中匹配到的要显示的组件放到页面中指定的容器进行显示
- VUE路由创建步骤
- 使用
<router-link></router-link>标签的to属性指定要跳转的hash地址<router-link to="/home">首页</router-link> <router-link to="/moive">电影</router-link> <router-link to="/about">关于</router-link> - 创建组件配置项
const home = { template: `<h2>首页</h2>` } const moive = { template: `<h2>电影</h2>` } const about = { template: `<h2>关于</h2>` } - 实例化路由对象，在配置对象中使用
routes数组属性配置hash到组件之间的对应关系const router = new VueRouter({ routes: [ {path: '/home', component: home}, {path: '/moive', component: moive}, {path: '/about', component: about} ] }) - 挂载到
VUE实例中,在页面中挂载一个router-view标签容器//html <router-view></router-view>
- 使用
