【Web开发手礼】探索Web开发的魅力（十二）-Vue（2）用户动态页面

前言

主要介绍了用vue框架创建用户动态页面的具体过程，可以帮助学习vue框架的基本知识！！！！

用户动态页面

Alt

用户信息

Alt

用户头像

通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素的宽度变化一起缩放。

 <img src="../assets/log.jpg" class="img-fluid" alt="用户头像">

将头像设置为圆形：

<style scoped>
img{border-radius: 50%;
}
</style>

Alt

用户信息体

<template><div class="card"><div class="card-body"><div class="row"><div class="col-3"><img src="../assets/log.jpg" class="img-fluid" alt="用户头像"></div><div class="col-9"><div class="username">hgq</div><div class="fans">粉丝：3000</div><button type="button" class="btn btn-info btn-sm" >关注</button></div></div></div></div>
</template><script>
export default{name: 'UserProfileInfo',
}
</script><style scoped>
img{border-radius: 50%;
}
.username{font-weight: bold;
}
.fans{font-size: 12px;color: gray;
}
button{padding: 2px 4px;font-size: 12px;
}
</style>

Alt
当我们需要动态的获取用户的头像、姓名、粉丝数等信息，我们需要把对象信息放在最高层，这样它的子组件也可以获取信息。
在UserProfileView.vue文件中：

<script>
import ContentBase from '@/components/ContentBase.vue';
import UserProfileInfo from '@/components/UserProfileInfo.vue';
import UserProfilePosts from '@/components/UserProfilePosts.vue';
import { reactive } from 'vue';export default{name: "UserProfileView",components: {ContentBase,UserProfileInfo,UserProfilePosts},setup(){const user = reactive({id: 1,username: 'hgq',lastName: 'h',firstName: 'gq',followerCount: 0,is_followed: false});return {user: user}}
}
</script>

reactive 和 setup 函数:

  • reactive 是 Vue 3 Composition API 中的一个函数，用于将普通对象转换为响应式对象。这意味着当对象的属性发生变化时，相关的视图会自动更新以反映这些变化。
  • reactive 是 Vue 3 Composition API 中的一个函数，用于将普通对象转换为响应式对象。这意味着当对象的属性发生变化时，相关的视图会自动更新以反映这些变化。

user 对象:

  • 在 setup 函数中，首先创建了一个名为 user 的响应式对象。这个对象包含了用户的各种信息
    • id: 用户的唯一标识符，这里设置为 1。
    • username: 用户名，设置为 ‘hgq’。
    • lastName 和 firstName: 用户的姓和名，分别设置为 ‘h’ 和 ‘gq’。
    • followerCount: 用户的粉丝数量，初始化为 0。
    • is_followed: 表示当前用户是否被关注，初始化为 false。

return 语句:

  • setup 函数通过 return 返回一个对象，对象中包含了 setup 函数中定义的 user 对象。在 Vue 3 中，通过 return 返回的属性和方法可以在模板中使用，也可以在组件逻辑中进行操作。
<UserProfileInfo v-bind:user="user"></UserProfileInfo>

v-bind:user=“user” 是 Vue.js 中用于将数据从父组件传递到子组件的方式。在这里，user 是一个父组件中定义的数据对象，它将作为 UserProfileInfo 组件的一个名为 user 的属性。
v-bind:user=“user” 可以缩写为 :user=“user”，这是 Vue.js 提供的语法糖，用来简化属性绑定的书写。

子组件获得高级传过来的参数

<div class="col-9"><div class="username">{{user.username}}</div><div class="fans">粉丝：{{user.followerCount}}</div><button type="button" class="btn btn-info btn-sm" >关注</button></div>
<script>
export default{name: 'UserProfileInfo',props: {user: {type: Object,required: true}}
}
</script>

user 的定义为：

  • type: Object 表示这个 user 属性的类型是一个对象。这是 Vue.js 中 props 的一个重要特性，通过类型声明可以进行类型检查，确保传入的数据符合预期的格式。
  • required: true 表示 user 这个属性是必须的，即父组件在使用 UserProfileInfo 组件时必须传递一个 user 对象作为属性。

动态改变，当父级对应的参数修改，子级对应修改

<div class="col-9"><div class="username">{{username}}</div><div class="fans">粉丝：{{followerCount}}</div><button type="button" class="btn btn-info btn-sm" >关注</button>
</div>
<script>
import { computed } from 'vue';
export default{name: 'UserProfileInfo',props: {user: {type: Object,required: true}},setup(props){let username = computed(() => props.user.username);let followerCount = computed(() => props.user.followerCount);return{username,followerCount}}
}
</script>

