Vue-个人空间项目-上

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

编程就像学游泳，读了再多理论，不下水永远学不会。
编程就像学开车，初级程序猿的我，不需要理解发动机的原理，只需要先熟练掌握驾校的内容。
这个项目第一次学感觉挺懵逼的，但是做下来感觉就是对vue的使用更加熟练了哈哈，就计划着不断回放，返回看，反复做。

网页结构

  • navbar（导航栏，位于页面上方）
  • content（内容，位于导航栏下方）：包含如下组件，其中每个组件可以继续由若干组件组成。每个组件对应一个页面
    • 首页
    • 好友列表
    • 好友动态
    • 登录
    • 注册
    • 404

Vue知识点（边做项目边积累ing）

script部分

export default对象的属性：

  • name：组件的名称
  • components：存储<template>中用到的所有组件
  • props：存储父组件传递给子组件的数据
  • watch()：当某个数据发生变化时触发
  • computed：动态计算某个数据（比如用于：动态计算粉丝数量）
  • setup(props,context)：初始化变量、函数（可以在setup函数里面定义一堆变量）
    • ref定义变量，可以接受对象和普通变量类型，可以用.value属性重新赋值（变量需要重新赋值的时候使用）
    • reactive({})定义对象，只可以接受对象，不可重新赋值（变量不需要重新赋值的时候使用，效率比ref高）
    • props存储父组件传递过来的数据
    • context.emit()：触发父组件绑定的函数

template部分

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

style部分

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

第三方组件

项目实现

初始化项目

  • 删除HelloWorld.vue并将HomeView.vue中的引入组件标签删除image.pngimage.png
  • 删除AboutView.vue,并将router中对应的地址删除。image.png
  • 将componts中的内容清空image.png
  • 最后展示image.png

导航栏组件的实现

components包下创建并编写NavBar.vue,然后到App.vue中引入,下面分别为其代码。

<template>
<!-- 写入导航栏的html，这里可以使用bootstrap，要先去main.js中引入bootstrap,到bootstrap复制代码到这里-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <!-- class="container-fluid"表示靠两边一些 去掉fluid则整体居中一些-->
  <div class="container">
    <!-- 修改名字 -->
    <a class="navbar-brand" href="#">Myspace</a>
    <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">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">好友列表</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">用户动态</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">登录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">注册</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

<script>
//写好之后，需要将他export出去
export default{
    name: "NavBar",
}
</script>

<style scoped>

</style>

<template>
  <!-- 导航栏 -->
  <NavBar />
  <!-- 内容：分页展示 -->
  <router-view/>
</template>
<script>
// 引入bootstrap脚本和样式
// 引入样式
import 'bootstrap/dist/css/bootstrap.css';
//引入脚本
import 'bootstrap/dist/js/bootstrap';
//每一个组件都会展示导航栏，所以将其引入到根组件
import NavBar from "./components/NavBar.vue";
export default{
  name: "App",
  components: {
    NavBar
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

bootstrap地址，搜索NavBar，选择一个合适的导航栏！
image.png
最终效果image.png

实现内容组件

使用bootstrap中的cards组件，将所有模块用一个框括起来，这样更加美观一点。

<template>
  <!-- class="container"用来调整中间内容区域的大小 -->
  <div class="container">
    <div class="home" >
     <div class="card">
       <div class="card-body" >
          首页
       </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {

  }
}
</script>

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

image.png
当出现多个组件由重复代码的时候，将公共的部分用一个组件来表示，这样做的好处是，方便整体修改。

<template>
<!-- 存储所有的html -->
<!-- class="container"用来调整中间内容区域的大小 -->
<div class="container">
    <div class="home" >
     <div class="card">
       <div class="card-body" >
        <!-- 获取组件元素 -->
          <slot></slot>
       </div>
    </div>
  </div>
  </div>
</template>

<script>
// 存储所有的脚本
export default{
    name: "ContentBase"
}
</script>

<style scoped>
/* 存储所有的样式 */
</style>



<template>
  <!-- class="container"用来调整中间内容区域的大小 -->
  <!-- 公共的部分用组件表示 -->
  <ContentBase>
    首页
  </ContentBase>
</template>

<script>
// 引入组件
import ContentBase from '../components/ContentBase.vue';
export default {
  name: 'HomeView',
  components: {
    ContentBase,
  }
}
</script>

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

image.png

实现路由（根据地址显示内容组件的页面）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import UserList from '@/views/UserListView.vue';
import LoginView from '@/views/LoginView.vue';
import NotFoundView from '@/views/NotFoundView.vue';
import RegisterView from '@/views/RegisterView.vue';
import Userprofile from '@/views/Userprofile.vue';
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/userlist',
    name: 'userlist',
    component: UserList
  },
  {
    path: '/login',
    name: 'loginview',
    component: LoginView
  },
  {
    path: '/notfound',
    name: 'notfoundview',
    component: NotFoundView
  },
  {
    path: '/register',
    name: 'registerview',
    component: RegisterView
  },
  {
    path: '/userprofile',
    name: 'userprofile',
    component: Userprofile
  },

]

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

