Fatal编程技术网
  • javascript/
  • Javascript 如何使用Codepen中的Vue.js代码？

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

javascript vue.js

Javascript 如何使用Codepen中的Vue.js代码？,javascript,vue.js,components,copy-paste,codepen,Javascript,Vue.js,Components,Copy Paste,Codepen,我想使用代码笔中的代码。因此，我右键单击了结果框架并选择了查看框架源代码。然后我复制了源代码并将其粘贴到我自己的文本编辑器中 但我的网页显示代码部分为空白 我将源代码从复制到并插入到我的组件中。 当使用ZIP时，我不知道如何使用代码，因为我只有一个组件，而ZIP包含一个script.js和一个style.css 我做错了什么？好的，这是为假人准备的复制和粘贴： 这是html部分： <html lang="en"> <head> <meta charset

我想使用代码笔中的代码。因此，我右键单击了
结果
框架并选择了
查看框架源代码
。然后我复制了源代码并将其粘贴到我自己的文本编辑器中

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

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

我做错了什么？

好的，这是为假人准备的复制和粘贴： 这是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>


分时段
选择一个预设
没有一个
下午
晚上
早晨
平日
周末
周末包括周五
是
颗粒物
{{hour.hour}
{day.dayName}
这是“头”：


分时段
1） 删除
并在同一位置添加
。用css部分的内容填充它

2） 在开发时将
中的“vue.js”替换为“”或在生产时将其替换为“”

然后转到html代码的底部，找到
。删除它并添加一个空的
。用复制的Javascript部分填充它

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

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

也许可以先看看vuejs指南。@palaѕѕѕѕ我已经设置了Vue并创建了不同的组件，但我认为我的“复制粘贴”方法在Vue中，如果您只想让一个页面启动一个新的HTML框架并将HTML部分插入其中，那么您就可以将css部分复制并粘贴到
中，将javascript部分复制并粘贴到
中。然后您只需要更改html中的vuetag@J.Dario谢谢Dario，但是html标签中的change vue的CDN是什么意思？我试着从“乙烯基fs”导入{src}；src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js“您的错误是什么？ 
<head>
    <meta charset="utf-8">
    <title>Dayparting</title>
    <link rel="stylesheet" href="style.css">
    <script src="vue.js"></script>
</head>