前言

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

用户动态页面

用户信息

用户头像

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

将头像设置为圆形：

用户信息体

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

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 返回的属性和方法可以在模板中使用，也可以在组件逻辑中进行操作。

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

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

      
{{user.username}}
       
粉丝：{{user.followerCount}}
       关注   
  

user 的定义为：

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

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

    
{{username}}
    
粉丝：{{followerCount}}
     关注 
  

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

计算属性的创建：

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

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

关注  取消关注 

当然我们还得实现具体的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         }      } }  

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

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

• div class=“card”> 和 用来创建一个卡片样式的容器，用于包裹帖子列表。
• v-for=“post in posts.posts” 遍历传入的 posts 对象的 posts 属性，这个属性应该是一个数组，包含了多个帖子对象。
• :key=“post.id” 为每个帖子项提供唯一的标识符，Vue 使用这个标识符来高效地更新 DOM。
• 单个帖子之间的底部间距10px

发帖子

整体框架

在模板中使用 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 对象暴露出去，以便模板可以访问和绑定它。

• : 使用 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中部分代码如下：

   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 返回要使用的方法和变量。

总结

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