vue组件化开发之划分组件

最新推荐文章于 2023-02-24 17:04:03 发布

牛先森家的牛奶

最新推荐文章于 2023-02-24 17:04:03 发布

阅读量302

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42681295/article/details/108009577

版权

Vue 专栏收录该内容

120 篇文章 5 订阅

订阅专栏

组件化之后台管理系统（仅仅为了划分组件用，功能暂未实现）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件开发</title>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
  <script src="../js/vue.js"></script>
</head>

<body>
  <div class="container">
    <h2>组件</h2>
    <div id="app">
      <div class="row">
        <div class="col-sm-3">
          <!-- 对应组件模板 mainMenu -->
          <main-Menu></main-Menu>
        </div>
        <div class="col-sm-9">
          <!-- 对应组件模板 mianContent -->
          <main-content></main-content>
          <!-- <main-content></main-content> -->
        </div>
      </div>
    </div>
  </div>

  <!-- 组件模板 mainMenu  -->
  <template id="mainMenu">
    <ul class="list-group list-group-flush">
      <li class="list-group-item list-group-item-action" v-for="item in menu">
        <a :href="item.path">{{item.text}}</a>
      </li>
    </ul>
  </template>

  <!-- 组件模板 mainContent  -->
  <template id="mainContent">
    <div class="container-fluid">
      <div>后台管理系统</div>
      <!-- 这里是局部组件，写在组件模板 mainContent 里面 而不是 写在上面 vm挂载的el中app 里面-->
      <user />
    </div>
  </template>

  <!-- 组件模板 user -->
  <template id="user">
    <table class="table table-striped table-hover" style="width:100%">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">用户名</th>
          <th scope="col">年龄</th>
          <th scope="col">性别</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item,idx in datalist">
          <td>{{idx + 1}}</td>
          <td>{{item.username}}</td>
          <td>{{item.age===undefined ? 18:item.age}}</td>
          <td>{{item.gender ? item.gender : '未知'}}</td>
          <td>
            <div class="btn-group btn-group-sm">
              <button class="btn btn-success">编辑</button>
              <button class="btn btn-danger" @click="removeItem(item._id)">删除</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </template>


  <script>
    /**
      * 组件  (组件就是一个封装了具有某些功能的自定义标签 (创建一个标签) )
        > 一个组件也是一个Vue实例
        * 全局组件: Vue.component(name,options) 在任何地方都能使用
          * name: 组件名
          * options: 组件配置
        * 局部组件：components 只有在特定位置使用

      * 组件的使用: 不能有大写 注意: 有需要用连字符连接  main-Menu 、main-content

      * 组件模板中注意点 : 
        * template 里面 只能有一个根元素 两个同级元素会报错 
        * vm实例中， 如不配置tempalte,Vue会把el所在的元素的outerHTML当做template
    */
    const user = {
      template: '#user',
      //这里的data必须是函数
      data() {
        return {
          datalist: [
            { "_id": "5f2d1deec24a6d73484352a5", "username": "fqniu", "password": "0847c487af6ee0236110330d2c2b9ae6", "age": "20", "gender": "男", "avatarUrl": "/uploads/avatar-1597216066044.jpg" },
            { "_id": "5f338ee11860ab4560d790fb", "username": "niuniu", "password": "4bd6fb9802874037077ec81d248aba8c", "avatarUrl": "/uploads/avatar-1597215932948.png" },
            { "_id": "5f338f071860ab4560d790fc", "username": "xiaoniuniu", "password": "0847c487af6ee0236110330d2c2b9ae6", "avatarUrl": "/uploads/avatar-1597216026531.png" }
          ]
        }
      },
      methods: {
      //根据传入id 参数来删除哪条数据
        removeItem(id) {
          this.datalist = this.datalist.filter(item => item._id !== id)
        }
      }
    }

    // 全局组件 mainContent
    Vue.component('mainContent', {
      // 模板
      template: '#mainContent',
      //这里的data必须是函数 还有return 一个对象
      data() {
        return {}
      },
      // 定义局部组件
      components: {
        user
      }
    })

    // 全局组件 mainMenu
    Vue.component('mainMenu', {
      // 模板
      template: '#mainMenu',
      // data 必须是函数 还有return 一个对象
      data: function () {
        return {
          name: '后台管理系统',
          menu: [{
            text: '首页',
            path: 'index.html'
          }, {
            text: '用户管理',
            path: 'manage/user.html'
          }, {
            text: '商品管理',
            path: 'manage/goods.html'
          }, {
            text: '订单管理',
            path: 'manage/order.html'
          }]
        }
      }
    })

    const vm = new Vue({
      el: '#app',
      data: {
        name: 'app_fqniu'
      }
    })
  </script>
</body>

</html>