首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue.js 教程:构建一个特斯拉汽车余电计算器

    在本教程中,我们会使用 Vue.js 这个容易理解的 JavaScript 框架制作一个仪表盘,通过它可以计算特斯拉电动汽车在不同情况下的行驶距离。 ?...要求 要开始学习本教程,你需要安装以下内容: Node 8.9 稳定或更高版本:https://nodejs.org/en/download/ Yarn:https://yarnpkg.com 项目结构...main.js 是应用程序的入口点。App.vue 是应用程序的入口组件。图下方是 App.vue 组件。 ? 项目入口点 Vue 应用程序在 main.js 中启动。...在 main.js 中,你首先需要创建一个新的“root Vue 实例”。如下所示: 导入 Vue:从“vue”导入 Vue。从 Vue 模块导入 vue。...Vue.js 使用基于 HTML 的模板语法。来自 data()-function 的数据可以通过数据绑定轻松渲染。

    3.4K10

    用原生js一个多动症的简历

    用原生js一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。

    6.9K70

    15分钟用JS一个简易计算器

    前言 这个小练手旨在帮助刚上手学习JavaScript的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退格)等基本运算,所以代码也不复杂...HTML代码部分 HTML这部分非常简单,没什么多说的,整个框架我利用搭建的,需要注意的是,由于计算器屏幕不可输入,我设置为了disabled。...JavaScript部分 请先不要直接看这部分代码,先看我的思路讲解再看这部分,你绝对可以轻松理解 思路讲解 请先不要看上面的JS代码,接下来请试着跟着我的思路走,完成这个计算器的功能,我是分成三个部分来解决的...第一部分:获取值到屏幕上 我认为解决简单的JS问题大体都可以分三步: 1.获取你想操作的元素; 2.保存你想操作的元素; 3.对元素进行(遍历)操作; 我的第一步目的是将除了AC,DEL这两个键之外的按键值获取到屏幕上...,所以我们应该先加一个判断条件:屏幕里是否有小数点存在?

    2.4K20

    用原生js一个多动症的简历

    用原生js一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...(代码风格约束利器) 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。

    5.3K20

    如何一个 JS 运行时

    前言:随着 Node.js 的出现和不断发展,其他新的 JS 运行时也穷出不断,Deno、Just、Bun等等。...本文简单介绍一下如何一个 JS 运行时,相比操作系统、编译器来说,一个 JS 运行时理论上并不是一个难的事情,但是一个优秀且功能齐全的运行时并不是一个容易的事情。...JS 引擎 一个 JS 运行时,首先就必须需要一个 JS 引擎来处理 JS,大部分的 JS 运行时都是基于 V8的,当然你也可以使用其他的 JS 引擎。...所以首先需要选择一个 JS 引擎,然后下载代码,编译成功。有了 JS 引擎,就可以通过它提供的一些 API 实现一个可以执行 JS 代码的软件。...但是还有一个重要的部分需要实现,那就是模块加载器,内置的功能可以通过挂载到全局变量的方式来实现,这样用户就不需要通过模块加载器的方式来使用拓展功能,但是用户的 JS,还是需要一个模块加载器。

    1.7K30

    实战 | 用原生js一个多动症的简历

    又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...接下来让我们一步步完成它 项目搭建 在这个项目中我们 1、使用webpack2来完成项目的构建 2、使用yarn来处理依赖包的管理 3、使用es6的写法 4、使用部分原生dom操作api 5、standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...可以看出它做的事就是封装一个构造函数Vquery,它的实例会有一些简单的dom操作方法,最后为了能够像jQuery那样使用$().funcName的形式去使用,我们导出了一个匿名函数,在匿名函数中去new...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。于是我们需要做下面一件事 内部的next函数就是 thunk 的回调函数。

    4K10

    如何用JS一个table组件 | 作业讲解

    第二种,从JavaScript的模块化开发角度来讲,一个function就是一个模块,例如: function isGet(){ //get... } 这个函数就是一个JS模块,它是有逻辑的。...一个组件可以说它是一个JS模块,但一个JS模块,却未必是一个组件。...所以你会看到一个组件里面包含了许多函数、方法或是许多JS文件。 这就引出下一个问题,组件的组织。也就是单一功能的再细分,用笔先写出一个个的点。。...然后定义一个函数,createTableUI(),,, (这东西真累,这么多字了,开头还没写完,还不一定有人爱看。...还是吐槽文舒服啊,一会就写完了) 简短节说啊,,把刚才的config进来,就这样:createTableUI(config) 然后createTableUI的伪代码: createTableUI(c)

    4.5K50

    用 Java 一个植物大战僵尸简易

    游戏设计 植物大战僵尸中有一个小游戏关卡,屏幕的正上方有一个滚轮机,会随机生成植物,玩家可以选中植物后自由选择草坪来进行安放。基于此游戏模式,我将该关卡抽取出来,单独做成了一个简易的植物大战僵尸。...所以这里需要引入一个鼠标监听器事件。...还可以使用键盘监听器,当按下某个键时游戏暂停,这样的用户体验更好。但原理是一样的,这里就不展示代码了。 游戏对象 首先分析一下游戏中有哪些对象。各式各样的植物,各式各样的僵尸,各式各样的子弹。...追击的方式当然是追前一个植物卡牌,但当第一个植物卡牌被选中放置到草地上后,那该如何追击呢?...之前是将草地设计成empty和hold两种状态,现在来看其实只需要返回一个true和false就行了,将整个植物集合定义成一个虚拟的boolean集合即可。

    88930
    领券