Vue入门必备：轻松关注好友，解锁社交新技能！

引言

Vue.js简介

Vue.js是一套构建用户界面的渐进式框架，易于上手且灵活。它采用组合式API，允许开发者将界面拆分成多个组件，便于维护和复用。

1. 安装Vue

首先，您需要在项目中安装Vue.js。以下是一个使用npm安装Vue的示例：

npm install vue@next

2. 创建Vue实例

在您的HTML文件中，添加一个根元素，如div，并为其设置id属性。然后，通过以下方式创建Vue实例：

import { createApp } from 'vue';

const app = createApp({
  // 这里是您的Vue组件选项
});

app.mount('#app');

关注好友功能实现

1. 数据模型

首先，定义一个数据模型来存储用户信息和好友状态。这里使用一个对象来表示用户：

const user = {
  username: '张三',
  friends: []
};

2. 创建Vue组件

<template>
  <div>
    <h3>{{ friend.username }}</h3>
    <button @click="toggleFollow">关注</button>
  </div>
</template>

<script>
export default {
  props: {
    friend: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleFollow() {
      const isFollowing = this.friend.isFollowing;
      this.friend.isFollowing = !isFollowing;
      this.$emit('update:follow', this.friend);
    }
  }
};
</script>

3. 使用组件

在主组件中，使用Friend.vue组件来展示好友列表：

<template>
  <div>
    <friend
      v-for="friend in user.friends"
      :key="friend.id"
      :friend="friend"
      @update:follow="handleFollow"
    ></friend>
  </div>
</template>

<script>
import Friend from './Friend.vue';

export default {
  components: {
    Friend
  },
  data() {
    return {
      user
    };
  },
  methods: {
    handleFollow(friend) {
      // 处理好友关注状态变化
    }
  }
};
</script>

4. 添加样式

为了使界面更美观，您可以添加一些CSS样式。以下是一个简单的示例：

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

总结