Vue3实战(1)

最新推荐文章于 2024-09-13 11:26:07 发布
最新推荐文章于 2024-09-13 11:26:07 发布
阅读量750 收藏
点赞数 2
分类专栏： vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51474171/article/details/126918838
版权

用vue3实现一个低配版的QQ空间~

vue3的一些基本概念

vue3框架每个vue文件由三个部分构成：template,script,style，template主要是实现HTML，script实现js，style定义格式，下面是几个部分用到的知识的一些详细介绍

script部分

export default对象的属性：

name：组件的名称
components：存储中用到的所有组件
props：存储父组件传递给子组件的数据
watch()：当某个数据发生变化时触发
computed：动态计算某个数据
setup(props, context)：初始化变量、函数

  • ref定义变量，可以用.value属性重新赋值
  • reactive定义对象，不可重新赋值
  • props存储父组件传递过来的数据
  • context.emit()：触发父组件绑定的函数

template部分

<slot></slot>：存放父组件传过来的children。
v-on:click或@click属性：绑定事件
v-if、v-else、v-else-if属性：判断
v-for属性：循环，:key循环的每个元素需要有唯一的key
v-bind:或:：绑定属性

style部分

<style>标签添加scope属性后，不同组件间的css不会相互影响。

第三方组件

view-router包：实现路由功能。
vuex：存储全局状态，全局唯一。

  • state: 存储所有数据，可以用modules属性划分成若干模块
  • getters：根据state中的值计算新的值
  • mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
  • actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
  • modules：定义state的子模块

分析vue框架的主要模块构成

在这里插入图片描述
components是用来实现页面用到各种组件的，比如导航栏等。
views是实现各个页面的，一般来说，每一个页面一个.vue文件，比如个人空间，首页等页面。
router是实现路由，下面有一个Index.js文件，用来import views里面实现的各个页面，添加到routes里面实现页面跳转。
APP.vue就是主页面了

分析QQ空间的页面组成

首先第一步，实现整体效果

下面是一个简易的实现，也就是有一个导航栏，里面有首页、用户列表、好友动态、登录、主页五个单元，这每一个单元都应该是一个单独的页面，所以要在view里面实现五个.vue文件，同时，每个页面都会有自己的body部分，但这个body应该大小间距什么的差不多，所以可以用一个共同组件ContentBase来实现，但是里面显示不同的内容，也就是在components下面实现ContentBase.vue文件，最后在routes里面添加路由实现跳转。
在这里插入图片描述
完成上述工作后，文件列表如下：
在这里插入图片描述
其中，为了在ContentBase里面显示每个页面自己的body，我们用到了<slot></slot>组件（存放父组件传过来的children），那么在template里面用到ContentBase组件时，我们把想要显示的内容放到ContentBase组件里面就行了。

实现跳转
刚刚添加的路由只能通过修改url来手动跳转，如果想点击导航栏条目跳转，需要在导航栏里面添加地址，但是与之前不同的是，vue里面不能用a标签的href实现跳转，要用router-link标签的:to={name: ‘xx’}来实现（xx是对应的要跳转的name，也就是routes里面每个path的name）
比如：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]


<router-link class="navbar-brand" :to="{name: 'home'}">MySpace</router-link>
 class="navbar-brand" :to="{name: 'home'}">MySpace</a>

给出整体实现的部分代码

NavBar.vue组件的代码

<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <router-link class="navbar-brand" :to="{name: 'home'}">Myspace</router-link>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <router-link class="nav-link" :to="{name: 'home'}">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{name: 'userlist'}">好友列表</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{name: 'userprofile'}">用户动态</router-link>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link class="nav-link" :to="{name: 'login'}">登录</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" :to="{name: 'register'}">注册</router-link>
        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

<script>
export default{
    name: "NavBar",
}
</script>

<style scoped>
</style>

ContentBase.vue组件的代码

<template>
    <div class="home">
        <div class="container">
        <div class="card">
            <div class="card-body">
            <slot></slot>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
export default{
    name: "ContentBase",
}
</script>

<style>
  .container{
    margin-top: 20px;
  }
</style>

登录页面LoginView.vue代码，其他类似，只有ContentBase组件内部不同

<template>
    <ContentBase>
        登录
    </ContentBase>
</template>
  
<script> 
import ContentBase from '../components/ContentBase';

export default {
    name: 'LoginView',
    components: {
        ContentBase,
    }
}
</script>
  
<style>
    
</style>

index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView';
import NotFoundView from '../views/NotFoundView';
import RegisterView from '../views/RegisterView';
import UserListView from '../views/UserListView';
import UserProfileView from '../views/UserProfileView';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/userlist',
    name: 'userlist',
    component: UserListView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/404',
    name: '404',
    component: NotFoundView
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterView
  },
  {
    path: '/userProfile',
    name: 'userprofile',
    component: UserProfileView
  },

]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

