CodePen - 一个在线的前端代码编辑工具(可用于制作测试页面、代码调试)
作者:hangge | 2019-12-02 08:10
有时我们需要调试一些前端代码(无论是 html、css,还是 js),或者要制作一个 demo 分享给他人。这些都可以借助 CodePen 这个网站来实现。
一、基本介绍
1,什么是 CodePen?
CodePen(代码笔)一款前端所见即所得的工具,我们可以在线编辑制作前端页面,所见即所得。同时网站提供所有常见的 js、css 库,并且支持流行技术(如 SASS),免去了我们自建平台的麻烦。
- 官网地址:https://codepen.io
2,CodePen 主要功能
- 即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。
- 快速添加外部资源文件。只需在输入框里输入库名, CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。
- 免费创建模板。支持创建三个模板,不是每个作品都需要从白板开始。
- 优秀的外嵌体验。在 WordPress 或 Reddit 等支持 oEmbed 的平台上,只要简单地把链接贴入编辑框,发布后会自动转为嵌入作品。
二、使用样例1:JQuery + Font Awesome
(1)首先访问 CodePen 网站,并注册登录。点击 Pen 按钮新建一个 Pen。
(2)在打开的页面中点击 JS 栏目前面的齿轮图标。
(3)由于我们要引入 jQuery 库,直接搜索 jQuery,让后点击搜索结果的第一项。
(4)这样 jQuery 库就引入进来了:
(5)同样地,我们在 CSS 栏目中搜索 Font Awesome 并将其引入:
(6)保存回到主界面后,在 HTML 栏目中添加如下代码:
<button id="changeColor">随机颜色</button> <i id="fa1" class="fa fa-camera-retro fa-3x"></i>
(7)在 JS 栏目中添加如下代码:
$(document).ready(function(){ // 随机颜色按钮点击 $("#changeColor").click(function(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var color = '#'+r.toString(16)+g.toString(16)+b.toString(16); $("#fa1").css("color", color); }); });
(8)最终的效果如下,点击按钮可以改变右侧图标的颜色:
三、使用样例2:Vue.js + Element UI
(1)同样地,我们先搜索 vue 和 element-ui 并引入这两个库。
(2)接着在 CSS 栏目中引入 element-ui 使用的 CSS。由于 CodePan 上搜索不到,这里我们使用手动配置:
https://unpkg.com/element-ui/lib/theme-chalk/index.css
(3)保存回到主界面后,在 HTML 栏目中添加如下代码:
<div id="app"> <div class="search-wrapper"> <el-input id="searchInput" placeholder="根据姓名筛选..." v-model="filter"></el-input> <el-button type="primary" @click="reset">重置</el-button> </div> <el-table :data="getTableData" :border="true" :stripe="true" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div>
(4)在 CSS 栏目中添加如下代码:
.search-wrapper { margin-bottom: 10px; display: flex; } .search-wrapper .el-input { flex:1; margin-right:10px; }
(5)在 JS 栏目中添加如下代码:
new Vue({ el: '#app', data() { return { filter: '', tableData: [{ date: '2016-05-02', name: 'hangge', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '李小龙', address: '上海市普陀区金沙江路 1519 弄' }] } }, computed: { getTableData() { var tableData = this.tableData.filter((item) => { return item.name.toLowerCase().includes(this.filter.toLowerCase()); }); return tableData; } }, methods: { reset() { this.filter = ""; } }, mounted: function () { } })
(6)最终的效果如下,通过上方输入框可以实时筛选下方表格的数据:
全部评论(0)