前端笔记

前端笔记Vue项目day2(六）

1、提供的静态数据数据存放在vue中data属性中[mw_shl_code=applescript,true]varvm=newVue({el:'#app',data:{books:[{id:1,name:'三国演义',date:''},{id:2,name:'水浒传',date:''},{id:3,name:'红楼梦',date:''},{id:4,name:'西游记',date:''}]}})
我是小谷粒·2019-09-18 14:18

前端笔记Vue项目day2(五）

数组变异方法在Vue中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展[td]push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最
我是小谷粒·2019-09-18 14:36

前端笔记Vue项目day2(四）

过滤器Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示支持级联操作过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本全局注册时是filter，没有s的。而局部过滤器是filters，是有s的[mw_shl_code=applescript,t
我是小谷粒·2019-09-18 14:42

前端笔记Vue项目day2(三）

自定义指令局部指令局部指令，需要定义在directives的选项用法和全局用法一样局部指令只能在当前组件里面使用当全局指令和局部指令同名时以局部指令为准[mw_shl_code=applescript,true]/自定义指令-局部指令/varvm=newVue({el:'#app',data:{msg:{color:'red'}},//局部指令，需要定义在directives的选项directiv
我是小谷粒·2019-09-18 14:50

前端笔记Vue项目day2(二）

表单修饰符.number转换为数值注意点：当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。.trim自动过滤用户输入的首尾空白字符只能去掉首尾的不能去除中间的空格.lazy将input事件切换成change事件.lazy修饰符延迟了同步更新属性值的时机。即将原本绑定在input事件的同步逻辑转变为绑定在change
我是小谷粒·2019-09-18 14:26

前端笔记Vue项目day2(一）

表单基本操作获取单选框中的值通过v-model[mw_shl_code=applescript,true]男女newVue({data:{//默认会让当前的value值为2的单选框选中gender:2,},})[/mw_shl_code]获取复选框中的值通过v-model和获取单选框中的值一样复选框checkbox这种的组合时data中的hobby我们要定义成数组否则无法实现多选[mw_shl_c
我是小谷粒·2019-09-18 14:41

前端笔记

HTML------------------------CSS--------------------------伪类&伪元素伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式伪类：1.格式化DOM树以外的信息。比如：a标签的:link、:visited等。这些信息不存在于DOM树中。2.不能被常规CSS选择器获取到的信息
李默·2019-09-14 00:00

前端笔记Vue项目day1(七）

循环结构v-for用于循环的数组里面的值可以是对象，也可以是普通元素[mw_shl_code=applescript,true]{{item.message}}newVue({el:'#example-1',data:{items:[{message:'Foo'},{message:'Bar'}]，}})[/mw_shl_code]不推荐同时使用v-if和v-for当v-if与v-for一起使用时
我是小谷粒·2019-09-05 17:49

前端笔记Vue项目day1(六）

绑定style[mw_shl_code=applescript,true]绑定样式对象'内联样式newVue({el:'#app',data:{styleObject:{color:'green',fontSize:'30px',background:'red'}，activeColor:'green',fontSize:"30px"},styleObj1:{color:'red'},styleO
我是小谷粒·2019-09-05 17:54

前端笔记Vue项目day1(四）

按键修饰符在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符[mw_shl_code=applescript,true]常用的按键修饰符.enter=>enter键.tab=>tab键.delete(捕获“删除”和“退格”按键)=>删除键.esc=>取消键.space=>空格键.up=>上.down=>下.left=>左.
我是小谷粒·2019-09-05 17:06

前端笔记Vue项目day1(三）

mvvmMVC是后端的分层开发概念；MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model,View,VMViewModelmmodel数据层Vue中数据层都放在data里面vview视图Vue中view即我们的HTML页面vm（view-model）控制器将数据和视图层建立联系vm即Vue的实例就是vmv-on用来绑定事件的形式如：v-on:c
我是小谷粒·2019-09-05 17:33

前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方

目录axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量axios.all中的注意事项如下的请求：methods:{getData(){axios.all([axios.post('/xxxxxxxxxx',qs.stringify({"xxxxxxxxxx":"xxxxxxxxxx","xxxxxxxxxx":"xxxxxxxxxx"})),axios.post(
IT1995·2019-08-13 15:05

前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

一、WebSocket概述http://www.ruanyifeng.com/blog/2017/05/websocket.htmlWorkerman一款开源高性能异步PHPsocket即时通讯框架https://workerman.netHTTP是无连接的：有请求才会有响应，如果没有请求，服务器想主动推送信息给浏览器是不可能的。比如图文直播、聊天室原理：长轮询。setInterval(funct
mufengsm·2019-08-08 10:00

前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https

一、信息流小程序-GET请求案例1.1服务端接口开发一定要养成接口的意识，前端单打独斗出不来任何效果，必须有接口配合，写一个带有分页、关键词查询的接口：分页接口：http://127.0.0.1:3000/info?page=1查询接口：http://127.0.0.1:3000/search?word=李详情接口：http://127.0.0.1:3000/xiangqing?id=2const
mufengsm·2019-08-07 16:00

前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

一、双花括号{{}}插值和MVVM模式1.1体会{{}}插值index.wxml的标签不是html的那些标签，这里的view就是div。{{}}这样的插值写法，叫做mustache语法。mustache是胡子的意思，因为{{}}像胡子。我是首页{{1+1}}{{a}}年！要在同名js文件下的data属性中定义：Page({data:{a:100}});所有的框架：Angular、React、Vue
mufengsm·2019-08-07 16:00

前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR

一、小程序概述2017年1月9日小程序正式上线，腾讯开放了个人开发者开发小程序，小程序从此就开始火爆，这一年，小程序狂揽4亿用户、1.7亿的日常活跃，上线58万个。这是一个巨大的机会，对于企业宣传，拉新用户存在变革性的影响。小程序的本质是：轻应用，就是不用安装就能使用的手机APP。“跳一跳”养成了大家下拉寻找常用小程序的习惯。小程序对开发者而言也是非常友好的。微信就是一个“虚拟机”，小程序使用Ja
mufengsm·2019-08-07 10:00

前端笔记之微信小程序（一）初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR...

一、小程序概述2017年1月9日小程序正式上线，腾讯开放了个人开发者开发小程序，小程序从此就开始火爆，这一年，小程序狂揽4亿用户、1.7亿的日常活跃，上线58万个。这是一个巨大的机会，对于企业宣传，拉新用户存在变革性的影响。小程序的本质是：轻应用，就是不用安装就能使用的手机APP。“跳一跳”养成了大家下拉寻找常用小程序的习惯。小程序对开发者而言也是非常友好的。微信就是一个“虚拟机”，小程序使用Ja
weixin_30699955·2019-08-07 10:00

前端笔记之React（八）上传&图片裁切

一、上传formidable天生可以处理上传的文件，非常简单就能持久上传的文件。今天主要讲解的是，前后端的配合套路。上传分为同步、异步。同步公司使用非常多，异步我们也会讲解。1.1先看一下antd中的Form和代码校验我们看antd中的Form组件，https://ant.design/components/form-cn/所谓的装饰器指的是将一个组件作为一个函数的参数。MyForm是一个标准的组
mufengsm·2019-08-07 09:00

前端笔记之React（七）redux-saga&Dva&路由

一、redux-saga解决异步redux-thunk和redux-saga使用redux它们是必选的，二选一，它们两个都可以很好的实现一些复杂情况下redux，本质都是为了解决异步action而生，使redux保持完整性，不至于太过混乱。redux-saga是一个用于管理Redux应用异步操作的中间件。redux-saga通过创建Sagas将所有的异步操作逻辑收集在一个地方集中处理，可以用来代替
mufengsm·2019-08-02 16:00

前端笔记之React（六）ES6的Set和Map&immutable和Ramda和lodash&redux-thunk

一、ES6的Set、Map数据结构Map、Set都是ES6新的数据结构，都是新的内置构造函数，也就是说typeof的结果，多了两个：Set是不能重复的数组Map是可以任何东西当做键的对象ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。lets=newSet();s.add(1);s.add(2);s.add(3);s.add(3);s.add(3);s.add(
mufengsm·2019-08-02 13:00

前端笔记之React（五）Redux深入浅出

一、Redux整体感知Redux是JavaScript状态管理容器，提供了可被预测状态的状态管理容器。来自于Flux思想，Facebook基于Flux思想，在2015年推出Redux库。中文网站：http://www.redux.org.cn/官方git：https://github.com/reduxjs/redux首先要引redux.js包，这个包提供了Redux对象，这个对象可以调用Redu
mufengsm·2019-08-02 09:00

前端笔记之React（四）生命周期&Virtual DOM和Diff算法&日历组件开发

一、React生命周期一个组件从出生到消亡，在各个阶段React提供给我们调用的接口，就是生命周期。生命周期这个东西，必须有项目，才知道他们干嘛的。1.1Mouting阶段【装载过程】这个阶段在组件上树的时候发生，依次是：constructor(props)构造函数作用：初始化state值，此时可访问props、发Ajax请求componentWillMount()组件将要上树作用：常用于根组件中
mufengsm·2019-07-11 10:00

前端笔记之React（三）使用动态样式表&antd&React脚手架&props实战

一、使用动态样式表1.1LESS使用全局安装Lessnpminstall-gless创建1.less文件，然后可以用lessc命令来编译这个文件：lessc1.less1.css1.2LESS和webpack结合希望在React项目中使用less，此时就需要webpack打包的时候顺便进行less翻译安装依赖：npminstall--save-devless-loadernpminstall--s
mufengsm·2019-07-05 18:00

前端笔记之React（三）使用动态样式表&antd&React脚手架&props实战

一、使用动态样式表1.1LESS使用全局安装Lessnpminstall-gless创建1.less文件，然后可以用lessc命令来编译这个文件：lessc1.less1.css1.2LESS和webpack结合希望在React项目中使用less，此时就需要webpack打包的时候顺便进行less翻译安装依赖：npminstall--save-devless-loadernpminstall--s
RopeHuo·2019-07-05 18:00

前端笔记1.2--jQuery

4.jQueryjQueryHelloWord体验jQuery对象与DOM对象DOM处理：jQuery处理：jQuery对象转化成DOM对象利用数组下标的方式读取到jQuery中的DOM对象通过jQuery自带的get()方法DOM对象转化成jQuery对象通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了jQuery选择器之id选择器jQuery
Dylan666666·2019-07-05 14:18

前端笔记1.1

44.长度值长度单位总结一下，目前比较常用到px（像素）、em、%百分比，要注意其实这三种单位都是相对单位。45.水平居中设置-行内元素46.水平居中设置-定宽块状元素当被设置元素为块状元素时用text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。47.水平居中总结-不定宽块状元素方法（一）48.水平居中总结-不定宽块状元素方法（二）49.水平居中总结-不
Dylan666666·2019-07-05 14:07

前端笔记1.0

1.HTML小记，1.概述：就是标题标签3.是段落标签。4.网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成5.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。如：标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么必须放在的前面。如下图所示。6..HTML标签不区分大小写，和是一样的，但建议小写，因为大部分程序员都以小写为
Dylan666666·2019-07-05 14:59

前端笔记89——tab选项卡以及实现自动播放功能

前言在日常的开发当中，我们遇到点击不同的Tab出现不同的界面，但是我们要怎么去实现Tab呢？下面分享一下Tab有关的代码实例，有兴趣的小伙伴可以复制到编译器当中运行查看效果。实现Tab选项卡以及实现自动播放功能#wrap{width:300px;margin:50pxauto;font-size:0;}#wrapdiv{width:300px;height:150px;border:1pxsoli
野生杂学家阿博·2019-06-22 00:07

前端笔记84——setTimeout

setTimeout的简介setTimeout是一个函数，功能：等待多少时间后执行一段代码，类似于生活中的定时炸弹。setTimeout实现一个定时炸弹functionfn(){alert("炸弹爆炸了！！！")}//等到3秒以后执行fn函数setTimeout(fn,3000)
裕博·2019-06-21 23:47

前端笔记80——获取随机数

前言我们在日常的开发当中，我们需要获取随机数，那么前端是怎么去实现的呢？下面来分享一下我获取随机的方法。获取随机数的实例 开始 结束 varoStart=document.getElementById("start") varoStop=document.getElementById("stop") varoIpt=document.getElementById("ipt")
裕博·2019-06-21 00:00

前端笔记之React（二）组件内部State&React实战&表单元素的受控

一、组件内部的State1.1statestate叫状态，是每一个类式组件都有的属性，但函数式组件，没有state。state是一个对象，什么值都可以定义。在任何类式组件的构造函数中，可以用this.state={}来给类的实例添加state属性，表示“状态”。在render()函数的return中，可以用{this.state.a}插值来显示出每一个属性的值importReactfrom"rea
mufengsm·2019-06-06 11:00

前端笔记

1.inputplaceholder属性样式修改(颜色,大小,位置)input::-webkit-input-placeholder{/*placeholder颜色*/color:#aab2bd;/*placeholder字体大小*/font-size:12px;/*placeholder位置*/text-align:right;}2.点击高亮其他失去高亮$(this).addClass('新增样
魏了个无羡·2019-06-06 11:22

前端笔记之React（一）初识React&组件&JSX语法

一、React项目起步配置官网：https://reactjs.org/文档：https://reactjs.org/docs/hello-world.html中文：http://react.css88.com/2013年被开源，2014年在中国彻底火爆。React是CMD架构，现阶段需要webpack打包[email protected]必须安装以下三个依赖：npminstall
mufengsm·2019-05-29 10:00

前端笔记之Vue（七）Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

一、Vue-router（路由）1.1路由创建官网：https://router.vuejs.org/zh/用Vue.js+VueRouter创建单页应用，是非常简单的。使用Vue.js，我们已经可以通过组合组件来组成应用程序，当你要把VueRouter添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉VueRouter在哪里渲染它们。安装vue路由：np
mufengsm·2019-05-25 19:00

前端笔记之Vue（六）分页排序|酷表单实战&Vue-cli

一、分页排序案例后端负责提供接口（3000）前端负责业务逻辑（8080）接口地址：从8080跨域到3000拿数据http://127.0.0.1:3000/shoujihttp://127.0.0.1:8080/api/shouji分页排序接口：http://127.0.0.1:3000/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao
mufengsm·2019-05-20 17:00

前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域

一、TodoList1.1安装依赖安装相关依赖：npminstall--save-devwebpacknpminstall--save-devbabel-loaderbabel-corebabel-preset-es2015npminstall--save-devvue-loadernpminstall--save-devcss-loadernpminstall--save-devvue-temp
mufengsm·2019-05-19 11:00

前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域

前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域一、TodoList1.1安装依赖安装相关依赖：npminstall--save-devwebpacknpminstall-
RopeHuo·2019-05-19 11:00

学习RESTful架构前端笔记

1.Swaggerswagger就是一款让你更好的书写API文档的框架1.1SwaggerEditor安装与启动下载地址：https://github.com/swagger-api/swagger-editor解压swagger-editor全局安装http-server(http-server是一个简单的零配置命令行http服务器)npminstall-ghttp-server启动swagge
GuiSu97·2019-05-12 17:33

前端笔记之Vue（四）UI组件库&Vuex&虚拟服务器初识

一、日历组件newDate()的月份是从0开始的。下面表达式是：2018年6月1日newDate(2018,5,1);下面表达式是：2018年5月1日newDate(2018,4,1);或newDate(2018,5-1,1);下面表达式是：2018年5月31日（得到上个月的最后一天）newDate(2018,5,0);日的参数可以是0，也可以是负数，表示上个月底的那一天。下面表达式是：2018年
mufengsm·2019-05-07 10:00

前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

一、Vue的生命周期生命周期就是指一个对象的生老病死的过程。用Vue框架，熟悉它的生命周期可以让开发更好的进行。所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着，你不能使用箭头函数来定义一个生命周期方法(例如created:()=>this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同，this
mufengsm·2019-05-04 10:00

前端笔记：CORS

1.什么是CORSCORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresourcesharing），这个标准规定了浏览器如何向跨源服务器获取资源2.同源策略SOP(同源策略，Same-Origin-Policy)规定浏览器禁止页面加载或执行与自身来源不同的域的任何脚本。如果没有同源策略，便可能出现以下情景的安全问题：情景一用户在一个登录了网站A，浏览器保存着网站A的coo
赵伯舟·2019-04-23 23:10

前端笔记之NodeJS（四）MongoDB数据库&Mongoose&自制接口&MVC架构思想|实战

前端笔记之NodeJS（四）MongoDB数据库&Mongoose&自制接口&MVC架构思想|实战一、MongoDB数据库1.1NoSQL简介随着互联网web2.0网站的兴起，传统的SQL数据库（关系数据库
RopeHuo·2019-04-21 10:00

前端笔记之JavaScript（五）关于数组和字符串那点事

一、数组1.1数组概念数组(array)是一个有序的数据集合。说白了，数组就是一组数。数组内部可以存放一个或多个单独的数据，整体组成数组。定义数组最简单的方式：数组字面量。数组的字面量“[]”。习惯将数组赋值给一个变量。vararr=[];vararr=[1,2,3,4,5,6,7,888,999,666];arr[5]=88;//把数组下标为5的项改为88（设置数组中的某一项）console.l
疯狂的严先生·2019-04-20 20:00

【winter重学前端笔记13】浏览器：一个浏览器是如何工作的？CSS计算

加载css加载是异步，不会影响DOM树的构建，只是说在CSS没处理好之前，构建好的DOM并不会显示出来启发：所以CSS不能太大，页面一打开将会停留较长时间的白屏，所以把图片/字体等转成base64放到CSS里面是一种不太推荐的做法DOM去匹配cssrule的时候必须先等页面的css都下载完成启发：head中的css是要下载完的，body中放CSS的话，会重新计算css语法：选择器在9课程中可以了解
Rainie·2019-04-20 00:00

WEB前端笔记2——CSS

一话题引入1使用表格布局的缺陷嵌套层级太多,一旦出现嵌套顺序错乱，整个页面达不到预期的效果采用表格布局，页面不够灵活2解决方法使用HTML的块标签(配合css一起使用才有用处)：div标签自动换行，默认占一行span标签内容显示在同一行二CSS概述CascadingStyleSheets：层叠样式表美化HTML页面，HTML是网页的骨架，CSS来装修。将页面美化和代码进行分离，提高代码复用性。1.
岩流·2019-04-10 23:38

前端day01笔记

前端笔记一.web标准(3个标准)html简介1.1结构html1.2表现css1.3html是超文本标记语言1.4超文本是用来，描述网页文档的一种标记语言二.标签行为js2.1图片标签2.2标题标签-
Gxf_love·2019-04-02 22:16

前端笔记css

CSS：美化样式CascadingStyleSheets按照css的书写位置分为3类：行内样式表（内联样式）：将属性写在标签的style属性中，青春内部样式表：将style标签写在head标签中，包括选择器，选择器{属性：值；}，对标签进行添加选择器，进行筛选。外部样式表：将style标签写在一个css文件中,便于维护color:red;}html中：选择器{属性：值；属性：值；}选择器就是用来用
fakerlove·2019-03-26 23:01

前端笔记html

1.必备工具：谷歌浏览器等浏览器。sublime文本编辑器。photoshop：用于编辑图片等。（用于切图）2.浏览器就是为了展示界面。浏览器的兼容性很重要。五大浏览器：ie，谷歌，火狐，safari（苹果），opera。3.写前端的工具：sublime，webstrom，visualcode。4浏览器内核：分为两部分渲染引擎：负责取得网页的内容（HTML,XML，图像等），整理讯息（例如加入cs
fakerlove·2019-03-26 08:34

前端笔记03

CSS的盒子模型-css的盒子模型：万物皆盒子内边距：padding-top:padding-right:-padding-bottom:padding-left:-padding的规则padding:10px上下左右都是10pxpadding:10px20px上下是10px左右是20pxpadding:10px20px30px上是10px右是20px下是30px左是20pxpadding:10p
czc448969530·2019-03-20 15:28

前端笔记之——ajax

前言：AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。1、创建XMLHttpRequest对象XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进
lwthad·2019-02-05 08:34
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他