然后实现用户动态页面

用户动态页面的构成：
主要分为三个模块，每个模块完成各自的功
能，所以可以用三个组件来实现。
在这里插入图片描述
在components下面定义三个vue文件来实现三个部分
在这里插入图片描述
实现三个组件之前，可以先将用户动态页面布局，这里用bootstrap的grid system，可以定义每一列占多少格，一行分了十二格，这里用户信息3格，帖子列表9格。

用户基本信息部分的实现

用户基本信息这一栏，也就是UserProfileInfo.vue文件，细分也可以是左右两个部分，如下图：
在这里插入图片描述
所以还用grid system实现，依旧分为3:9，头像就是一张图片。
布局实现如下：

<template>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-3">
                    <img class="img-fluid" src="https://cdn.acwing.com/media/user/profile/photo/108721_lg_b7a2a572c6.jpg">
                </div>
                <div class="col-9">
                    <div class="username">Ypp</div>
                    <div class="fnas">粉丝：111</div>
                    <button type="button" class="btn btn-secondary 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;
}
button{
    padding: 2px 4px;
    font-size: 12px;
}
</style>
获取基本信息

每一个用户的url都应该是不一样的，而且我们希望点开某个人的动态页面能够获取一些基本信息显示，而且关注按钮和粉丝数应该是动态更新的。那么无论是用户信息还是动态发帖都应该能够获取这个页面用户的基本信息，所以将这些信息定义在父组件即UserProInfo中。

先显示用户基本信息
这里涉及到定义参数和传递参数的知识

  • 在vue中，用setup()初始化变量、函数，因为用户信息是不变的，所以用reactive定义变量，最后将用到的属性return出去
  • 父组件给子组件传递事件的时候，在子组件用v-bind:或:绑定事件，在子组件想要接收到参数就要将参数放到props里面
  • 如果想要动态计算某些属性得到新的属性，要用compute计算，这个计算在setup()里面

以上实现主要修改UserProfileView.vue文件和UserProfileInfo.vue文件：
UserProfileView:

<template>
    <ContentBase>
        <div class="row">
            <div class="col-3">
                <UserProfileInfo v-bind:user="user"/>
            </div>
            <div class="col-9">
                <UserProfilePosts />
            </div>
        </div>
    </ContentBase>
</template>
  
<script> 
import ContentBase from '../components/ContentBase';
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts'
import { reactive } from 'vue';

export default {
    name: 'UserProfile',
    components: {
        ContentBase,
        UserProfileInfo,
        UserProfilePosts,
    },
    setup(){
        const user = reactive({
            id: 1,
            username: "头发没了还会再长",
            lastName: "Y",
            firstName: "pp",
            followerCount: 0,
            is_followed: false,
        });
        return{
            user,
        }
    }
}
</script>
  
<style scoped>
    
</style>

UserProfileInfo:

<template>
    <ContentBase>
        <div class="row">
            <div class="col-3">
                <UserProfileInfo v-bind:user="user"/>
            </div>
            <div class="col-9">
                <UserProfilePosts />
            </div>
        </div>
    </ContentBase>
</template>
  
<script> 
import ContentBase from '../components/ContentBase';
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts'
import { reactive } from 'vue';

export default {
    name: 'UserProfile',
    components: {
        ContentBase,
        UserProfileInfo,
        UserProfilePosts,
    },
    setup(){
        const user = reactive({
            id: 1,
            username: "头发没了还会再长",
            lastName: "Y",
            firstName: "pp",
            followerCount: 0,
            is_followed: false,
        });
        return{
            user,
        }
    }
}
</script>
  
<style scoped>
    
</style>

定义按钮
按钮是用来关注的，如果没有关注，按钮应该显示+关注，如果已经关注，应该显示取消关注，这个信息通过props的is_followed属性获取。所以设置两个按钮，在is_followed=true显示取消关注，反之，显示+关注，在vue里面有一个v-if属性可以用来判断，直接写到button标签即可。

<button v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">+关注</button>
<button v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">取消关注</button>

而且我们应该实时更新关注按钮的状态，当点完关注显示取消关注，也就是给按钮绑定一个事件，事件函数在setup()里面定义实现，在button标签内用v-on:click或@click属性绑定。
事件函数需要做的事情，是修改is_followed属性的值，但是button在UserProfileInfo这个子组件内，而is_followed属性在UserProfileView这个父组件内，所以我们想要修改is_followed属性就要在子组件给父组件传递信息——通过event传递。
vue里面通过context.emit()：触发父组件绑定的函数，来修改属性，在子组件内使用该属性触发父组件内的事件，这个修改属性值的事件是在父组件内实现，但是在子组件内触发，子组件通过context.emit()触发，触发的一个前提是子组件绑定了该事件，绑定用@属性，这个绑定是在父组件的子组件标签内绑定。
实现效果如下：
在这里插入图片描述
在这里插入图片描述

