天下无坑

天下无坑


vue组件开发规范

遵照ydui的组件结构 [ydui](https://github.com/ydcss/vue-ydui/tree/master/src/components "ydui")

组件文件结构

/src/components/COMPNAME/
/src/components/COMPNAME/index.js
/src/components/COMPNAME/src/COMPNAME.vue
/src/components/COMPNAME/src/OTHENAME.vue
/src/components/styles/COMPNAME.less[css]

<style lang="less">
    @import '../styles/COMPNAME.less';
</style>

<template>
    <div :right="right">
    {{ msg }}
    </div>
</template>

<script type="text/babel">
    // import {OTHENAME} from './OTHENAME';
    export default {
        name: 'COMPNAME',
        components: {},
        // 组件内部属性
        data() {
            return {
                msg: 'hello'
            }
        },
        // 接收来自父组件的属性
        props: {
            right: {
                type: String,
                default: '5%'
            },
        },
         // 计算属性 会缓存 多个值影响一个值
         // 默认只读,可通过声明setter,getter实现可读可写
        computed:{

        },

        // 侦听器 不缓存,一个值影响多个值,可以侦听 data、props、computed、$emit
        watch:{

        },
        methods: {
            someMethod() {

            },
        },
        //...其他钩子函数
    }
</script>

[1]: https://github.com/ydcss/vue-ydui/tree/master/src/components "ydui"

页面列表

ITEM_HTML