export default router

image.png
image.png
以上实现了修改导航栏，跳转到指定页面。接下来实现前端渲染。

前端渲染的理解

前端渲染是指在浏览器中使用JavaScript来动态生成页面内容的过程。通过前端渲染，可以实现更快的页面加载速度和更流畅的用户体验。
关于前端渲染的一些常见技术包括：

  1. 基于HTML模板的渲染：使用模板引擎如Handlebars、Mustache等来生成HTML页面。
  2. 基于组件的渲染：使用框架如React、Vue.js等来构建组件化的页面结构。
  3. 服务端渲染(SSR)：在服务器端生成页面内容，减少客户端渲染的负担。

<router-link class="navbar-brand" :to="{name: 'home'}">Myspace</router-link>通过:to="{name: 'home'}"来进行绑定
image.png

<template>
<!-- 写入导航栏的html，这里可以使用bootstrap，要先去main.js中引入bootstrap,到bootstrap复制代码到这里-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <!-- class="container-fluid"表示靠两边一些 去掉fluid则整体居中一些-->
  <div class="container">
    <!-- 修改名字 -->
    <!-- <a class="navbar-brand" href="#">Myspace</a> -->
    <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="navbar-brand" :to="{name: 'home'}">首页</router-link>
        </li>
        <li class="nav-item">
          <router-link class="navbar-brand" :to="{name: 'userlist'}">好友列表</router-link>
        </li>
        <li class="nav-item">
          <router-link class="navbar-brand" :to="{name: 'userprofile'}">用户动态</router-link>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link class="navbar-brand" :to="{name: 'loginview'}">登录</router-link>
        </li>
        <li class="nav-item">
          <router-link class="navbar-brand" :to="{name: 'registerview'}">注册</router-link>

        </li>
      </ul>
    </div>
  </div>
</nav>
</template>

<script>
//写好之后，需要将他export出去
export default{
    name: "NavBar",
}
</script>

<style scoped>

</style>

image.png

用户动态页面的具体实现

构思用户动态包含的模块,并在components包下创建组件

  • UserProfileInfo.vue：展示信息
  • UserProfilePosts.vue：展示这个用户历史上发过的所有帖子
  • UserProfileWriter.vue：用来动态发帖子
利用grid来实现整体页面布局，到bootstrap官网输入gird
在UserProfile.vue（总页面，包含上面三个组件，每个小组件又可以细分）中设置布局，存储数据
<template>
    <!-- class="container"用来调整中间内容区域的大小 -->
    <!-- 公共的部分用组件表示 -->
    <ContentBase>
      <!-- contentBase中包含Container -->
      <div class="row">
        <div class="col-3">
          用户信息
        </div>
        <div class="col-9">
          帖子列表
        </div>
      </div>
    </ContentBase>
  </template>

image.png

实现UserProfileInfo.vue，内部细分仍然使用grid来实现
  • 在bootstrap中搜索images，添加元素img-fluid完成<img class="img-fluid" src="https://cdn.acwing.com/media/user/profile/photo/142094_lg_26e65f985c.jpg" alt=" ">,这样图片就会自适应大小，
  • 如何将图片变成圆形，添加css样式
<style scoped>
    img {
       border-radius: 50%;
    }
</style>
  • 在写另半边
    • 用户名
    • 粉丝
    • 关注按钮

完整代码：

<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/142094_lg_26e65f985c.jpg" alt=" ">
        </div>
        <div class="col-9">
            <div class="username">Han xuewei</div>
            <div class="fans">粉丝：123</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;
        color: gray;
    }
    button {
        padding: 2px 4px;
        font-size: 12px;
    }