setup(props) 是 Vue 3 中组合式 API 的一部分，用于设置组件的响应式状态、计算属性、方法等。它接收一个参数 props，用来接收从父组件传递过来的属性数据。

计算属性的创建：

  • computed(() => props.user.username) 和 computed(() => props.user.followerCount) 是使用 computed 函数创建的计算属性。
  • computed 函数接收一个函数作为参数，这个函数返回计算后的值。Vue 3 会自动追踪计算属性所依赖的响应式数据（在这里是 props.user.username 和 props.user.followerCount），并在依赖数据变化时重新计算并更新计算属性的值。

现在我们要实现点击关注按钮，此时按钮变为取消关注，表示已经关注了；点击取消关注，按钮变为关注，表示取消关注了。

<button v-on:click="followed" v-if = "!user.is_followed" type="button" class="btn btn-info btn-sm" >关注</button><button v-on:click="unfollowed" v-if = "user.is_followed" type="button" class="btn btn-info btn-sm" >取消关注</button>

当然我们还得实现具体的followed和unfollowed函数。
UserProfileInfo.vue文件中的user是从父级UserProfileView.vue文件传过去的，此时我们想要修改user的is_followed，那么我们就需要从子级传送值到父级。
子组件向父组件传递信息是通过绑定事件的方法
子类通过触发followed和unfollowed函数来向高级即UserProfilieView.vue界面传达。

 setup(props,context){let username = computed(() => props.user.username);let followerCount = computed(() => props.user.followerCount);const followed = () =>{context.emit('followed');};const unfollowed = () =>{context.emit('unfollowed');};return{username,followerCount,followed,unfollowed}}
}
</script>

父级UserProfilieView.vue界面通过判断子级传过来哪个函数来进行具体的响应。

<UserProfileInfo v-bind:user="user" @followed = "followed" @unfollowed = "unfollowed"></UserProfileInfo><script>
import ContentBase from '@/components/ContentBase.vue';
import UserProfileInfo from '@/components/UserProfileInfo.vue';
import UserProfilePosts from '@/components/UserProfilePosts.vue';
import { reactive } from 'vue';export default{name: "UserProfileView",components: {ContentBase,UserProfileInfo,UserProfilePosts},setup(){const user = reactive({id: 1,username: 'hgq',lastName: 'h',firstName: 'gq',followerCount: 1000,is_followed: true});const followed = () => {if(user.is_followed){return;}user.is_followed = true;user.followerCount++;};const unfollowed = () => {if(!user.is_followed){return;}user.is_followed = false;user.followerCount--;};return {user: user,followed,unfollowed}}
}

UserProfileView 组件，它包含了一个 UserProfileInfo 组件，并向其传递了 user 数据和两个事件 followed 和 unfollowed。

  • 同时，使用 @followed=“followed” 和 @unfollowed=“unfollowed” 将 followed 和 unfollowed 事件绑定到子组件上，以便子组件可以在相应的操作时调用这两个方法。
  • followed 方法用来处理用户关注操作，当用户已关注时，不执行任何操作；否则将 user.is_followed 设置为 true，并增加 followerCount。
  • unfollowed 方法用来处理用户取消关注操作，当用户未关注时，不执行任何操作；否则将 user.is_followed 设置为 false，并减少 followerCount。
    Alt
    Alt

帖子列表

此时我们需要在UserProfileView.vue中先把帖子的内容声明出来，然后再将帖子的内容传到子组件UserProfilePosts.vue中。

<UserProfilePosts v-bind:posts="posts"></UserProfilePosts>
<script>
import ContentBase from '@/components/ContentBase.vue';
import UserProfileInfo from '@/components/UserProfileInfo.vue';
import UserProfilePosts from '@/components/UserProfilePosts.vue';
import { reactive } from 'vue';export default{name: "UserProfileView",components: {ContentBase,UserProfileInfo,UserProfilePosts},setup(){const user = reactive({id: 1,username: 'hgq',lastName: 'h',firstName: 'gq',followerCount: 0,is_followed: false});const posts = reactive({count: 3,posts: [{id: 1,userId: 1,content: 'vue框架练习！！！'},{id: 2,userId: 2,content: '玩梗大赛！！！'},{id: 3,userId: 3,content: '最喜欢的动物！！！'},]});const followed = () => {if(user.is_followed){return;}user.is_followed = true;user.followerCount++;};const unfollowed = () => {if(!user.is_followed){return;}user.is_followed = false;user.followerCount--;};return {user: user,followed,unfollowed,posts}}
}
</script>

