【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。

帖子列表

此时我们需要在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