</style>

image.png

在Userprofile中存储数据
<template>
    <!-- class="container"用来调整中间内容区域的大小 -->
    <!-- 公共的部分用组件表示 -->
    <ContentBase>
      <!-- contentBase中包含Container -->
      <div class="row">
        <div class="col-3">
          <UserProfileInfo/>
        </div>
        <div class="col-9">
          <UserProfilePosts/>
        </div>
      </div>
    </ContentBase>
  </template>
  
  <script>
  // 引入组件
  import UserProfilePosts from '@/components/UserProfilePosts.vue';
  import ContentBase from '../components/ContentBase.vue';
  import UserProfileInfo from '@/components/UserProfileInfo.vue';
  import { reactive } from 'vue';
  export default {
    name: 'UserProfile',
    components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
    },
    /* setup是一个函数，用来定义许多变量的
       可以简写：
       setup（）{

       }
    */
    setup: ()=> {
        // 定义user变量,当前页面的用户一般不会改变
         const user = reactive({
          //里面定义一些变量信息
           id: 1,
           username: "hanxuewei",
           lastName: "han",
           firstName: "xuewei",
           //存储是否关注当前主页对象，没有关注的状态才可以关注
           is_followed: false,
         })

        //  未来在template中用到的值都需要return出去
         return {
          user : user,
         }
    }
  }
  
  </script>
  <style scoped>
  .container{
    margin-top: 20px;
  }
  </style>
实现组件之间的数据传递
  • 父组件传递给子组件信息是通过props组件实现。
  • 子组件传递给父组件信息是通过调用函数（事件）的方式实现

传user
image.png
父组件代码

<template>
    <!-- class="container"用来调整中间内容区域的大小 -->
    <!-- 公共的部分用组件表示 -->
    <ContentBase>
      <!-- contentBase中包含Container -->
      <div class="row">
        <div class="col-3">
          <!-- 子组件向父组件传递信息需要绑定事件 follow事件触发调用follow函数，unfollow事件触发调用unfollow函数-->
          <UserProfileInfo @follow="follow" @unfollow="unfollow" :user = "user"/>
        </div>
        <div class="col-9">
          <UserProfilePosts/>
        </div>
      </div>
    </ContentBase>
  </template>
  
  <script>
  // 引入组件
  import UserProfilePosts from '@/components/UserProfilePosts.vue';
  import ContentBase from '../components/ContentBase.vue';
  import UserProfileInfo from '@/components/UserProfileInfo.vue';
  import { reactive } from 'vue';
  export default {
    name: 'UserProfile',
    components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
    },
    /* setup是一个函数，用来定义许多变量的
       可以简写：
       setup（）{
       }
    */
    setup: ()=> {
        // 定义user变量,当前页面的用户一般不会改变
         const user = reactive({
          //里面定义一些变量信息
           id: 1,
           username: "hanxuewei",
           lastName: "han",
           firstName: "xuewei",
           //粉丝数
           followerCount: 0,
           //存储是否关注当前主页对象，没有关注的状态才可以关注
           is_followed: false,
         });
         //关注函数
        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 --;
         }
        //  未来在template中用到的值都需要return出去
         return {
          user : user,
          follow,
          unfollow,
         }
    }
  }
  </script>
  <style scoped>
  .container{
    margin-top: 20px;
  }
  </style>

子组件代码

<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/142094_lg_26e65f985c.jpg" alt=" ">
        </div>
        <div class="col-9">
            <!-- 全名是组合而成的 -->
            <div class="username">{{ fullName }}</div>
            <div class="fans">粉丝：{{ user.followerCount }}</div>
            <!-- 使用标签 v-if -->
            <!-- 绑定函数标签：@click -->
            <button @click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">+关注</button>
            <button @click="unfollow" v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">已关注</button>
        </div>
    </div>
        </div>
    </div>
</template>

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

export default{
    name: "UserProfileInfo",
    //子组件希望接收父组件传递过来的一些参数，需要将接收的参数放到pops里面
    props: {
        user: {
            type: Object,
            required: true,
        },
    },
    //全名可以动态修改，当lastname和firstname变化，全面会动态变化
    setup(props,context){
        let fullName = computed(() => props.user.lastName + ' ' + props.user.firstName);
        //关注函数
        const follow = () => {
            // 触发父组件的时间表
            context.emit('follow');
        }
        const unfollow = () => {
            context.emit("unfollow");
        }
        //一定要记得返回
        return{
            fullName,
            follow,
            unfollow,
        }
    }
}
</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>