将posts作为一个prop传递给名为UserProfilePosts的组件。在Vue中，可以使用v-bind或其简写形式:来传递prop。
在UserProfilePosts组件中接收和使用posts：在UserProfilePosts组件内部，定义posts作为一个prop，并根据需要使用它，类型为 Object，并且必须被传入（required: true）

<template><div class="card"><div class="card-body">{{ posts }}</div></div>
</template><script>
export default{name: 'UserProfilePosts',props: {posts: {type: Object,required: true},}
}
</script><style scoped></style>

Alt

<template><div class="card"><div class="card-body"><!--我们传过来的posts是对象，它的第一个值是count，第二个值是posts--><div v-for="post in posts.posts" :key="post.id"><div class="card single-post"><div class="card-body">{{ post.content }}</div></div></div></div></div>
</template><script>
export default{name: 'UserProfilePosts',props: {posts: {type: Object,required: true},}
}
</script><style scoped>
.single-post{margin-bottom: 10px;
}
</style>
  • div class=“card”> 和
    用来创建一个卡片样式的容器，用于包裹帖子列表。
  • v-for=“post in posts.posts” 遍历传入的 posts 对象的 posts 属性，这个属性应该是一个数组，包含了多个帖子对象。
  • :key=“post.id” 为每个帖子项提供唯一的标识符，Vue 使用这个标识符来高效地更新 DOM。
  • 单个帖子之间的底部间距10px

Alt

发帖子

整体框架

<template><div class="card edit-filed"><div class="card-body"><label for="edit-post" class="form-label">编辑帖子</label><textarea class="form-control" id="edit-post" rows="3"></textarea><button type="button" class="btn btn-primary btn-sm">发帖</button></div></div></template><script>
export default{name: 'UserProfileWrite',}
</script><style scoped>
.edit-filed{margin-top: 10px;
}
button{margin-top: 10px;
}
</style>

Alt

<textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
<script>
import { ref } from 'vue';
export default{name: 'UserProfileWrite',setup(){let content = ref('');return{content: content}}
}
</script>

在模板中使用 v-model 指令将 textarea 组件与 content 双向绑定。这意味着当用户在文本框中输入内容时，content 的值会自动更新；反之亦然。

  • import { ref } from ‘vue’：导入 Vue 3 的 ref 函数，用于创建响应式数据。
  • setup()：是 Vue 3 Composition API 的入口点。在这里可以定义组件的数据、方法等。
  • let content = ref(‘’)：使用 ref 创建一个名为 content 的响应式对象，初始值为空字符串 ‘’。
  • return { content: content }：将 content 对象暴露出去，以便模板可以访问和绑定它。
<template><div class="card edit-filed"><div class="card-body"><label for="edit-post" class="form-label">编辑帖子</label><textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea><button v-on:click="posted" type="button" class="btn btn-primary btn-sm">发帖</button></div></div></template><script>
import { ref } from 'vue';
export default{name: 'UserProfileWrite',setup(props,context){let content = ref('');const posted = () => {context.emit('posted',content.value);content.value = "";};return{content: content,posted}}
}
</script><style scoped>
.edit-filed{margin-top: 10px;
}
button{margin-top: 10px;
}
</style>
  • : 使用 v-on 指令绑定 click 事件到 posted 方法，点击按钮时触发 posted 方法。
  • const posted = () => { … }: 定义 posted 方法，在点击按钮时触发。它执行以下操作：
    • 使用 context.emit(‘posted’, content.value) 发送一个自定义事件 ‘posted’，并传递 content.value 作为参数。
    • 清空 content.value，以便下次编辑新帖子时开始空白。
  • return { content, posted }: 在 setup 函数中返回 content 和 posted，使它们能够在模板中使用。
    UserProfileView.vue中部分代码如下：
<UserProfileWrite @posted = "posted"></UserProfileWrite>
const posted = (content) => {posts.count++,posts.posts.unshift({id: posts.count,userId: 1,content: content})};return {user: user,followed,unfollowed,posts,posted}
  • 在父组件中使用了 组件，并且绑定了 posted 事件到父组件的 posted 方法。
  • posted 方法接收一个 content 参数，用于将新的帖子内容添加到 posts 数据中。具体操作包括：
    • posts.count++：增加帖子计数器。
    • posts.posts.unshift({ … })：将新的帖子对象添加到 posts.posts 数组的开头，保证最新的帖子显示在列表顶部。

通过 return 返回要使用的方法和变量。

Alt

总结

