利用vue的render函数写jsx并且进行封装

jsx的美观

说到jsx大家都会想到React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
声明式 、 组件化 、 一次学习，随处编写

Vue也可以通过编写组件来进行复用 ，但是Vue也可以通过编写jsx文件来创造组件，并且在我看来jsx编写的代码更加直观
以下就是我最近学到的用jsx编写Vue的组件

import moment from 'moment'


const styles = {
    recordCard: {
        padding: '0.45rem 0',
        display: 'flex',
        backgroundColor: '#fff',
        borderBottom: '1px solid rgb(202 201 201)'
    },
    timeItem: {
        position: 'relative',
        height: '1.2rem',
        display: 'flex',
        flexDirection: 'column',
        width: '1.1rem',
        color: '#4A6A8E',
        fontSize: '0.24rem',
        borderRight: '1px solid #D8DDE6',
        alignItems: 'center'
    },
    date: {
        fontSize: '0.36rem',
        color: '#1D1F20'
    },
    itemWrapper: {
        position: 'relative',
        height: '1.2rem',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        fontSize: '0.24rem'
    },
    timeWrapper: {
        width: '1.1rem',
        color: '#4A6A8E',
        alignItems: 'center',
        borderRight: '1px solid #D8DDE6'
    },
    rightContent: {
        flex: 1,
        padding: '0 0.44rem 0 0.2rem',
        overflow: 'hidden',
        color: '#4A4A4A'
    },
    extra: {
        position: 'absolute',
        right: '0.44rem',
        top: 0,
        fontSize: '0.24rem'
    }
}

export default {
    name: 'detail-card',
    props: {
        time: {
            type: [Number, String],
            required: true
        },
        username: {
            type: String
        },
        mobile: String,
        getClick: {
            type: Function,
            require: Object
        }
    },
    computed: {
        momentDate() {
            return moment(this.time)
        },
        isDateInvalid() {
            return !this.time || !this.momentDate.isValid()
        },
        month() {
            return this.isDateInvalid ? '' : this.momentDate.format('M') + '月'
        },
        day() {
            return this.isDateInvalid ? '' : this.momentDate.format('DD')
        },
        dayTime() {
            return this.isDateInvalid ? '' : this.momentDate.format('HH:mm')
        }

    },
    render() {
        const { $slots, month, day, dayTime, getClick } = this
        return (
            <div style={styles.recordCard} onClick={getClick}>
                <div style={styles.timeItem}>
                    <span>{month}</span>
                    <span style={styles.date}>{day}</span>
                    <span>{dayTime}</span>
                </div>
                <div style={[styles.itemWrapper, styles.rightContent]}>
                    <div style={{ minHeight: '0.33rem', display: 'flex' }}>{$slots.top}</div>
                    {$slots.middle && <div style={{ minHeight: '0.33rem' }}>{$slots.middle}</div>}
                    <div style={{ minHeight: '0.33rem' }}>{$slots.bottom}</div>
                    <div style={{ ...styles.extra, textAlign: 'right' }} >{$slots.extra}</div>
                </div>
            </div>
        )
    }
}

以下是对于这个封装的组件使用

const style = {
    span: {
        fontSize: "0.28rem",
        color: "#1D1F20",
    },
    middle: {
        fontSize: "0.24rem",
        color: "#666",
        display: "flex",
    },
    bottom: { fontSize: "0.24rem", color: "#666", display: "flex" },
    extra: {
        position: "absolute",
        right: "0.3rem",
        top: "0.8rem",
        color: "rgb(74, 106, 142)",
    },
}
import detailCard from '@/components/detail-card/index'
import moment from 'moment'
export default {
    component: {
        detailCard
    },
    data() {
        return {
            userList: [
                {
                    time: new Date().valueOf()
                },
                {
                    time: new Date().valueOf()
                },
                {
                    time: new Date().valueOf()
                },
                {
                    time: new Date().valueOf()
                },
                {
                    time: new Date().valueOf()
                },
            ]
        }
    },
    methods: {
        getClick() {
            console.log(8888888)
        }
    },
    render() {
        return (<div style={{ height: '100vh' }}>
            {this.userList.map(item => {
                return <detailCard getClick={this.getClick} time={item.time}>
                    <span slot="extra">xqq</span>
                    <div slot="top">
                        <span style={style.span}>管小欣</span>
                        {'17386377098'}
                    </div>
                    <div slot="middle">
                        <span style={style.middle}>试驾车型：测试</span>
                    </div >
                    <div slot="bottom">
                        <span style={style.bottom}
                        >试驾时间：{moment(new Date()).format("YYYY-MM-DD HH:mm")}
                            <div slot="extra" > </div>
                        </span>
                    </div >
                </detailCard>
            })}
        </div>)
    }
}

实现的效果图如下：

React

React被认为是视图层的框架是因为它是基于组件的，一切都是组件，而组件就是渲染页面的基础。不论组件中包含的jsx，methods，state，props，都是属于组件内部的

以上俩段代码复制到网页上就可以直接调试，一起来试试用jsx来编写Vue组件吧