【Vue】高级系列（四）Vue模块化实战-demo1-动态评价页面

最新推荐文章于 2024-07-15 15:03:26 发布

YK菌

最新推荐文章于 2024-07-15 15:03:26 发布

阅读量2.1k

点赞数

分类专栏：前端框架Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44972008/article/details/113487414

版权

本文详细介绍了如何使用Vue进行模块化实战，通过动态组件实现一个评论页面。内容包括目标功能界面的设计，界面模块拆分，主页index.html的创建，静态页面的搭建，以及动态显示初始化数据和动态交互功能的实现，如添加和删除评论操作。

摘要由CSDN通过智能技术生成

1. 目标功能界面

在这里插入图片描述
项目代码：https://github.com/yk2012/vue_demo/tree/main/demo2_Comments

2. 界面模块拆分

在这里插入图片描述

3. 主页 index.html

在head标签里引入bootstrap.css文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_demo</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4. 静态页面搭建

4.1 main.js

打包入口js文件，后期全部打包形成一个app.js在主页index.html中

import Vue from 'vue'
import App from './App.vue'

new Vue({
   
    el: '#app',
    components: {
   
        App
    },
    template: '<App/>'
})

4.2 App.vue

引入标签 import
映射组件标签 components
使用组件标签

<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <!-- *3* 使用组件标签 -->
      <Add />
      <List />
    </div>
  </div>
</template>

<script>
<script>
  // *1* 引入组件
  import Add from './components/Add'
  import List from './components/List'

  export default {
     
    // *2* 映射组件标签
    components: {
     
      Add,
      List
    }
  }
</script>
</script>

<style>

</style>

4.3 Add.vue

<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容"></textarea