主要介绍了用vue框架创建用户动态页面的具体过程，可以帮助学习vue框架的基本知识！！！！

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

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

相关文章

stm32 在qemu运行

stm32 在qemu运行

stm32基础工程配置 生成stm32代码 通过cubemx 选择 stm32f407 调试功能关闭&#xff0c;设置外部时钟&#xff0c;设置串口1&#xff0c;选择makefile 工程&#xff0c;生产代码 屏蔽系统时钟配置 // SystemClock_Config 添加 发生代码 HAL_UART_Transmit(&huart1,&quo…
阅读更多...
RocketMQ Broker组件

RocketMQ Broker组件

Apache RocketMQ 是一款分布式消息中间件&#xff0c;具有高性能、低延迟、高可靠等特点。RocketMQ 的核心组件之一是 Broker&#xff0c;它负责消息的存储、过滤、事务处理以及定时/延时消息的管理。在本文中&#xff0c;我们将详细探讨 RocketMQ Broker 的这些关键功能。 消…
阅读更多...
在Spring Boot中使用自定义过滤器和MDC实现高级日志记录

在Spring Boot中使用自定义过滤器和MDC实现高级日志记录

在现代Web开发中&#xff0c;日志记录是必不可少的。通过记录日志&#xff0c;开发者可以追踪请求的流程、定位问题并进行性能调优。本文将介绍如何在Spring Boot项目中使用自定义过滤器结合MDC&#xff08;Mapped Diagnostic Context&#xff09;技术&#xff0c;实现高级日志…
阅读更多...
三子棋小程序

三子棋小程序

一.自定义头文件(game.h) 放入源文件需要用到的标准库头文件和函数的声明 ROW 和COL为棋盘的行和列&#xff0c;三子棋嘛&#xff0c;肯定为3啦 #pragma once #include<stdio.h> #include<String.h> #include<stdlib.h> #include<time.h> #define ROW…
阅读更多...
Redis（三）事务、管道、主从复制

Redis（三）事务、管道、主从复制

事务 事务是可以执行一个命令&#xff0c;也可以执行多个命令&#xff0c;事务本质上是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c;按顺序地串行化地执行而不会被其他命令插入 Redis事务和传统数据库的区别 单独的隔离操作&#xff1a;Redis的事务仅仅是保证…
阅读更多...
Robot Operating System——深度解析监控Parameters修改的底层实现

Robot Operating System——深度解析监控Parameters修改的底层实现

大纲 AsyncParametersClientParameterEventHandler监控全部Parameters监控Node上Parameters的变动触发 总结 在《Robot Operating System——AsyncParametersClient监控Parameters的增删改行为》和《Robot Operating System——ParameterEventHandler监控Parameters的增删改行为…
阅读更多...
《Java初阶数据结构》----10.＜Map和Set---TreeSet和TreeMapHashSet和HashMap ＞

《Java初阶数据结构》----10.＜Map和Set---TreeSet和TreeMapHashSet和HashMap ＞

前言&#xff1a; 大家好&#xff0c;我目前在学习java。我准备利用这个暑假&#xff0c;来复习之前学过的内容&#xff0c;并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区进行讨论&#xff01;&#xff01;&#xff01; 喜欢我文…
阅读更多...
Linux守护进程daemon与服务service及systemctl命令的作用

Linux守护进程daemon与服务service及systemctl命令的作用

在 Linux 系统的服务管理中会经常提到 daemon&#xff08;守护进程&#xff09; 与 service&#xff08;服务&#xff09;&#xff0c;守护进程 daemon 是指后台运行的进程&#xff0c;随系统启动而为应用程序提供支持&#xff0c; 而服务 service 则用于提供某种功能。 简单的…
阅读更多...
C/C++大雪纷飞代码

C/C++大雪纷飞代码

目录 写在前面 C语言简介 EasyX简介 大雪纷飞 运行结果 写在后面 写在前面 本期博主给大家带来了C/C实现的大雪纷飞代码&#xff0c;一起来看看吧&#xff01; 系列推荐 序号目录直达链接1爱心代码https://want595.blog.csdn.net/article/details/1363606842李峋同款跳…
阅读更多...
C#实现数据采集系统-Mqtt实现采集数据转发

C#实现数据采集系统-Mqtt实现采集数据转发

在数据采集系统中，通过ModbusTcp采集到数据之后，再通过MQTT转发到其他应用 MQTT操作 安装MQTT mqtt介绍和环境安装 使用MQTT 在C#/Net中使用Mqtt MQTT类封装 MQTT配置类 public class MqttConfig{public string Ip {get; set;
阅读更多...
每日任务：网络协议对比：HTTPS/HTTP与TCP/UDP

