Vhr项目分析（二） 前端Home.vue

vhr项目地址： https://github.com/lenve/vhr
项目作者： https://blog.csdn.net/u012702547

响应函数分析

1. mounted： html加载完成之后执行。顺序是子组件->父组件。
2. created: html加载完成之前执行。顺序是 父组件->子组件。
3. methods： 事件方法执行。
4. watch： 监听一个数值的变化，然后执行相应函数。
5. computed： 设置依赖关系。
6. loadNF(): 使用get请求" /chat/sysmsgs "，后isDot=false。遍历响应数据( resp.data.forEach(msg=>{ 如果msg.state是0，isDot设置为true }) )。若有msg的state为0，则el-badge带有小圆点。
7. goChat: 点击el-badge所产生的小红点，跳转入/chat页面（Chat组件）。
8. el-dropdown的@command采用handleCommand函数： 一参数名为cmd，由el-dropdown-item的command给cmd值，判断cmd，辨明选择的组件。若选了“logout”，调用this.$confirm(…).then(…).catch(…);

CSS选择器分析

属性	数值	描述
position	absolute	绝对位置
text-align	center	文本居中
display	flex	作为弹性伸缩盒显示，任何容器皆可用
padding	0px	内边距
box-sizing	content-box	规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
align-items	center	子项目居中
justify-content	space-between	项目位于各行之间留有空白的容器内。
margin		外边距
cursor	pointer	光标改编为一只手