前端组件 | 易学教程

React开发入门

阅读更多关于 React开发入门

目录：一、前言二、什么是React 三、开发环境搭建四、预备知识五、最简单的React小程序六、基础语法介绍七、总结八、参考资料一、前言近段时间看到学长公司招聘React Native工程师，当时比较好奇，就搜索了一下，然后刚好需要每个月买一本书看看，所以就买了一本《Reactive Native 开发指南》。但是看到里面的预备知识的时候，发现首先最好需要先了解一下React（书中写道：我们假设你对React已经有了一些了解），心想是不是还要买一本React的书籍，后来想想干脆直接从网上搜搜教程吧，因此开始去探索，最终找到了三个链接的内容讲的React还不错，一个是阮一峰的博客，一个是官方文档，一个是 React概览。阮一峰的博客和React概览都是中文的，而且写的比较容易理解，而官方文档是英文的，讲解的都比较详细。所以如果自己英文好的话可以直接看官方文档。二、什么是React React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面。三、开发环境的搭建做任何开发环境，我都会想着首先需要搭建一个环境来开发。就像如果开发iOS，你需要有苹果电脑，然后从AppStore下载Xcode，然后就可以熟悉一个Xcode，看看文档，就可以开始开发了；就像如果开发Android，你需要安装Android

谷歌移动UI框架Flutter教程之Widget

阅读更多关于谷歌移动UI框架Flutter教程之Widget