每日任务：网络协议对比：HTTPS/HTTP与TCP/UDP

1.HTTPS和HTTP有哪些区别 HTTP 是超文本传输协议&#xff0c;信息是明文传输&#xff0c;存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷&#xff0c;在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议&#xff0c;使得报文能够加密传输。HTTP 连接建立相对简单&#x…
阅读更多...
【LeetCode】141.环形链表、142. 环形链表 II（算法 + 图解）

【LeetCode】141.环形链表、142. 环形链表 II（算法 + 图解）

Hi~&#xff01;这里是奋斗的明志&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f331;&#x1f331;个人主页&#xff1a;奋斗的明志 &#x1f331;&#x1f331;所属专栏&#xff1a;数据结构 &#x1f4da;本系列文章为个人学…
阅读更多...
网站如何从0-1搭建部署蓝图介绍

网站如何从0-1搭建部署蓝图介绍

第一步&#xff1a;网站规划 确定网站目的&#xff1a;明确网站的目标和预期的受众。内容规划&#xff1a;决定网站将包含哪些内容和功能。技术需求分析&#xff1a;确定所需的技术栈&#xff0c;例如前端和后端技术。 第二步&#xff1a;设计 草图和布局&#xff1a;绘制网…
阅读更多...
AI学习记录 - 本地知识库实现的相关知识

AI学习记录 - 本地知识库实现的相关知识

在公司内部实现了个知识库&#xff0c;但这里只介绍在实现知识库的过程中用到的知识。 1、分词器 先分词&#xff0c;中文可以使用jieba分词 2、构造数据集 将词汇向量化是自然语言处理中的重要任务&#xff0c;它可以将文本数据转化为计算机能够理解和处理的向量形式。以…
阅读更多...
在react中如何计算本地存储体积

在react中如何计算本地存储体积

1.定义useLocalStorageSize钩子函数 // 计算localStorage大小 function useLocalStorageSize() {const [size, setSize] useState(0);useEffect(() > {const calculateSize () > {let totalSize 0;for (let key in localStorage) {//过滤掉继承自原型链的属性if (loc…
阅读更多...
抄作业-跟着《React通关秘籍》捣鼓React-playground-上集

抄作业-跟着《React通关秘籍》捣鼓React-playground-上集

文章目录 前言1. 搭建react 开发环境2、react hooks 知识3. 目标&#xff1a;跟着小册实现 react-playground3.1 整体布局初始化项目使用Alloment 来实现左右分屏的拖拉功能 3.2 代码编辑器Monaco Editor 3.3 实现了多文件的切换用 useContext 来共享数据。优化 tab的样式&…
阅读更多...
扫雷游戏小程序

扫雷游戏小程序

目录 一.文件 1.头文件 2.源文件 二.游戏界面和执行(test.c) 三.函数实现(void game部分,源文件game.c) 1.定义雷二维数组和展示二维数组 2.初始化地雷数组 3.初始化显示的数组 4.显示当前的情况 5.随机放置地雷 6.排雷 ps:深度优先遍历数组 四.结束 一.文件 1.头…
阅读更多...
接口测试工具：yapi和postman、Apifox 对比选型

接口测试工具：yapi和postman、Apifox 对比选型

在接口测试工具领域&#xff0c;YApi、Postman和Apifox都是备受推崇的工具&#xff0c;它们各有特点&#xff0c;适用于不同的测试场景和需求。以下是对这三款工具的详细对比选型分析&#xff1a; 一、YApi 1. 概述 YApi是一个可本地部署的、打通前后端及QA的、可视化的接口…
阅读更多...
《Single-Stage Extensive Semantic Fusion for multi-modal sarcasm detection》

《Single-Stage Extensive Semantic Fusion for multi-modal sarcasm detection》

系列论文研读目录 文章目录 系列论文研读目录文章题目含义ABSTRACTKeywords1. Introduction2. Related work3. Method3.1. Multi-modal projection 多模态投影3.2. Extensive Semantic Fusion Multiway Transformer 可拓语义融合多路Transformer3.3. Multi-objective optimizat…
阅读更多...
GO-学习-04-基本数据类型-浮点型

GO-学习-04-基本数据类型-浮点型

浮点型&#xff1a;float32和float64 %f -3.4e38——3.4e38 package main //import "fmt" //import "math" import ("fmt""unsafe""math" )func main(){//1.定义float类型var a float32 3.12fmt.Printf("值&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023