image.png
image.png

实现帖子列表UserProfilePosts.vue
<template>
    <!-- class="container"用来调整中间内容区域的大小 -->
    <!-- 公共的部分用组件表示 -->
    <ContentBase>
      <!-- contentBase中包含Container -->
      <div class="row">
        <div class="col-3">
          <!-- 子组件向父组件传递信息需要绑定事件 follow事件触发调用follow函数，unfollow事件触发调用unfollow函数-->
          <UserProfileInfo @follow="follow" @unfollow="unfollow" :user = "user"/>
        </div>
        <div class="col-9">
          <UserProfilePosts :posts="posts"/>
        </div>
      </div>
    </ContentBase>
  </template>
  
  <script>
  // 引入组件
  import UserProfilePosts from '@/components/UserProfilePosts.vue';
  import ContentBase from '../components/ContentBase.vue';
  import UserProfileInfo from '@/components/UserProfileInfo.vue';
  import { reactive } from 'vue';
  export default {
    name: 'UserProfile',
    components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
    },
    /* setup是一个函数，用来定义许多变量的
       可以简写：
       setup（）{
       }
    */
    setup: ()=> {
        // 定义user变量,当前页面的用户一般不会改变
         const user = reactive({
          //里面定义一些变量信息
           id: 1,
           username: "hanxuewei",
           lastName: "han",
           firstName: "xuewei",
           //粉丝数
           followerCount: 0,
           //存储是否关注当前主页对象，没有关注的状态才可以关注
           is_followed: false,
         });
         //帖子
         const posts = reactive({
            count: 3,
            posts: [
              {
                id: 1,
                userId: 1,
                content: "今天上了web课 真开心"
              },
              {
                id: 2,
                userId: 2,
                content: "今天上了算法课 更开心了"
              },
              {
                id: 3,
                userId: 3,
                content: "今天上了Acwing 开心极了"
              },
            ]

         });
         //关注函数
        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 --;
         }
        //  未来在template中用到的值都需要return出去
         return {
          user : user,
          follow,
          unfollow,
          posts : posts,
         }
    }
  }
  </script>
  <style scoped>
  .container{
    margin-top: 20px;
  }
  </style>

<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 scoped>
.single-post{
    margin-top: 10px;
}
</style>

image.png

实现发帖UserProfileWriter.vue

实现过程：输入内容，点击发帖，子组件中触发<button @click="post_a_post" type="button" class="btn btn-primary btn-sm" >发帖</button>中post_a_post函数，这个函数中通过 context.emit('post_a_post',content.value);会触发父组件中的post_a_post函数，这个函数就会更新posts，就会重新渲染一遍UserProfilePost.vue组件。
父组件：

<template>
    <!-- class="container"用来调整中间内容区域的大小 -->
    <!-- 公共的部分用组件表示 -->
    <ContentBase>
      <!-- contentBase中包含Container -->
      <div class="row">
        <div class="col-3">
          <!-- 子组件向父组件传递信息需要绑定事件 follow事件触发调用follow函数，unfollow事件触发调用unfollow函数-->
          <UserProfileInfo @follow="follow" @unfollow="unfollow" :user = "user"/>
          <UserProfileWriter @post_a_post="post_a_post" />
        </div>
        <div class="col-9">
          <!-- 将函数绑定为一个事件 -->
          <UserProfilePosts :posts="posts"/>
        </div>
      </div>
    </ContentBase>
  </template>
  
  <script>
  // 引入组件
  import UserProfilePosts from '@/components/UserProfilePosts.vue';
  import ContentBase from '../components/ContentBase.vue';
  import UserProfileInfo from '@/components/UserProfileInfo.vue';
  import UserProfileWriter from '@/components/UserProfileWriter.vue';
  import { reactive } from 'vue';
  export default {
    name: 'UserProfile',
    components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
      UserProfileWriter,
    },
    /* setup是一个函数，用来定义许多变量的
       可以简写：
       setup（）{
       }
    */
    setup: ()=> {
        // 定义user变量,当前页面的用户一般不会改变
         const user = reactive({
          //里面定义一些变量信息
           id: 1,
           username: "hanxuewei",
           lastName: "han",
           firstName: "xuewei",
           //粉丝数
           followerCount: 0,
           //存储是否关注当前主页对象，没有关注的状态才可以关注
           is_followed: false,
         });
         //帖子
         const posts = reactive({
            count: 3,
            posts: [
              {
                id: 1,
                userId: 1,
                content: "今天上了web课 真开心"
              },
              {
                id: 2,
                userId: 2,
                content: "今天上了算法课 更开心了"
              },
              {
                id: 3,
                userId: 3,
                content: "今天上了Acwing 开心极了"
              },
            ]

         });
         //关注函数
        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 --;
         }
         //传送帖子的内容
         const post_a_post = (content) => {
            posts.count++;//帖子数量+1
            posts.posts.unshift({
                id: posts.count,
                userId: 1,
                content: content,
            })//最新的在最上面，这个函数记忆一下
         };
        //  未来在template中用到的值都需要return出去
         return {
          user : user,
          follow,
          unfollow,
          posts : posts,
          post_a_post,
         }
    }
  }
  </script>
  <style scoped>
  .container{
    margin-top: 20px;
  }
  </style>

