Vue项目实战--空间论坛(1)

环境准备

安装好node.js,Vue后

添加插件

router---路由,多页面的应用

vuex---在多个组件之间维护同一个数据

添加依赖

bootstrap---美工

popperjs/core

vue项目介绍

views-----对应vue文件,页面

router-----路由,页面,createHashHistory ------> createWebHistory

components----存组件(views也可存组件)

根组件---App.vue

入口------main.js (store-----即vuex) 将整个APP组件挂载到app这个元素上,app在public--index.html上,将所有js文件打包成一个js文件

style中的scoped作用是让各个组件之间互不影响,会给每个组件加上一个随机数值

vue是一个组件化框架

每一vue组件都会导出一个对象,此对象的两个属性为name,components

components表示的是在tmplate中会用到哪些组件,将用到的组件放到components中

网站实现

网站构建

根组件中引入bootstrap的样式与脚本,并创建导航栏组件 ,可在bootstrap上搜索你喜欢的样式

创建NavBar组件

创建页面

创建Content组件,并添加到各个页面

设置各个页面的路由,并在各个页面内引入各个组件

在NavBar中使用router-link :to="{}" 在前端渲染每个页面,名称为各页面定义的接口中的name

创建个人动态页面

创建相关组件

使用bootstrap的grid进行布局 div.row>(div.col-3+div.col-9)

userprofileinfo

实现userprofileinfo的组件并引入UserProfileView.vue

在UserProfileView.vue中写Composition API 的 setup函数,用于存储信息

并绑定user到组件中v-bind:user="user"

子组件将接收到父组件的参数放到props中,便可在子组件中用user,传递对应的值

在组件定义入口函数setup,用computed实现动态计算fullName,使得可以实现对象之间的计算,然后返回fullName即可

处理关注按钮可用 v-if,v-else 实现按钮的

在vue里面绑定事件,定义一个事件处理函数

可在子组件中定义 follow unfollow 函数 并返回

在子组件的button中用@click=""绑定事件处理函数 follow unfollow

在父组件中绑定事件 follow unfollow,并定义事件触发函数,follow unfollow

子组件要修改父组件的信息的话需要触发父组件中绑定的函数,子组件可使用context.emit()

总结:子组件要修改父组件信息时,首先在子组件中绑定并定义触发函数,子组件使用**context.emit()调用父组件的事件,**父组件中绑定事件和事件函数,并在父组件中定义事件函数,通过事件函数来操作父组件中的信息

在父组件中定义帖子列表并返回, 然后传递到UserProfilePosts.vue子组件中

在UserProfilePosts.vue中接受父组件传递的对象

实现发帖功能:

编写UserProfileWrite.vue组件,并在父组件中引入,并设置样式

在子组件中设置组件入口函数setup(对象用reactive,变量用ref)

可以用v-model将textarea中的内容绑定到content,content.value即是textarea,

定义发帖函数,可以将贴子的内容返回,并绑定button

发帖用到的帖子存在于父组件,需要实现子组件像父组件的通信,可以使用触发函数的方法来传递信息

在父组件中实现绑定的事件触发函数,然后返回,并绑定事件与函数,可用unshift在数组前更新

unshift 是数组的一个方法,用于在数组的开头添加一个或多个元素,并返回新的数组长度

在子组件触发函数中用context.emit()触发父组件中的事件

注:@绑定事件和函数,:绑定属性

相关推荐
小周同学@35 分钟前
谈谈对this的理解
开发语言·前端·javascript
Wiktok38 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~43 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号44 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌1 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康2 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码3 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js