前端开发

1.vue页面 引用 import VueImgInputer from 'vue-img-inputer' 组件 展示如下 <div class="prove-list-right"> <div class="prove-right-img" @change="showimgUrl"> <VueImgInputer id="imgjust1" v-model="imgUrl" theme="light" :imgSrc="默认的图" :nhe="false" noMask> </VueImgInputer> </div> </div> 2.js写法 export default { name: 'setting', data: () => ({ imgSrc: '默认图片的地址 不支持相对路径', imgUrl: '' }), mounted () { }, methods: { // 图片上传后返回地址 showimgUrl () { let formData = new FormData() formData.append('file', this.imgUrl) formData.append('token', this.$store.state.token.token) this.postForm(api.BaseUrl + api.modifyAvatar,

目前，互联网上有很多优秀且流行的JavaScript框架，比如JQuery,MooTools, Prototype和YUI，等等。介绍以上优秀JavaScript框架的网站和文章有很多，本文这里就不再赘述了。 要知道，世界上没有最好的框架之说，我个人的理解是：最适合你（你的团队）的框架就是最好的框架。 事实上，除了这些在国内已经相当知名的框架之外，国外还有很多有前景的JavaScript插件供我们选用，今天我就给大家介绍国外最有前景的10款JavaScript框架。 本文在介绍这些例子时，都会链接框架的官方主页和例子DEMO的链接，真正的应用还需要大家的学习和探索。 1. SproutCore 简介： SproutCore框架的主要特点是，强调将桌面应用程序的功能WEB化。官方提供大量和丰富的学习手册，并开通了一个Google小组来解决你遇到的问题，同时利于所有使用该框架的开发者相互交流。 SproutCore演示: 照片 , TAB选项卡 2. Spry 简介： SPRY 是一个Adobe为AJAX量身打造的JavaScript框架。SPRY一个非常大的特色就是能够与Adobe的其他产品进行无缝整合使用（如与 Dreamweaver, Flash和AIR等）。就像Adobe的其他优秀产品一样，SPRY也有相当优秀的文档资源提供，并有一个强大开发团队的支持。在他们的帮助下，你一定

起初温州动车出轨，他们抓了程序员； 我没有出声， 因为我不写动车代码。 接着携程网出现故障，他们抓了程序员； 我没有出声， 因为我不写旅游代码。 然后小米手机在天猫的数据造假，他们抓了程序员； 我没有出声， 因为我不写电商代码。 后来穿行删除代码，他们抓了程序员； 我没有出声， 因为我不删代码。 最后他们来抓我； 到那时候， 已经没有剩下能出声讲话的人了。 迷 · 马丁 · 尼莫拉 · 渡 —— 《我没有说话》 以上是我改编的一首诗，原文是德国牧师马丁·尼莫拉的一首诗（忏悔文），这首诗被镌刻在美国波士顿的犹太人大屠杀纪念石碑上。 原文是： 起初他们抓了所有的共产党人； 我没有出声， 因为我不是共产党人。 接着他们抓了所有的犹太人； 我没有出声， 因为我不是犹太人。 然后他们抓了所有的工会骨干； 我没有出声， 因为我不是工会骨干。 后来他们抓了所有的天主教徒； 我没有出声， 因为我属于新教。 最后他们来抓我； 到那时候， 已经没有剩下能出声讲话的人了。 事件回顾： 如何看待异乡好居老板娘控告程序员删代码？ 5月7号，我、i5ting（桑世龙）、寇云，李彬作为嘉宾参加了 SegmentFault 举办的 D-Day 天津前端专场大会 。 要说交情，在所有的嘉宾中我和李彬交情最浅了，仅仅是在大会当天加过一次面。而其他几位嘉宾我都见过了好几次。 但是看到李彬的朋友圈后，我当时简直是气炸了

1.组件间的关系 1.1 父子组件 ReactJS中数据的流动是单向的，父组件的数据可以通过设置子组件的props传递数据给子组件。如果想让子组件改变父组件的数据，可以在父组件中传一个callback(回调函数)给子组件，子组件内调用这个callback即可改变父组件的数据。 var MyContainer = React.createClass({ getInitialState: function(){ return { list: ['item1', 'item2'], curItem: 'item1' } }, // 改变curItem的回调函数 changeItem: function(item){ this.setState({ curItem: item }); }, render: function(){ return ( <div> The curItem is: {this.state.curItem} <List list={this.state.list} changeItem={this.changeItem}/> </div> ) } }); var List = React.createClass({ onClickItem: function(item){ this.props.changeItem(item); }, render:

现在，几乎整个互联网行业都缺前端工程师，不仅是刚起步的创业公司，对上市公司乃至巨头这个问题也一样存在。 据统计，国外的前端开发人员和后端开发人员比例约1:1，但是在国内比例却在1:3以下，Web前端开发职位人才缺口巨大，前端工程师的发展之路十分有“钱”景。 每天，HR 群都有人在吐槽招不到前端工程师。对于这些需求，高级招聘人员也无能为力，因为在供不应求的前端招聘市场上，优秀的前端工程师才是有话语权的那一方。 web前端的火热，不仅仅是因为招聘市场需求量大，还有一个重要的原因就是，入行门槛低，入门简单。真的是这样吗？0基础的小白也能转行吗？让我们一起来看看吧！ 一、web前端入行门槛低吗？ 对于这个问题，应该辩证地看。相对于IT技术类的其他岗位，web前端绝对算是门槛较低的，当然对应的起点也低。如果是小白入行或转行到IT技术的话，建议选择web前端。 它的门槛低主要体现在两个方面： 1. Web前端入门门槛低体现在HTML和CSS上，前者只是结构标签，后者是样式配置，入门是非常简单的，大家可以到网上找一些相关视频学习，也可以找相关书籍来看，比如《Head First HTML and CSS》《CSS权威指南》等，虽然很枯燥，但是只要能啃下来就会发现，确实很管用。 2. Web前端入门门槛低的另一个重要体现就是，符合82定律，也就是20%的东西使用率占到80%。所以很适合囫囵吞枣

现在用户对于产品的选择不仅仅是内容的完善，同时也更加注重产品的体验以及交互，因此前端开发工程师的重要作用愈发明显。2019年已经接近一半，很多准备入行前端开发工程师的或者还在犹豫小伙伴们，不知道准备得怎么样了呢？今天来给大家讲讲，在2019年，我们学习前端开发，如何才能高效学会前端开发？ 零基础起步学前端开发 学习任何一门技术，都是从零开始的，前端开发也是一样。从事编程开发工作，必须先从语法基础开始学习，通过掌握语法最终组成产品效果。前端开发的基础语法包括：HTML+CSS+JavaScript，这是前端开发最基本也是最核心的3个语言。 　　1、HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。 　　2、CSS就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用table布局的时候，只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。 　　3、JavaScript是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了，在网页中，所有的数据渲染，特效的交互都需要利用JavaScript，来影响浏览器的显示。在JavaScript部分学习，主要还是要去理解好交互的原理，把原理分析清楚，真的理解语法

http://www.w3cplus.com/css/less 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT） 众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。 最好的入门教程——官网地址：http://lesscss.org/ 最佳实践之一——Bootstrap 由于内容较多，特设目录一坨： 二、搭建学习环境 三、内联样式和外联样式 四、语法 1. 注释 2. 变量（Variable） 列表类型 3. 嵌套（Nested） 4. 父选择器引用（ParentSelector） 　 5. 导入指令（Import） 6. 继承（Extend） 　　 6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。 　　 6.2. 父选择器不支持变量形式 　　 6.3. media query影响继承的作用域 　　　　 6.3.1. media query内的extend操作

前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端的软件。比如你要写文档，一般会打开Office 2013之类的本地软件；但是你也可以选择在浏览器里输入一个网址，再比如用桌面客户端来收发邮件，但你也可以直接用浏览器登陆gmail亦或者QQ邮箱，直接把这个当客户端用。总之就是使用网页版代替本地软件。 Mobile Web App 当然就是指在手机端打开的Web App。 移动客户端的开发类型 Native App（原生APP），也就是完全使用移动设备系统语言写的客户端，iPhone iPad就是纯Object-C，安卓就是纯JAVA, 就是用户看到的界面,体验到的交互都是原生的。这是性能最棒的开发方式，但灵活性就没下面的好。 Web App, 这个就是在移动浏览器里打开的，纯HTML+CSS+JS，说白了就是个网页，只不过非常的富应用，就是在浏览器里打开的页面。。IOS支持可以在桌面创建访问的快捷方式，但是说到底还是打开Safari跑。。而且对设备硬件的接口什么的挺薄弱。 Hybrid App.[HTML5 in mobile devices] 这个还是第一次看到这个概念

本文采用问答模式,目的是深入HTML内部，去学习一些我们不经常关注，但却实实在在存在的problem. 文章内容略显装逼，如果大家受不了，请带好护目镜。 什么是Doctype?能吃吗？ 我想使用过sublime的同学，应该会有一个snippets。 !+[TAB] 结果就是: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 没错，不知不觉中，!DOCTYPE html已经变为标准了。 没错，就是因为H5的出现。 Doctype就是用来告诉browser用什么文档标准来解析这个文档. 而!DOCTYPE html就是告诉浏览器使用h5的标准来解析文档。 说起DocType的内容，这应该算是一段血泪史。 一开始HTML是基于SGML来进行编译的，通过指定DTD，我们告诉浏览器使用哪一种DTD来对文档进行解析。在HTML5以前的title上，我们都需要指定某一个DTD。 以前比较流行的有:HTML 4.01/XHTML. 分别各有3中。 常见的就是比较宽松的DTD： 比如:HTML4.01 Transtional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

现在前端工程师的工作已经不想几年前那样，仅仅写一些页面调整一下样式就可以拿到高薪了。由于前端技术的发展，以及企业对前端工程师的要求越来越高，现在前端工作也越来越复杂。不过只要掌握目前比较流行的主流框架，完全可以轻松应对老板提出的各种需求。今天就和大家聊聊前端工程师必须了解的主流前端框架。 已经从事前端工作，或者正在学习前端开发的朋友们都知道。HTML /CSS/JS是前端开发的基本功。其中 HTML负责结构，网页想要表达的内容由 html书写。 CSS负责样式，网页的美与丑由它来控制， JS负责交互，用户和网页产生的互动由它来控制。 具体来说说目前有哪些主流的前端框架！ 1.Bootstrap 它可以让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架，让 web开发更迅速、更简单。它还提供了更优雅的 HTML和 CSS规范，它即是由动态 CSS语言 Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持十几的 JavaScript、 jQuery插件以及组件定制等。 2. Layui 它是一款口碑极佳的 web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 layui 首个版本发布于 2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API