子组件：

<template>
    <div class="card edit-field">
        <div class="card-body">
            <!-- bootstrap中的form中寻找 -->
            <label for="exampleFormControlTextarea1" class="form-label">编辑</label>
            <!-- 让编辑区的内容和content绑定起来，也就是说{{ content }}显示的内容就是编辑区里面输入的内容 -->
            <textarea v-model="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            <!-- bootstrap中的botton中寻找一个喜欢的按钮样式 -->
            <button @click="post_a_post" type="button" class="btn btn-primary btn-sm" >发帖</button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    name: "UserProfileWriter",
    // 实现发帖的功能
    setup(props,context) {
        let content = ref('');
        
        // 定义一个click函数
        const post_a_post = () => {
            // context.emit触犯父组件
            context.emit('post_a_post',content.value);
            //想要取ref的值，一定要使用value，控制调试
            // console.log(content.value);
            //将内容清空
            content.value="";
        }
        return{
            content,
            post_a_post,
        }
    }
}
</script>

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

image.png

爱敲代码的憨仔
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue总结
weixin_30919919的博客
03-27 89
1. vue1.x 到 vue2.x部分区别 1. cli --inline被默认开启 2. contentBase 换成 proxy 3. 减少控制台无用输出 比如断开服务器 1.x输出错误信息 2.x输出disconnected 4. 2.0不能以body 和 html 为挂载点 使用vue自己的$mount手动挂载 1.0挂载点方...
Web学习（十一） Vue
May the Force be with you
08-01 1537
解决方案用管理员身份打开终端，输入set-ExecutionPolicyRemoteSigned，然后输入y。将NavBar中a标签全部换为router-link,在页面的NavBar上实现链接的跳转。常见问题1Windows上运行vue，提示无法加载文件，表示用户权限不足。添加路由后已经可以按网址目录实现网页的跳转。在App.vue中添加需要导入的包。在输入栏找到运行地址后打开网页。安装插件后，启动项目。............
Vue项目中，对于index.html中BASE_URL的配置
wanghuan1020的博客
09-11 2万+
Vue项目中，对于index.html中BASE_URL的配置问题解决 问题 有时候后端配置资源的默认访问路径的时候，可能会与前端打包时配置的默认根路径有所差异 比如：后端要访问静态资源的根路径为/static，而一般情况下，我们项目的vue.config.js中对BAES_URL的配置是/，或者不做配置，因为它默认的值也是/ 这个路径决定了我们的前端项目打包后获取静态资源的默认的根路径（不显示在代码中），同时，这个路径也在public/index.html中有明显的引用，大多时候都会看到如下的代码：
vue中非父子组件通信
weixin_47450807的博客
02-08 2495
在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。 如果存在祖孙组件，我们可以通过Provide和Inject进行通信。 如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。 一、Provide和Inject Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传
webpack中的path、publicPath、contentBase的区分
青天诀的专栏
10-23 6498
output.publicPath &amp;amp;amp; devServer.publicPath output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀； devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是output里面设置的publicPath的值）； 两...
vue-layout-diy:基于vue和flex的自定义布局
05-16
使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码...
vue-tree-navigation:需要一个新的维护者！ 带有vue-router支持的Vue.js 2树导航
05-17
由于各种个人原因，我没有足够的时间来长时间维护该项目，因为我一直专注于一个与我的内心非常接近的开源项目 。 仍有很大的增长空间，如果图书馆得到应有的照顾，那就太好了。 这就是为什么我决定寻找一个新的...
vue-knowledge-synergy
03-16
虚拟知识协同 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 自定义配置 ...个人空间 待办事项 想法速记 任务统计 个人贡献 消息管理 群聊 私聊 公告 用户设
vue-express-mongo-boilerplate：MEVN具有NodeJS，Express，Mongo和VueJS的全栈JS Web应用程序样板
02-03
这只是我的个人样板，可能适合您的项目，也可能不合适。 受和启发 如果您喜欢我的工作，请。 谢谢！ （登录：test / test1234或注册） 产品特点 服务器端 v10.xx 与 与SMTP，MailGun或SendGrid + 6运输 带有 ...
solid-vue-panes:PoPock将您的Solid POD放入口袋，请参阅https
05-12
Tim Berners Lee的Solid1项目旨在为每个人提供带有LDP2（链接数据平台）容器的个人存储空间。 用户可以在其中存储任何类型的文件，特别是以乌龟格式的三元组形式存储结构化信息。 这些存储空间称为POD（个人在线...
7、publicPath、contentBase的配置
weixin_34233679的博客
04-12 273
2019独角兽企业重金招聘Python工程师标准>>> ...
关于使用content-base出错的问题
tsang荒男的博客
06-06 1150
关于使用content-base出错的问题 问题：执行 npm run dev的时候 “dev”: “webpack-dev-server --open --port 3000 --content-base src --hot” 出错 解决方案：在新版本的 webpack-dev-server 中，因为取消了 content-base 参数，所以把 content-base src删掉就行，或...
Vue详解知识概括
begefefsef的博客
07-31 654
我们在html文件上输入【!】叹号(在英文状态下)，然后按键盘的【Tab】键，只有在这种情况下按住Tab键可以快速创建一个html模板。代码缩进时只缩进两个空格。开发快捷键①Ctrl+p查找文件全局搜索字符串③Ctrl+j切换终端④Ctrl+b显示/隐藏左侧目录栏显示所有命令⑥拆分当前编辑窗口Ctrl+，Ctrl+1234等在编辑窗口间切换⑦选中方法名->Shift+F12，选中方法名->鼠标右键插件src目录分析②。...
webpack配置文件中publicPath和contentBase傻傻分不清
热门推荐
wang839305939的博客
01-09 2万+
搞清楚webpack配置文件中publicPath和contentBase的作用 ...
Vue开发入门
chendu98的博客
10-26 209
介绍 Vue 中文网 Vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 Framework 框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 框
Vue3 学习——基础知识学习与项目实操
敲代码的小李同学的博客
07-15 821
Vue 基础学习与项目实操。包括创建 Vue 组件、实现各组件间交互、路由跳转等基础 Vue 知识的介绍与实现。
[Vue-常见错误]浏览器显示Uncaught runtime errors
最新发布
一个喜欢什么都研究一下的小小后端程序员
06-09 353
在vue.config.js中配置关闭Uncaught runtime errors显示。
Spring Boot、MongoDB、Vue 2和Nginx实现一个小说网站
iku_n的博客
06-08 1296
后端API：使用Spring Boot实现，负责处理数据和业务逻辑。数据库：使用MongoDB存储小说数据。前端页面：使用Vue 2实现，负责展示数据和用户交互。反向代理：使用Nginx进行前后端分离。
vue-cli创建项目
05-30
要使用vue-cli创建项目，你需要先安装Node.js和npm，然后使用npm安装vue-cli。以下是创建Vue项目的步骤： 1. 打开终端并输入以下命令来安装vue-cli：`npm install -g vue-cli` 2. 创建一个新的Vue项目，可以使用以下命令：`vue create my-project`。这将提示你选择一个预设配置，你可以选择手动配置或使用默认配置。 3. 进入到项目目录，使用以下命令来启动开发服务器：`npm run serve`。这将启动一个本地开发服务器，你可以在浏览器中访问http://localhost:8080来查看你的应用程序。 4. 编辑你的代码并保存，你将会看到浏览器自动刷新并显示你的更改。 以上是使用vue-cli快速创建一个Vue项目的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值