引言在之间我已经介绍了关于Flutter的下载安装以及配置，还有开发工具Android Studio的配置，还不知道的同学可以看看我这篇博客—— 谷歌移动UI框架Flutter入门。这里为什么非要用Android Studio，我可以解释一下。Android Studio是Google的亲儿子，由谷歌一手开发，而Flutter也是谷歌推出的技术，所以在支持和兼容问题上，Android Studio是非常有优势的。老话说得好，肥水不流外人田，谷歌内部肯定是将Android Studio对Flutter的优化做到最佳的。 Widget基本组件那么话不多说，我们先来熟悉一下关于Flutter的Widget组件，在Flutter中，一切皆组件，TextView、Image、Row、Column等等，都统称组件。 1.文本组件(Text) 首先，我们就来了解一下文本组件(Text)。学过前端的同学对UI部分应该都很了解，那Flutter当然也没有什么特别的，无非也就是文本内容、大小、字体样式、颜色等等的设置，那么首先我们就先来编写一个案例。找到lib目录下的main.dart，我们将在这个文件中编写代码。 import 'package:flutter/material.dart'; void main() { runApp(MyTextApp()); } /** * 文本组件

webpack/前端工程化

阅读更多关于 webpack/前端工程化

1.模块化的分类 A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js B.服务器端的模块化服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块，都拥有独立的作用域 C.ES6模块化 ES6模块化规范中定义： 1).每一个js文件都是独立的模块 2).导入模块成员使用import关键字 3).暴露模块成员使用export关键字小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范. 2.在NodeJS中安装babel A.安装babel 打开终端，输入命令： npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 安装完毕之后，再次输入命令安装： npm install --save @babel

005 vue路由

阅读更多关于 005 vue路由

一：元素的获取 1.ref元素获取　　可以通过ref获取DOm，也可以获取组件的引用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="获取元素" @click="getElement" ref="mybtn"> <h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3> <hr> <login ref="mylogin"></login> </div> <script> var login = { template: '<h1>登录组件</h1>', data() { return { msg: 'son msg' } }, methods: { show() { console

2018前端学习知识点总结

阅读更多关于 2018前端学习知识点总结

前端越发展越复杂，知识点越来越庞杂。前几年号称要一统前端江湖的backbone，估计新入行的童鞋都没听说过。前年很火的Angular也逐渐被React和Vue赶超和碾压。 Backbone.js React,Angular,Vue 但是，千变万变，总是为了提升工作效率，提升用户体验而变，千万要避免“乱花迷人眼”。夯实基础，才能万变不离其宗。前端要学习三个部分：HTML，CSS，JavaScript（简称JS），因此首先明确三个概念： HTML负责结构，网页想要表达的内容由html书写。 CSS负责样式，网页的美与丑由它来控制 JS负责交互，用户和网页产生的互动由它来控制。以下，略小坑为大家整理了最新的前端学习知识点，大家可以保存到手机中，方便及时查看，自我检查。初级阶段（静态网页制作、JS编程入门） 1.Photoshop入门图像处理基础知识、图像处理基础知识、分辨率、图像的色彩模式、常用的图像文件格式。Photoshop工作界面的介绍、文件操作、图像的显示效果、图像和画布尺寸的调整、绘制和编辑选区、选区的操作技巧、渐变工具和油漆桶工具。图像合成、图层、蒙版、配色、切图、色彩搭配原则。 2.互联网基本原理互联网基本原理、服务器、浏览器、HTTP请求的概念。 3.HTML 编程工具介绍、HTML简介。HTML语义化标签、p标签和h系列标签。HTML基本骨架深入

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新

阅读更多关于前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新

原文: http://blog.gqylpy.com/gqy/438 置顶：来自一名75后老程序员的武林秘籍——必读（博主推荐）来，先呈上武林秘籍链接： http://blog.gqylpy.com/gqy/401/ 你好，我是一名极客！一个 75 后的老工程师！我将花两分钟，表述清楚我让你读这段文字的目的！如果你看过武侠小说，你可以把这个经历理解为，你失足落入一个山洞遇到了一位垂暮的老者！而这位老者打算传你一套武功秘籍！没错，我就是这个老者！干研发 20 多年了！我也年轻过，奋斗过！我会画原理图，会画 PCB，会模拟，会数字！玩过 PLC，玩过单片机，会用汇编，会用 C！玩过 ARM，比如 PLC，STM32，和时下正在起飞的 NXP RT1052！搞过 DSP，比如 TMS320F28335！搞过 FPGA，不管 Xilinx 还是 Altera，也不管是 Verilog 还是 VHDL，或者直接画数字电路图！我懂嵌入式系统，比如 uCOS 和 Linux！我懂开源的硬件，比如 Arduino 和树莓派!我也搞软件，学了一堆上位机的语言C#，JAVA，Python，Kotlin，Swift！会写爬虫工具，又自学写APP，不管Android 还是 IOS！可是这一切有什么用呢？土鸡瓦狗！不值一提！干技术的永远就是最苦逼的那个人！我相信看到这里的你，应该是个 IT

Vue——Vue-cli脚手架+前端路由

阅读更多关于 Vue——Vue-cli脚手架+前端路由

Vue-cli是Vue的脚手架工具可以进行目录结构、本地调试、代码部署、热加载、单元测试 1、MVVM框架 View —— ViewModel —— Model （视图）（通讯）（数据） “DOM” “观察者vue实例” “Javascript” 注意：交互为双向的特点：（1）针对具有复杂交互逻辑的前端应用；（2）提供基础的架构抽象；（3）通过Ajax数据持久化，保证前端用户体验。 2、什么是Vue.js 它是一个轻量级MVVM框架，属于“数据驱动+组件化”的前端开发 Vuejs VS Angular+React （1）Vue.js耿轻量，gzip后大小只有20k+ （2）Vue.js更易上手，学习曲线平稳（3）吸取两家之长，借鉴了angular的指令（如v-show）和react的组件化 3、vue.js核心思想（1）数据驱动 DOM是数据的一种自然映射扩展——数据响应原理数据（model）改变驱动视图（view）自动更新（2）组件化扩展HTML元素，封装可重用的代码扩展——组件设计原则 a、页面上每个独立的可视/可交互区域视为一个组件 b、每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护 c、页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面 4、vue-cli脚手架 https://github.com/vue.js

8月24日课设个人总结（组名：double_H）

阅读更多关于 8月24日课设个人总结（组名：double_H）

今日完成的任务： ①完成了搜索页面的布局，就是添加了一个searchbar的自定义组件，在主页面点击搜索框，就会弹到search搜索页面说明：两个图片上面这部分用的都是一个组件searchbar，并不是分开写，在.js里面设置了一个属性，再用if语句判断即可。 ②根据原型设计完成了对电影模块总体布局的设计：说明：由于这个模块布局也可用于后面的电视剧和综艺，所以花了比较长的时间来构思。电影标题下方还有一个评分显示，这个我们主要想通过贴星星的图标来显示，所以要在后面再做。明天的计划： ①根据设计的模块总体布局实现完成电影模块。 ②设计评分星星的布局与组件的完成。每日小结： ①贴搜索小图标时出现错误。解决方法：微信开发小程序不能直接使用本地图片，所以百度搜索来解决方法后决定将图片转换成base64。 ②搜索框在输入的时候文字是贴着白框从左到右，与我们想要的有点距离的效果不一样。解决方法：我们在思考过后决定在<input>组件外在加一个<view>组件，这样就能产生我们想要的效果。说明：由于老师的gitlab服务器还没有搭好，所以我就将我的代码更新到我的github上：https://github.com/TC-TC/douban 若要到导入此项目，在填写项目appID时，找到project.config.json文件，用记事本打开，里面有个“appID”,复制即可打开。

2. form组件使用

阅读更多关于 2. form组件使用

1. 校验前端来的数据 2. 生成页面的HTML标签 3. 保留上次输入的内容，清空密码 form类创建 from django import forms class UserInfo(forms.Form): 　　user = forms.CharField(max_length = 32) 　　age = forms.InterField( ) 　　email = forms.EmailField( ) 使用 fm = UserInfor({"user":"fu", "age":20, "email":"123@qq.com"}) 检查数据是否合法：fm.is_vaild( ) 返回True 和 False 查看所有合法的数据 ret = fm.cleaned_data( ) 用get获取到user， age ， email的值查看不合法数据和原因 ret = fm.error( ) form标签渲染 1. {{ fm.as_p }} 渲染出所有的表单 2. {{ fm.user }}， {{ fm.age }} 渲染指定表单可控性强，在表单类中指定 label属性 {{ fm.user.label }} 3. 依靠循环写入 {% for hm in fm %} 　　{{ hm.label }}{{ fm }} 　　{{ hm.error }} {% endfor %}

vueJs的简单入门以及基础语法

阅读更多关于 vueJs的简单入门以及基础语法

vue的api vue官网API 1基础语法 1-1基本数据绑定 <div id="app"> {{ msg }} </div> //script new Vue({ el:"#app",//代表vue的范围 data:{ msg:'hello Vue' //数据 } }) 在这个例子中我们可以进行赋值 var app = new Vue(...); app.msg = '初探vue'; //那么页面的值就被改变了 1-2 v-html命令 <div id="app" v-html="msg"> </div> //script new Vue({ el:"#app",//代表vue的范围 data:{ msg:'<h1>你好，世界</h1>' //这里就不会是文本了而是会被当成是html标签了 } }) 1-3 v-on:click||@click指令 <div id="app"> <button v-on:clikc="clickHead">事件</button> <button @click="clickHead">事件</button> </div> //js new Vue({ el:"#app", methods:{ clickHead:functoin(){ alert('vue的事件绑定') } } }) //在es6语法中对象中的函数可以 const json=

订阅前端组件