Vue的生命周期
生命周期:指一个对象从创建到销毁的过程
每触发一个生命周期事件,会自动执行一个生命周期方法
状态 | 阶段周期 |
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestory | 销毁前 |
destoryed | 销毁后 |
异步请求axios要写在mounted钩子函数里面
Vue-组件库Element
组件:组成页面的组件,例如:超链接,按钮,图片,表格,表单,分页条等等
官网:https://element.eleme.cn/#/zh-CNListener
使用Element组件
- 安装ElementUI组件库,在命令行执行指令
npm install element-ui@2.15.3
- 在入口js文件中引入ElementUI组件库
import ElementUI from 'element=ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
- 访问官网,复制组件代码,调整
在App.Vue中如何显示element组件
<template>
<div>
<element-view></element-view>
</div>
</template>
<script>
import Element from './views/ElementView/ElementView.Vue'
export default{
components:{ElementView},
}
</script>
Vue路由
当点击菜单栏,url网址会发生变化,url会变成对应的组件
前端路由:URL中的hash(#号)与组件之间的关系
Vue Router
Vue Router是Vue官方的路由
- VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
- <router-link>:请求链接组件,浏览器会解析成<a> 在点击时需要发生跳转的标签上添加
- <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件,在app.Vue里写
配置路由
在router的index.js里面配置
redirect是重定项的意思,如果访问的是首页实际上是交给redirect指向的网址访问