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()触发父组件中的事件

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/727352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《javascript高级程序设计》学习笔记 | 23.JSON

关注[前端小讴],阅读更多原创技术文章 JSON JSON 是 JS 对象简谱,是一种通用的数据格式和 JS 有相同的语法,但不属于 JS,很多语言都能解析和序列化 JSON 相关代码 → 语法 JSON 支持 3 种类型的值 简单值:字符串、…

leetCode刷题 4.寻找两个正序数组的中位数

目录 1. 思路 2. 解题方法 3. 复杂度 4. Code 题目: 给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1: 输入&…

1分钟带你搞定Python函数分类

python语言中,函数可以分为内置函数、自定义函数、有参数函数、无参数函数、有名字函数和匿名函数。其中,内置函数可以直接使用,自定义函数需要根据需求定义。有参数函数在定义时需要指定参数,调用时传入参数。无参数函数在定义时…

python基础 — 进制转换

1、进制引导符号 在 Python 中,可以使用不同的前缀(引导符号)来表示不同的进制。 以下是各种进制的引导符号: 二进制(Binary):使用0b或0B作为前缀。例如:0b1010 表示二进制数 101…

SpringBoot 跨域配置

SpringBoot 跨域配置 添加配置文件 Configuration public class CorsConfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration new CorsConfiguration();corsConfiguration.setAllowCredentials(true);// 设置访问源地址corsConfiguration.a…

git远程仓库使用

赋值这个地址clone 克隆之后 cd slam_oncloud/ git remote add chenxnew ssh://git192.168.3.40:1022/chenxiao/slam_oncloud.git 查看一下 linuxchenxiao:/media/linux/mydisk/cloud_slam/slam_oncloud$ git remote add chenxnew ssh://git192.168.3.40:1022/chenxiao/sla…

记录一次Dubbo远程调用的错误

情景:有一个生成PDF的接口中,如下: GET Path("/getPDF") public void getPDF(QueryParam("id") String id, Context HttpServletResponse response) {………… }之前实现的代码都写在了Controller里面,代码里…

【算法笔记】LeetCode_15_三数之和

LeetCode_15_三数之和 LeetCode 15 (LeetCode 15) 题目描述 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复…

北斗卫星助力无人机在沙漠播种,促进沙漠治理

北斗卫星助力无人机在沙漠播种,促进沙漠治理 近年来,随着科技的不断发展,北斗卫星和无人机技术的结合被广泛应用于沙漠治理领域,为解决沙漠化问题提供了全新的思路和解决方案。 近日,黄河“几字弯”北岸的内蒙古自治…

《LeetCode力扣练习》代码随想录——二叉树(完全二叉树的节点个数---Java)

《LeetCode力扣练习》代码随想录——二叉树(完全二叉树的节点个数—Java) 刷题思路来源于 代码随想录 222. 完全二叉树的节点个数 二叉树-后序遍历 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeN…

[力扣100][好题] 121.买股票的最佳时机 || 动态规划

添加链接描述 思路: 设置一个动态数组dp用来存放当前最大的利润这个利润有两个来源:来源一是来自上一个最大利润;来源二是目前值减去最小买入价格如何维护最小值?预设一个最小值然后将这个最小值每次和当前值比较 class Solutio…

word打字后面的字消失是怎么回事

在使用Microsoft Word进行文档编辑时,很多用户可能会遇到一个令人困惑的问题:当在文档中打字时,后面的字却莫名其妙地消失了。这种情况不仅影响了编辑效率,还可能导致重要数据的丢失。那么,这一现象背后的原因是什么&a…

JVM3_数据库连接池虚引用ConnectionFinalizerPhantomReference引起的FullGC问题排查

背景 XOP服务运行期间,查看Grafana面板,发现堆内存周期性堆积,Full GC时间略长,需要调查下原因 目录 垃圾收集器概述 常见的垃圾收集器分区收集策略为什么CMS没成为默认收集器 查看JVM运行时环境分析快照 PhantomReference虚引用…

46. 全排列(力扣LeetCode)

文章目录 46. 全排列题目描述回溯算法 46. 全排列 题目描述 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],…

深度学习目标检测】二十二、基于深度学习的肺炎检测系统-含数据集、GUI和源码(python,yolov8)

肺炎尽管很常见,但准确诊断是一项困难的任务。它要求训练有素的专家对胸部X光片进行检查,并通过临床病史,生命体征和实验室检查进行确认。肺炎通常表现为胸部X光片上一个或多个区域的阴影(opacity)增加。但是,由于肺部有许多其他状…

每日OJ题_链表①_力扣2. 两数相加

目录 力扣2. 两数相加 解析代码 力扣2. 两数相加 2. 两数相加 难度 中等 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。 请你将两个数相加,并以相同形式返回一个…

【Python】创建python库的学习笔记

1. 约定俗成的目录结构 根目录下的setup.py:在根目录下包含一个setup.py文件,用于指定项目的依赖关系、包信息以及其他安装和分发相关的元数据。例如,pyminitouch/setup.py。与库同名的代码目录:建立与库同名的代码文件夹&#x…

二维码门楼牌管理系统应用场景:数据管理的智慧新选择

文章目录 前言一、数据管理部门的智慧工具二、助力决策制定与优质服务提供三、二维码门楼牌管理系统的优势四、展望未来 前言 随着科技的飞速发展,二维码门楼牌管理系统正逐渐成为城市管理的智慧新选择。该系统不仅提升了数据管理效率,还为政府和企业提…

linux中怎么用shell逐行读取文件

在Linux中,可以使用shell脚本逐行读取文件。有多种方法可以实现这个功能,下面是几个常见的方法: 方法一:使用while循环和read命令逐行读取文件 #!/bin/bash file="filename.txt" while IFS= read -r line doecho "$line" done < "$file"…

python并发编程:阻塞IO

阻塞IO&#xff08;blocking IO&#xff09; 在Linux中&#xff0c;默认情况下所有的socket都是blocking&#xff0c;一个典型的读操作流程大概是这样&#xff1a; 当用户进程调用了recvfrom这个系统调用&#xff0c;kernel就开始了IO的第一个阶段&#xff1a;准备数据。对于…