Vue学习第二天

Vue的生命周期

生命周期：指一个对象从创建到销毁的过程

每触发一个生命周期事件，会自动执行一个生命周期方法

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destoryed	销毁后

异步请求axios要写在mounted钩子函数里面

Vue-组件库Element

组件：组成页面的组件，例如：超链接，按钮，图片，表格，表单，分页条等等

官网：https://element.eleme.cn/#/zh-CNListener

使用Element组件

1. 安装ElementUI组件库，在命令行执行指令

npm install element-ui@2.15.3

1. 在入口js文件中引入ElementUI组件库

 import  ElementUI from 'element=ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

1. 访问官网，复制组件代码，调整

在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指向的网址访问