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

最新推荐文章于 2022-07-31 01:37:11 发布

原创最新推荐文章于 2022-07-31 01:37:11 发布 · 668 阅读

CC 4.0 BY-SA版权

文章标签：

27 篇文章

订阅专栏

8 篇文章

订阅专栏

8 篇文章

订阅专栏

本文深入解析VHR项目中Vue组件的响应函数，包括mounted、created、methods等，以及CSS选择器的应用，如position、text-align、display等属性的详细说明。通过实例分析，帮助读者理解Vue生命周期钩子和CSS布局技巧。

响应函数分析

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

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