网站开发百灵鸟,开发工具下载,文山知名网站建设联系电话,龙岩网红郭建平环境准备
安装好node.js,Vue后
添加插件
router---路由#xff0c;多页面的应用
vuex---在多个组件之间维护同一个数据
添加依赖
bootstrap---美工
popperjs/core
vue项目介绍
views-----对应vue文件#xff0c;页面
router-----路由#xff0c;页面#xff0c;c…环境准备
安装好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-3div.col-9)
userprofileinfo 实现userprofileinfo的组件并引入UserProfileView.vue 在UserProfileView.vue中写Composition API 的 setup函数用于存储信息
并绑定user到组件中v-bind:useruser
子组件将接收到父组件的参数放到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中的内容绑定到contentcontent.value即是textarea
定义发帖函数可以将贴子的内容返回并绑定button
发帖用到的帖子存在于父组件需要实现子组件像父组件的通信可以使用触发函数的方法来传递信息
在父组件中实现绑定的事件触发函数然后返回并绑定事件与函数可用unshift在数组前更新
unshift 是数组的一个方法用于在数组的开头添加一个或多个元素并返回新的数组长度
在子组件触发函数中用context.emit()触发父组件中的事件
注绑定事件和函数绑定属性
