游戏陪玩平台源码，组件结构化的实现

游戏陪玩平台源码，组件结构化的实现

按照一定的结构组织，使得组件便于理解。 vue 组件里，根据其生命周期依次组织代码。执行顺序：name>mixins>props>data>computed>components>watch>methods>created>mounted>unmounted

 <template>
      <div class="wrapper"></div>
    </template>
    <script>
    import HelloWorld from './components/helloworld.vue';

    export default {
      name: 'LayoutDefault',
      mixins: [],
      props: {},
      data() {
        return {
          leftDrawerOpen: false,
        };
      },
      computed: {},
      components: {
        HelloWorld,
      },
      watch: {},
      methods: {
        // 获取初始化数据
        getInitData() {},
        // 新增功能
        handleAdd() {},
        // 监听删除
        onDelete() {},
        /**
         * 监听input值变化
         * @param val String input输入值
         * @param oldVal String input原来旧值
         * */ 
        onInputChangeVal(val, oldVal) {}
      },
      created() {},
      mounted() {},
      unmounted() {},
    };
    </script>
    <style lang="scss" scoped></style>

 

1、使用单文件 .vue 文件格式来组件代码, 即 HTML,js,css 同一个文件内。

2、按首字母排序 properties, data, computed, watch 和 methods 使得这些对象内的属性便于查找。

3、一个清晰、组织有序的组件，使得组件易于阅读和理解。(name; extends; props, data and computed; components; watch and methods; lifecycle methods 等.);

4、合理的 CSS 结构，这里采用 BEM 规则，便于模块化、可复用， 可以提供给我们优良的代码结构和易于识别的术语。请使用纯小写字母或小写字母和下划线组合。 BEM规则: block_element–modifier语法

5、js变量和事件方法命名请使用小驼峰命名。
js事件方法名，多以动词命名, 且选取有意义的词, 并写清必要的注释, 如上所示。

以上就是游戏陪玩平台源码，组件结构化的实现， 更多内容欢迎关注之后的文章