简单命名规则

<template>
  <!-- 用于最外层 -->
  <div class="conten_wrap">
    <!-- 顶部导航 -->
    <div class="Nav">
      <li>首页</li>
      <li>模块1</li>
      <li>模块2</li>
      <li>关于我们</li>
    </div>

    <!-- 顶部图片轮播 -->
    <div class="banner_top">
      顶部轮播
    </div>

    <!-- 子模块1---左右布局 -->
    <div class="xxxx_box">
      <!-- 用于左右中的 左布局 -->
      <div class="side_l">
        <!-- 用于tab切换 -->
        <div class="tabs_top"></div>

        <!-- 图片命名 -->
        <img class="cover" src="" alt="">
      </div>
      <!-- 用于左右中的 右布局 -->
      <div class="side_r"></div>
    </div>

    <!-- 子模块2---列表布局 -->
    <div class="xxxx_box">
      <!-- for循环遍历 -->
      <ul class="list_ul">
        <li class="item_Li"></li>
      </ul>
    </div>

    <!-- 子模块3---内部细分布局 -->
    <div class="xxxx_box">
      <div class="xxx_inner">
        <span class="titleH4">标题</span>
        <span class="source">来源</span>
        <span class="info">详情</span>
        <span class="more">更多</span>
        <span class="tag">标签</span>
        <span class="time">时间</span>
        <span class="name">名称</span>
      </div>
    </div>

    <!-- 页面底部信息 -->
    <div class="Foo">

    </div>
  </div>
</template>

<script>
export default {
  // 可用组件的哈希表
  components: {},
  // 接收传值
  props: {},
  // 数据对象
  data () {
    return {
      xxxIndex: 0,  // for循环下标索引
      xxxxFormData:[],  // 表单列表数组
      xxxxData:[], // 列表数组
      isXxxxShow:false,  //控制某个元素显示隐藏
      isXxxxVisible:false,  //控制弹出显示隐藏
      xxxArry: [],  //自定义数组
      xxxId:'', // 全局id
      xxxCode: '', //全局code
      queryInfo:{  // 用于接口查询
        title:'',
        name:'',
        pageIndex:1,
        pageSize:10,
      },
      formInfo:{  // 用于表单数据绑定
        title:'',
        name:'',
        pageIndex:1,
        pageSize:10,
      },
      xxxUrl: '', //路径
    }
  },
  // 事件处理器
  methods: {
    // 某个点击触发事件
    onXxxxClick(){

    },
    // 保存/修改
    onSave(){
      
    },
    // 移除事件
    onRemove(){

    },
    // 添加事件
    addXxxFrom(){

    },
    // 跳转页面
    toOtherPage(){

    },
    // 获取某表单列表数据
    getXxxxxFromList(){

    },
    // 获取某表单列表数量
    getXxxxFormCount(){

    },
    // 往变量里赋值
    setXxxx(){

    }
  },
  // 生命周期-实例创建完成后调用
  created () { },
  // 生命周期-实例挂载后调用
  mounted () { },
  // 生命周期-实例销毁离开后调用
  destroyed () { },
  // 计算属性监听
  computed: {},
  // 自定义的侦听器
  watch: {}
}
</script>

<style lang="less" scoped></style>