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

    基于Vite构建工具,用Strve.js开发一个简版TodoList(真香!)

    发布Strve已经有三个月了,今天就给大家做一个小项目。看一看这个小框架到底好不好用。 我们今天就做一个简版的TodoList,项目虽小,但是五脏俱全。包含了对文本的增删改,非常值得上手。...下面,我们要实现一款简版的TodoList应用。它是一个单页面应用,所以我们仅需要在一个JS文件中开发,HTML与JS可以在一起写,从另一种角度上跟JSX思想差不多。...虽然,现在只有一个页面。 我们会看到逻辑区域与显示区域都很一目了然,我们仅仅去关心数据,操作数据就可以了。相比于JQ那种命令式API,拿来DOM就是干的方式,这种声明式API就非常优雅高效。...这篇文章很简短,大体介绍了Strve开发一个小项目的流程。如果感兴趣的朋友可以互相交流下。...项目云端地址 https://www.maomin.club/site/todolist Strve源代码地址 https://github.com/maomincoding/strve

    43320

    Js如何创建一个自定义对象

    前言 JS中分两种数据类型,一种是基本数据类型,另外就是复杂数据类型,在描述一个事物对象,当比较复杂时,一般可以用数组和对象来存储 在Js中的对象,指的是一系列互相嵌套的键值对,在做web开发时,大多数控件都是以对象或数组的形式来提供给开发人员使用...那如何创建一个对象呢,如何给对象添加属性和方法?...在Js当中有一些方法,如下所示 01 方法1-使用文本字面量形式 这种方法创建对象是比较直接,常见的一种方式,就是使用大括号的方式,可以看做是js对象的本本标识,也就是说,可以通过输出字符串的形式来了解对象有哪些键值对...,它也是JSON形式,用于js的数据存储和传递,给对象添加属性和添加方法 如下代码所示 // 用大括号创建对象的方法,这种方法最常见,使用最频繁 var obj1 = {}; // 使用大括号创建一个内容为空的对象...; 当值为函数时,那么对象下面绑定的就是方法,使用函数的作用厉害之处,除了可以复用代码,另一个就是可以接收传递参数 02 方法2-使用构造器函数创建对象 创建构造器函数创建对象也是一种创建对象的方法

    4.6K20

    炸裂,用JS创建一个录屏功能

    OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能。 首先,创建一个HTML文件,包含记录按钮和一个播放标签,内容如下: 然后在创建 index.js,监听按钮的点击: let btn = document.querySelector(".record-btn...现在你可能认为选择一个屏幕,然后点击分享,就开始录制了。非也,这个比我们想象中的复杂点。我们要使用 MediaRecorder 来录制我们的视频。...}) // 必须手动启动 mediaRecorder.start() }) 当我们的屏幕被录制下来时,mediaRecorder 会给我们提供分块的数据,我们需要将这些数据存储在一个变量中...---- 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

    1.1K20

    使用noode.js创建一个服务器

    我们通过require去加载这个模块 var server = http.createServer(function(req, res){ // 函数内部创建一个服务器,创建好之后,通过浏览器访问这个服务器的时候...二、一个可用的静态服务器 搭建一个有图片,css,js的资源的服务器,github代码链接 1、步骤 我在step1文件夹下放置了server.js文件,static文件夹。...__dirname是nodejs里面的一个变量,代表当前的server.js执行的这个文件。...*/ }) server.listen(8080) //创建一个服务器,监听8080端口 console.log('visit http://localhost:8080' ) 3、代码难点解析 3.1...三、实现一个简单的node.js服务器路由 实现更复杂的服务器,url不仅仅是定位一个静态文件,可以mock任何数据和前端交互。 1、核心原理: 根据浏览器请求的不同路由,导致服务器执行不同的操作。

    1.5K20

    js数组的创建

    ECMAScript中中最常用的类型了,ECMAScript数组跟其他编程语言的数组有很大的区别.ECMAScript 数组是一组有序的数据,但跟其他编程语言不用的是:数组的每个槽位可以存储任意类型的数据.这意味这可以创建一个数组...,它的第一个 元素是字符串,第二个元素是数组,第三个是对象.......创建数组 1.Array  // 使用Array 创建数组  let p = new Array()  console.log(p); // [] 空数组 2.传入参数  // 该数组的length 设置为...Array(2)]]两个数组    const n = new Set().add(1).add(10)  console.log(Array.from(n)); // [1,10]  // 从Set对象创建一个数组...var set = new Set([1, 2, 3]);  var arr = Array.from(set);  console.log(arr); // [1, 2, 3]    // 从Map对象创建一个数组

    10210

    【译】使用 Vue.js 创建一个全局的 Event Bus

    本文翻译自 Creating a Global Event Bus with Vue.js 尽管 EventBus 或发布-订阅模式的开发方式有时备受诟病,但对于应用程序中联系性低的部分来说,它的确是一个极好的通信方式...初始化 你需要做的第一件事,是创建一个 event bus 并将它导出到某个地方,以便其他模块或组件使用。或许这一部分可能会有点棘手?...你只需要将 Vue 引入并导出它的一个示例(在这个例子中,我把它命名为 EventBus)。你实际上得到的是一个和 DOM 以及应用中其他部分完全分离的组件。它只存在一些实例方法,所以非常地轻量。...使用 Event Bus 现在你已经创建好了 event bus,你只需要做的是将它引入到组件中,并在父子组件传递消息进行通信时调用相同的方法。...这里使用的是 Vue SFC,但是你可以使用任何方法来创建你想要的组件。 <!

    1.4K30

    Vue 3.0 初体验《从构建项目到实现一个todoList

    开始之前请确定你的Node Or Npm 版本是否和我的一样 Node v10.16.0 Npm v6.9.0 如果你的版本和我的一样,那么现在就可以开始玩耍了~ 这里我们需要使用最新版本的Vue Cli去创建项目...版本 vue -V # 我的输出 @vue/cli 4.3.1 # 更新Vue Cli npm update @vue/cli@4.3.1 -g 如果你的Vue Cli已经是以上版本了,那么请跟着我来创建一个项目吧...再次回车,然后选择一个代码语法格式的配置,这里选第一项就可以了 我们再次回车,然后选择其它的lint功能,这里也选第一个吧 回车后会有一个选择,说你喜欢在哪个地方放置Babel或者ESLint...}}) ...task.taskTime) return alert('请输入任务所需时间') data.todoList = data.todoList.filter(item => item.id

    23020

    【React入门】实现todolist功能

    摘要 作为一名 PHP 初级的程序员,目前尚且处于学习 PHP 业务逻辑实现到日常工作中的阶段,但是由于现在想要搭建一个满意的个人博客,并且尝试过很多 hexo 主题后总是会对主题的某些或某个部分不太满意...config set registry https://registry.npm.taobao.org 这样就可以使用 cnpm 命令来代替 npm 进行安装模块了: cnpm install [name] 创建...将App.js重命名为TodoList.js创建文件TodoItem.js。...manifest.json src/ TodoList.js TodoItem.js index.js README.md package-lock.json...package.json .gitignore (2)组件拆分 React 的组件开发意思是将页面上每个部分作为一个组件,然后通过每个组件之间的通信,进行数据交互,实现完整页面的渲染。

    1.4K20
    领券