React及Vue简单项目模板(不使用npm包)

最新推荐文章于 2023-05-29 11:36:41 发布

逆袭的菜鸟X

最新推荐文章于 2023-05-29 11:36:41 发布

阅读量629

点赞数

分类专栏：我的前端

本文链接：https://blog.csdn.net/weixin_36445197/article/details/108073334

版权

我的前端专栏收录该内容

87 篇文章 5 订阅

订阅专栏

React.html

Babel 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具
使用babel-standalone模块提供的浏览器版本，将其插入网页。引用
 引用2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

    <div id="example"></div>
    <script type="text/babel">
        class Comment extends React.Component {
            render() {
                return <div>这里是Comment组件</div>;
            }
        }
        ReactDOM.render(
            <Comment></Comment>,
            document.getElementById('example')
        );
    </script>

</body>

</html>

注意，网页实时将 ES6 代码转为 ES5，对性能会有影响

Vue.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-design/dist/styles/iview.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/view-design/dist/iview.min.js"></script>
    <title>投资计算器</title>
    <style>
        #app {
            width: 400px;
            margin: 40px auto;
            padding: 0 20px;
        }
        .mb-10 {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="text-center">
            <div>
                <h2 class="mb-10">投资计算器</h2>
                <i-select v-model="computedMode" style="width:200px" placeholder="请选择计算模式" class="mb-10">
                    <i-option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}
                    </i-option>
                </i-select>
                <i-input v-model="currentMoney" placeholder="请输入当前投资总资产" style="width: 200px" class="mb-10" key="currentMoney"></i-input>
                <i-input v-model="monthMoney" placeholder="请输入每月可投资金额" style="width: 200px" class="mb-10" key="monthMoney"></i-input>
                <i-input v-model="year" placeholder="请输入投资年限(整数)" style="width: 200px" class="mb-10" v-if="computedMode !== '1'" key="year"></i-input>
                <i-input v-model="totalMoney" placeholder="请输入预期总资产" style="width: 200px" class="mb-10" v-if="computedMode !== '0'" key="totalMoney"></i-input>
                <i-input v-model="rate" placeholder="请输入预期年化收益率%" style="width: 200px" class="mb-10" v-if="computedMode !== '2'" key="rate"></i-input>
                <div>
                    <i-button icon="md-calculator" type="primary" @click="compute()" style="width: 200px">计算一下</i-button>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                computedMode: '2',
                selectList: [
                    {
                        label: '计算总资产',
                        value: '0',
                    },
                    {
                        label: '计算所需年限',
                        value: '1',
                    },
                    {
                        label: '计算所需年化率',
                        value: '2',
                    },
                ],
                currentMoney: '',
                monthMoney: '',
                year: '',
                totalMoney: '',
                rate: ''
            },
            methods: {
                compute() {
                    if (this.computedMode === '0') this.computeTotalMoney()
                    else if (this.computedMode === '1') this.computeYear()
                    else this.computeRate()
                },
                computeTotalMoney() {
                    if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.year) || /\D/.test(this.rate)) {
                        this.$Modal.error({
                            title: '错误',
                            content: '请输入正确的数字啦!!',
                        });
                        return;
                    }
                    let total = +this.currentMoney * (((100 + (+this.rate)) / 100) ** (+this.year))
                    let monthTotal = +this.year * 12, monthInterest = +this.monthMoney * +this.rate / 1200
                    for (let i = 0; i < monthTotal; i++) {
                        total += +this.monthMoney +  monthInterest * (monthTotal - i)
                    }
                    this.$Modal.success({
                        title: '到期总资产',
                        content: '预计您到时总资产为' + (total | 0),
                    });
                },
                computeYear() {
                    if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.totalMoney) || /\D/.test(this.rate)) {
                        this.$Modal.error({
                            title: '错误',
                            content: '请输入正确的数字啦!!',
                        });
                        return;
                    }
                    let total = 0, year = 0, month = 0
                    while(total < +this.totalMoney) {
                        total = +this.currentMoney * (((100 + (+this.rate)) / 100 ) ** (year + 1)) 
                        let monthTotal = (year + 1) * 12, monthInterest = +this.monthMoney * +this.rate / 1200
                        for (let i = 0; i < monthTotal; i++) {
                            total += +this.monthMoney +  monthInterest * (monthTotal - i)
                            if (total >= +this.totalMoney) {
                                month = i + 1
                                break
                            }
                        }
                        year++
                    }
                    let content = month % 12 === 0 ?  (month / 12 | 0) + '年整' : (month / 12 | 0) + '年又' + (month % 12) + '月' 
                    this.$Modal.success({
                        title: '预计所需投资年限',
                        content
                    });
                },
                computeRate() {
                    if (/\D/.test(this.currentMoney) || /\D/.test(this.monthMoney) || /\D/.test(this.totalMoney) || /\D/.test(this.year)) {
                        this.$Modal.error({
                            title: '错误',
                            content: '请输入正确的数字啦!!',
                        });
                        return;
                    }
                    let total = 0, rate = 1
                    while(total < +this.totalMoney) {
                        total = 0
                        total = +this.currentMoney * (((100 + rate) / 100 ) ** (+this.year))
                        let monthTotal = +this.year * 12, monthInterest = +this.monthMoney * rate / 1200
                        for (let i = 0; i < monthTotal; i++) {
                            total += +this.monthMoney +  monthInterest * (monthTotal - i)
                        }
                        console.log(total,rate)
                        rate= rate + 1
                    }
                    this.$Modal.success({
                        title: '预计所需年化率',
                        content: rate - 1 + "%",
                    });
                }
            },
        });
    </script>
</body>

</html>