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

Question

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

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

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

我做错了什么？

Answer 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":

<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 部分的内容填充它。

2) 将 <script src="vue.js"></script> 中的 "vue.js" 替换为“https://cdn.jsdelivr.net/npm/vue/dist/vue.js" when you're in development or with "https://cdn.jsdelivr.net/npm/vue@2.6.11”以用于生产。

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

现在您的页面应该运行正确。

提示：不要在 Codepen 中使用 Ctrl + A 来 select 所有内容，因为它 select 会多出几个词。

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

How can one use Vue.js code from Codepen?

javascript

components

copy-paste

vue.js

codepen