组件是拥有专属的 HTML+JS+CSS+数据 的可重用的独立的页面功能区域,如果发现网页中有一个功能,可能被多处反复使用,都应封装为组件。
如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么大家会觉得 jQuery “过时了”呢?一来,文章《No JQuery! 原生 JavaScript 操作 DOM》就直截了当的告诉你,现在用原生 JavaScript 可以非常方便的操作 DOM 了。其次,jQuery 的便利性是建立在有一个基础 DOM 结构的前提下的,看上去是符合了样式、行为和结构分离,但其实 DOM 结构和 JavaScript 的代码逻辑是耦合的,你的开发思路会不断的在 DOM 结构和 JavaScript 之间来回切换。
接上文,Todo应用,核心功能包含添加Todo任务、待完成Todo任务列表、已完成Todo任务列表等功能。React项目中,src目录下的App.js文件是项目的入口文件,你可以把所有程序,都编写于此也可。当然,实际项目开发中,并不会这样做。话不多说,书归正文。下图就是我们最终要完成的应用。
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React、Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式。那么,为什么
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS) 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这并不是必须的; 当riot标签定义在document body之内时,其内部不能使用script标签; 当riot标签定义在单独的文件中时,其内部才可以使用script标签; 如果JS代码没有写在<script>标签内部, 那我们就认为最后一个HTML标签结尾之后就是JS代码; riot标签可以是空的,或者只有HTML,或者
目前我司的后端主要是用PHP来写,发现我们后端的html+js没有采用组件的方式来做,导致代码之间重复率非常高,很难维护,举一个简单的粟子,比如现在我们有两个页面,创建和修改页面,这两个页面都有一个选择时间的控件(datePicker),由于我们没有采用组件化,我们需要分别在两个页面的html+js+css里分别写两遍同样的代码
注意这里面,如果可以在渲染virtual DOM之前就可以判断渲染结果不会有变化,那么可以直接不进行virtual DOM的渲染和比较,速度会更快。
git:https://github.com/huangantai/todolist.git
我们用v-for指令根据一组数组的选项列表进行渲染,v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名 基本用法
一、引入vue 方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> 方法二:使用架构工具,推荐使用npm安装后,然后可以直接用作 AMD 模块 var Vue = require('Vue'); 二、声明式渲染 hello World实例(新建html将如下内容放在body中) {{ message }} <scr
在第一章中,我们的Todo List已经初现锥形,本章节我们对页面优化,同时让数据实现本地存储。主要用到localStorage + Vuex来实现页面交互和存储功能。
或者使用CDN <script src="https://unpkg.com/vue/dist/vue.js"></script>
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器。 Vue.js安装 安装方式有两种: 1、直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告) 2、使用cdn方法引入 3、npm安装 npm安装的前提需要安装了nodejs,这里推荐nvm安装nodejs 附上一小段nvm使用的命令: $ nvm
本教程手把手教你搭建一套使用 Node.js + Express + Sequelize + MySQL 构建的后端服务,详细描述通过 Node.js 与数据库通讯。整个服务搭建起来后,我们使用 Postman 对整个后端服务进行测试。本教程每段代码我都亲手测过,保证百分百没有错误,请打开你的 terminal 跟随本教程一起操作,从这里开始,成为一名后端工程师。
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇, 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 注意:v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!
本周精读的文章是:surprising-polymorphism-in-react-applications,看看作者是如何解释这个多态性含义的。
https://github.com/vuejs/vue-devtools#vue-devtools
vue是一款渐进式javascript框架,由evan you开发。vue成为前端开发的必备之一。
前言:这两天把vuejs官方文档都看了一遍(路由的文档还没看),现在回过头来再结合英文文档重新看一遍 ,为的是学下英文,然后总结性的写一下。尽管vuejs的官方文档写得详细又好,但是总觉得吧,知识这东西还是得自己跟着文档把代码手敲一遍,把要点写写,这样才能把别人的知识变成自己的。感觉自己要学的东西还有很多,长路漫漫,上下求索吧!
最近爱了上 Nest.js 这个框架,边学边做了一个 nest-todo 这个项目。
如果在一个页面里有多个功能,那就需要在 data 和 methods 里分别进行配置。但这样的话,数据和方法相关的代码会写在一起,在组件代码行数多了后就不好维护。可以使用 Composition API 的逻辑来拆分代码,把一个功能相关的数据和方法都维护在一起。
在之前的博客中,我写了一篇关于todo-list实现的博客,一步一步详细的记录了如何使用基础的React知识实现一个React单页面应用,通过该篇文章,能够对React入门开发有一个直观的认识和粗浅的理解。
本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github 下载。 首先,我们需要 基本的项目模板,方便把
本文通过实现一个 TodoMVC 应用来说明一个 Flux 应用的结构是怎样的。本文会告诉你如何一步一步地实现这个应用,完整的源代码可以从 Github 下载。
JavaScript 已经占领了世界上的每一个角落,能访问网页的地方,基本上就有 JavaScript 在运作,然而 JavaScript 因为其动态、弱类型、解释型语言的特性、出错的调用栈隐蔽,使得开发者不仅在调试错误上花费大把时间,在团队协作开发时理解队友编写代码也极其困难。TypeScript 的出现极大的解决了上面的问题,TypeScript -- 一个 JavaScript 的超集,它作为一门编译型语言,提供了对类型系统和最新 ES 语法的支持,使得我们可以在享受使用 ES 最新语法的编写代码的同时,还能在写代码的过程中就规避很多潜在的语法、语义错误;并且其提供的类型系统使得我们可以在团队协作编写代码时可以很容易的了解队友代码的含义:输入和输出,大大提高了团队协作编写大型业务应用的效率。在现代 JavaScript 世界中,已经有很多大型库在使用 TypeScript 重构,包括前端三大框架:React、Vue、Angular,还有知名的组件库 antd,material,在很多公司内部的大型业务应用也在用 TypeScript 开发甚至重写现有的应用,所以如果你想编写大型业务应用或库,或者想写出更利于团队协作的代码,那么 TypeScript 有十足的理由值得你学习!本文是 TypeScript 系列教程的第一篇,主要通过使用 antd 组件库实战演练一个 TypeScript 版本 React TodoList 应用来讲解 TypeScript 的语法,使得你能在学会语法的同时还能完成一个实际可运行的项目。
在这一部分中,我们将趁热打铁,运用上篇教程学到的 Redux 三大核心概念来将待办事项的剩下部分重构完成,它涉及到将 TodoList 和 Footer 部分的相关代码重构到 Redux,并使用 Redux combineReducers API 进行逻辑拆分和组合,使得我们可以在使用 Redux 便利的同时,又不至于让应用的逻辑看起来臃肿不堪,复用 React 组件化的便利,我们可以让状态的处理也 “组件化”。最后,我们将让 React 回归初心——专注于展现用户界面,通过“容器组件”和“展示组件”将逻辑和状态进一步分离。
B.vue-loader需要安装15版本以下(参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required . Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的)
当用create-react-app创建好项目,启动后会自动打开 localhost:3000。 我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 json 数据。并渲染到前台。 这样的话需要先创建一个后台服务器。我们使用NodeJS的 express 或 koa 服务器框架。下面以 koa 为例。
TodoList应用,是面向零基础同学的快速入门应用。你可以一行代码完成TodoList的本地化搭建,如果你想要网络同步你的Todo数据,在多个设备之间实时同步共享,云开发构建仅需100行。
Cloud Studio 是一种基于浏览器的集成式开发环境(IDE),向开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装应用程序和插件,只要打开浏览器就能使用,非常的方便和用好。此外,Cloud Studio 还包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。
本文翻译自7 Ways to Make HTTP Requests in Node.js
有人要问,我为什么要前后端分离?这个说起就话长了,网上也能搜索到一些解答,不过可简要概括为以下两点:
背景:参加的青训营项目,使用 Express 来实现后端,个人被分配到后端去。于是,简单速通了下 Express。项目结束,回头写下笔记,沉淀一下。
写在最前面 使用 node 完成一个 todolist app 的 server 端,其中包括基本的 ts 配置方案和完成了 Models 和 Controler 层。 提示:需要对 Typescript 有一定了解,server 和 client 端均使用 Typescript 默认已经安装好 yarn或者npm 您可以按照顺序阅读 全栈 Todolist-server 篇 Node(server) React(client) MongoDB(database) Typescript Todolist-d
Svelte在2019年中成为后起之秀,接下来,让我们来简单的了解一下,这个新的框架。
MVVM源自于经典的MVC(Model-View-Controller)模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下:
首先先正经的来一段官网的"忠告": vuex需要遵守的规则: 一、应用层级的状态应该集中到单个 store 对象中。 二、提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。 三、异步
Vue.js,这个JavaScript框架在开发者圈子里可谓是大名鼎鼎,以其简洁和灵活著称,让开发者们能够高效地构建出既有趣又动态的网页应用。不过,就像任何技术一样,它也有自己的学习曲线和可能的陷阱。
大家好,在前面的几篇文章中,我们已经初步学习了组件的使用方法,但是这些内容只是开始,关于组件的内容还是比较多,比如在组件生命周期内提供了处理数据的方法,在特定的应用场景更新我们的应用,这对我们开发十分重要,因此我们有必要深入学习。在接下来的几篇文章里,我经通过实例的方式和大家一起学习组件生命周期相关的主要方法,本篇文章我们将通过一个待办事项的例子(Todo list)来深入学习如何使用 componentWillMount 函数。
React(也被称为 React.js 或者 ReactJS)是一个用于构建用户界面的 JavaScript 库。起源于 Facebook 内部项目,最初用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 性能较高,并且它的声明式、组件化特性让编写代码变得简单,随着 React 社区的发展,越来越多的人投入 React 的学习和开发,使得 React 不仅可以用来开发 Web 应用,还能开发桌面端应用,TV应用,VR应用,IoT应用等,因此 React 还具有一次学习,随处编写的特性。本教程将带你快速入门 React 开发,通过 20-30 分钟的学习,你不仅可以了解 React 的基础概念,而且能开发出一个待办事项小应用,还在想什么了?马上学起来吧!本文所有代码已放在 GitHub 仓库[1]中。
大家好,在前面的几篇文章中,我们已经初步学习了组件的使用方法,但是这些内容只是开始,关于组件的内容还是比较多,比如在组件生命周期内提供了处理数据的方法,在特定的应用场景更新我们的应用,这对我们开发十分重要,因此我们有必要深入学习。在接下来的几篇文章里,我将通过实例的方式和大家一起学习组件生命周期相关的主要方法,本篇文章我们将通过一个待办事项的例子(Todo list)来深入学习如何使用 componentWillMount 函数。
CLI(Command Line Interface)命令行界面是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(character user interface,CUI)。
引言 界面: Vue.js 3 JavaScript 超集: TypeScript 包管理器: pnpm 前端工程化/打包: Vite 路由: Vue Router 状态管理: Pinia CSS 预处理器: Less 代码格式化: Prettier 代码质量: ESLint 预览
本期用户故事是云开发资深用户继云开发过程中的使用秘诀后更新的实战教程,旨在通过todolist 开发实践来掌握云数据库的使用和权限设置等相关业务。
Vue2.x-03使用vue-cli搭建Vue开发环境搭建好了开发环境,也看了下项目结构,接下来继续来分析下创建的项目吧。
领取专属 10元无门槛券
手把手带您无忧上云