如何使用Codepen中的Vue.js代码？

问题描述 投票：-2回答：1

我想使用Codepen中的this代码。因此，我右键单击result框并选择View Frame source。然后，我复制了源代码并将其粘贴到我自己的文本编辑器中。

但是我的网页将代码部分显示为空白。

enter image description here

我复制了从<style>到</body>的源，并将其插入到我的组件中。改用ZIP时，我不知道如何使用代码，因为我只有一个组件，而ZIP包含script.js和style.css

我在做什么错？

javascript vue.js components copy-paste codepen
1个回答
1
投票

好的，这里复制并粘贴了虚拟变量：这是html部分：

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <table class="dayparts table">
            <thead>
                <tr>
                    <td class="cell-label presets-label"></td>
                    <td colspan="24"><span class="cell-label presetsSubtitle-label"></span>
                        <select v-model="selected" @change='clearAll();selectedFunc()'>
                            <option value="">Select a Preset</option>
                            <option value="0">None</option>
                            <option value="1">Afternoons</option>
                            <option value="2">Evenings</option>
                            <option value="3">Mornings</option>
                            <option value="4">Weekdays</option>
                            <option value="5">Weekends</option>
                            <option value="6">Weekends including Friday</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2"></td>
                    <td class="cell-label am-label" colspan="12">AM</td>
                    <td class="cell-label pm-label" colspan="12">PM</td>
                </tr>
                <tr class="hour-row">
                    <td class="hour" v-for="hour in times" v-bind:value="hour.hour" v-on:click='setTime'>{{hour.hour}}
                    </td>
                </tr>
            </thead>
            <tbody @mousedown='mouseDown' @mouseup='mouseUp' @mousemove='mouseMove'>
                <tr class="day" v-for="day in days">
                    <td class="cell-label day-label" v-bind:value="day.dayNumber" v-bind:day-value="day.dayNumber"
                        v-on:click='activateDay'>{{day.dayName}}</td>
                    <td class='dayparts-cell' v-bind:value="hour.hour" data='day'
                        v-bind:class="{active: hour.isActive, preactive: hour.isPreActive}" v-for='hour in day.times'>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="main.js"></script>
</body>

</html>

这是“头”：

<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>

1）删除<link rel="stylesheet" href="style.css">，然后在同一位置添加<style></style>。用css-part的内容填充它。

2]在开发中时，将<script src="vue.js"></script>中的“ vue.js”替换为“ https://cdn.jsdelivr.net/npm/vue/dist/vue.js”，或者将其替换为“ https://cdn.jsdelivr.net/npm/[email protected]”进行生产。

然后转到html代码的底部并找到<script src="main.js"></script>。删除它，然后添加一个空的<script></script>。用复制的Javascript部分填充它。

现在您的页面应该可以正常运行。

提示：请勿使用Codepen中的Ctrl + A来选择所有内容，因为它会选择一些额外的单词。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.