代码修改的部分如下：
UserProfileInfo:

setup(props, context){
        let fullname = computed(() => props.user.lastName + ' ' +props.user.firstName)
        let follow = () => {
            context.emit('follow');
        }
        let unfollow = () => {
            context.emit('unfollow');
        }
        
        return{
            fullname,
            follow,
            unfollow,
        }
    },

UserProfileView:

<UserProfileInfo v-bind:user="user" @follow="follow" @unfollow="unfollow"/>

setup(){
        const user = reactive({
            id: 1,
            username: "头发没了还会再长",
            lastName: "Y",
            firstName: "pp",
            followerCount: 1,
            is_followed: true,
        });
        const follow = () => {
            if(user.is_followed) return;
            user.is_followed=true
            user.followerCount++
        }
        const unfollow = () => {
            if(!user.is_followed) return;
            user.is_followed=false
            user.followerCount--
        }

        return{
            user,
            follow,
            unfollow,
        }
    }
用户动态的实现

这一部分和用户基本信息实现基本类似，用户基本信息这一栏是先在父组件内定义用户信息这一属性，然后通过props将属性传递到用户基本信息组件内显示。
同样，用户动态这一组件的信息也定义在父组件内，用posts来定义。
但是因为posts是一个列表，不能直接显示，要用循环来实现，在vue里面用v-for属性实现循环遍历列表的每一个item，然后再对每一个item单独操作。而且要为每一个item绑定一个key，这个key是唯一的，可以取每个item的id。
然后将每个post放在一个卡片里，在设置一下style。
最后效果如下：
在这里插入图片描述
代码修改部分如下：
UserProfilePosts.vue:

<template>
    <div class="card">
        <div class="card-body">
            <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>
.single-post{
    margin-bottom: 10px;
}
</style>

UserProfileView.vue:

<div class="col-9">
                <UserProfilePosts v-bind:posts="posts"/>
            </div>

setup(){
        const user = reactive({
            id: 1,
            username: "头发没了还会再长",
            lastName: "Y",
            firstName: "pp",
            followerCount: 1,
            is_followed: true,
        });
        const posts = reactive({
            count: 3,
            posts:[
                {
                id: 1,
                userId: 1,
                content: "尽人事，听天命",
                },
                {
                    id: 2,
                    userId: 2,
                    content: "不矜不伐缓缓书",
                },
                {
                    id: 3,
                    userId: 3,
                    content: "道阻且长，行则将至",
                },
            ]
        })
        const follow = () => {
            if(user.is_followed) return;
            user.is_followed=true
            user.followerCount++
        }
        const unfollow = () => {
            if(!user.is_followed) return;
            user.is_followed=false
            user.followerCount--
        }

        return{
            user,
            follow,
            unfollow,
            posts,
        }
    }
发帖模块的实现

发帖模块实现的功能是当编辑区的帖子编辑完点击发布按钮时，帖子能够显示在用户动态区域，要实现该功能，跟之前还是类似的，但是这次是将子组件的内容传递到父组件。由父组件将内容添加到另外一个组件的属性内。
要实现传递，首先应该获取到编辑区的内容才行，也就是动态获取，在vue里标签内使用v-model="xx"属性可以将该标签的内容和xx绑定起来。xx可以是定义在setup()里的属性。
获取到内容之后绑定事件函数，当点击发布按钮时应该将content触发父组件绑定的事件，将content添加到帖子列表里。所以给按钮绑定@click函数，该函数使用context.emit()触发父组件事件。
父组件事件被触发应该做的事情是增加帖子，所以被触发的事件要实现的功能是增加content到帖子列表。然后用@将该事件在父组件(UserProfileView)内绑定到要触发的子组件(UserProfileWrite)。
代码修改如下：
UserProfileView:

const post_a_post = (content) => {
            posts.count++;
            posts.posts.unshift({
                id: posts.count,
                userId: 1,
                content: content,
            })
        }
        
        return{
            user,
            follow,
            unfollow,
            posts,
            post_a_post
        }

UserProfileWrite:

<template>
    <div class="card edit-field">
        <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 @click="post_a_post" type="button" class="btn btn-success btn-sm">发布</button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';

export default{
    name: "UserProinfoWrite",
    setup(props, context){
        let content = ref('');
        const post_a_post = () => {
            context.emit('post_a_post', content.value);
            content.value = ""
        }
        return{
            content,
            post_a_post
        }
    }
}

