Vue核心代码

1 页面代码

路径：xxx/src/views/UserList.vue

1.1 html代码

template标签里内容，一般包括导航栏、搜索栏、数据列表、分页栏
注意：冒号开头的标签属性、v-model的标签属性可以直接引用javascript标签里data中定义的变量

<el-input v-model="formInline.username" placeholder="请输入用户名称"></el-input>
上面标签出现了v-model表示绑定了javascript标签里data中定义的变量formInline的username

<el-table size="small" :data="listData">
上面标签出现了冒号开头的标签属性 :data  表示将列表的数据绑定到了javascript标签里data中定义的变量listData

1.1.1 导航栏（面包屑）

/**
 * 用户管理菜单——用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    
   </div>
</template>
 

1.1.2 搜索栏（条件查询）

/**
 * 用户管理菜单——用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">