</script>

<style>
.edit-field{
    margin-top: 20px;
}
button{
    margin-top: 10px;
}

</style>
Vue 3.0 企业级项目实战
sybh的博客
08-19 2582
Vue 3.0 + Element Plus + Spring Boot 企业级项目开发，升职加薪，快人一步。
Vue3实战商城后台管理系统开发
09-01
分享课程——Vue3实战商城后台管理系统开发，2022年完整版20章，附源码。 本季度基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的 <script setup> 语法，vuex4、Vue-router...
vue3实战
我的博客简介
01-07 1900
vite 基于浏览器原生ES imports的开发服务器，利用浏览器去解析imports，在服务器端按需编译返回，完全 跳过了打包这个概念，服务器随其随用 同时不仅有vue文件支持，还搞定了热更新，而且热更新的速度不会随着模块增加而变慢 使用vite创建vue项目 create-vite-app包 npm init @vitejs/app <project-name>//可以选择创建vue项目 也可以创建react项目 cd <project-name> npm install
Vue3项目实战开发
最新发布
2301_77577184的博客
09-13 2709
<h2>主页</h2> <p>{{ products }}</p> <button @click="changeProduct">修改</button>
Vue3 实战
qq_52922453的博客
09-14 3318
定义:- 渐进式 javascript 框架- 易用: html css javascript- 高效: 开发前端页面灵活 压缩之后 js 相对更小- 灵活: 开发灵活 多样性​# 总结vue 是一个 javascript 框架 作用: 简化页面中 js 操作bootstrap 框架 是一个 css 框架 作用: 美化页面​# 后端开发人员:1.为什么学习 Vue?===> Full Stack 全栈式开发工程师 前后端分离架构2.为什么是 Vue?===> 前后端分离 基础。
Vue3项目实战
qq_44930306的博客
08-24 1486
这章分享一下vue3语法在项目中的具体应用。
vue 3 项目实战
2401_83781937的博客
07-03 2370
本文记录了项目实现的详细步骤以及原理，十分适合初学vue的萌新练手，也是阶段性学习的一个总结，可能会有些啰嗦，勿怪~。先从登录界面开始，常规的登录界面不太好看，起不到复习巩固的作用，于是找到了下面这个。
vue项目实战Vue实战项目篇源码.zip
05-31
vue项目实战Vue实战项目篇源码.zip Vue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码.zipVue实战项目篇源码...
Vue3 源码实战课程下载（附源码）
11-07
Vue3 源码实战课程是专为开发者设计的学习资源，旨在帮助学员深入理解 Vue3 的核心机制，提升开发技能，并能够自定义实现类似功能。通过这个课程，你将有机会一窥 Vue3 的内部运作，从而更有效地优化应用性能，提高...
vue3实现WebRTC实战1v1通话
09-01
Vue3实现WebRTC实战1v1通话是一种在现代前端开发中构建实时通信应用的方法，它结合了Vue.js的组件化优势和WebRTC的实时通信能力。WebRTC（Web Real-Time Communication）是浏览器之间进行音视频通信的一套开放标准，...
vue项目实战 vue项目实战
01-20
vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战...
Vue3+Nuxt3实战在线教育SSR网站
03-24
Vue3+Nuxt3实战在线教育SSR网站基于Nuxt3搭建的页面
vue3核心技术实战第一版
04-13
本实战教程将深入探讨Vue3的核心技术，帮助开发者掌握这一前沿框架。 1. **基础篇** - **组件定义**：Vue3中的组件定义更简洁，引入了`defineComponent`函数，它允许更规范的组件定义，同时也支持用对象字面量定义...
Vue3+Vite+ElementPlus实战商城后台管理系统开发.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3源码实战 崔学社 实现mini-vue
11-13
vue3源码实战 崔学社 实现mini-vue
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
Vue 3 实战教程（快速入门）
wsl3465205046的博客
06-29 949
通过以上步骤，你已经快速了解了如何使用 Vue 3 和 TypeScript 创建一个简单的项目，包括组件创建、路由配置和状态管理。希望这个快速入门教程对你有所帮助，可以作为你进一步学习和使用 Vue 3 的基础。
Vue3实战教程（快速入门）
张伟的专栏
07-14 2233
本教程通过搭建一个简单项目，帮助读者快速入门Vue3项目实战，掌握Vue3、TS、Element Plus、axios等技术栈。推荐内容Vue3 和 Vue2 的几个明显的区别：（1）Vue2使用的选项式API，Vue3使用的是组合式API。前者随着项目页面体积的增大，对于代码的管理会给使用者带来更大的心智负担；后者组合式的写法，将data和methods等组合在一起，更容易理解和使用。不过对于初学者而言，可能会有些不太适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值