随笔分类 - WEB前端学习笔记
这里是博主在学习前端时所整理的笔记，希望对象学习前端的人有所帮助。
摘要：关于vue 1、注意 如果使用老版的非自定义组件模式，即manifest中"usingComponents":false，部分模版语法不支持，但此模式已于2019年11月起下线。 2、data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
阅读全文
摘要：服务器端渲染（SSR) 知识储备 ES6 Nodejs Vue React Angular 什么是服务器端渲染 前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改
阅读全文
摘要：Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js 创建两个兄弟组建 C2.vue C1.vue index.vue 注意:这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信 将Bus注入到Vue的prototype上
阅读全文
摘要：一、WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯框架https://workerman.net HTTP是无连接的：有请求才会有响应，如果没有请求，
阅读全文
摘要：一、信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识，前端单打独斗出不来任何效果，必须有接口配合，写一个带有分页、关键词查询的接口： 分页接口：http://127.0.0.1:3000/info?page=1 查询接口：http://127.0.0.1:3000/searc
阅读全文
摘要：一、双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签，这里的view就是div。 {{}}这样的插值写法，叫做mustache语法。mustache是胡子的意思，因为{{}}像胡子。 要在同名js文件下的data属性中定义： 所有的框架：
阅读全文
摘要：一、小程序概述 2017 年 1 月 9 日小程序正式上线，腾讯开放了个人开发者开发小程序，小程序从此就开始火爆，这一年，小程序狂揽 4 亿用户、1.7 亿的日常活跃，上线 58 万个。这是一个巨大的机会，对于企业宣传，拉新用户存在变革性的影响。 小程序的本质是：轻应用，就是不用安装就能使用的手机A
阅读全文
摘要：一、上传 formidable天生可以处理上传的文件，非常简单就能持久上传的文件。 今天主要讲解的是，前后端的配合套路。 上传分为同步、异步。同步公司使用非常多，异步我们也会讲解。 1.1 先看一下antd中的Form和代码校验 我们看antd中的Form组件，https://ant.design/
阅读全文
摘要：一、redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的，二选一，它们两个都可以很好的实现一些复杂情况下redux，本质都是为了解决异步action而生，使redux保持完整性，不至于太过混乱。redux-saga 是一个用于管理Redux 应用
阅读全文
摘要：一、ES6的Set、Map数据结构 Map、Set都是ES6新的数据结构，都是新的内置构造函数，也就是说typeof的结果，多了两个： Set 是不能重复的数组 Map 是可以任何东西当做键的对象 ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 let s
阅读全文
摘要：一、Redux整体感知 Redux是JavaScript状态管理容器，提供了可被预测状态的状态管理容器。来自于Flux思想，Facebook基于Flux思想，在2015年推出Redux库。 中文网站：http://www.redux.org.cn/ 官方git：https://github.com/
阅读全文
摘要：一、React生命周期 一个组件从出生到消亡，在各个阶段React提供给我们调用的接口，就是生命周期。 生命周期这个东西，必须有项目，才知道他们干嘛的。 1.1 Mouting阶段【装载过程】 这个阶段在组件上树的时候发生，依次是： App.js： Child组件： 1.2 Updating阶段【更
阅读全文
摘要：一、使用动态样式表 1.1 LESS使用 1.2 LESS和webpack结合 希望在React项目中使用less，此时就需要webpack打包的时候顺便进行less翻译 安装依赖： 修改webpack.config.js配置： 样式会被webpack编译后出现在head标签中 1.3提炼样式表 e
阅读全文
摘要：一、组件内部的State 1.1 state state叫状态，是每一个类式组件都有的属性，但函数式组件，没有state。 state是一个对象，什么值都可以定义。 在任何类式组件的构造函数中，可以用this.state = {} 来给类的实例添加state属性，表示“状态”。 在render()函
阅读全文
摘要：一、React项目起步配置 官网：https://reactjs.org/ 文档：https://reactjs.org/docs/hello-world.html 中文：http://react.css88.com/ 2013年被开源，2014年在中国彻底火爆。 React是CMD架构，现阶段需要
阅读全文
摘要：一、Vue-router（路由） 1.1路由创建 官网：https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做
阅读全文
摘要：一、分页排序案例 后端负责提供接口（3000） 前端负责业务逻辑（8080） 接口地址：从8080跨域到3000拿数据 http://127.0.0.1:3000/shouji http://127.0.0.1:8080/api/shouji 后端app.js var express = requi
阅读全文
摘要：一、TodoList 1.1安装依赖 安装相关依赖： 1.2配置虚拟服务器 【第一步：安装依赖】 【第二步：json-server的服务器启动】 启动需要json文件作为支撑，新建data.json文件做服务数据： 最终没有使用webpack-dev-server模拟服务器 配置webpack.co
阅读全文
摘要：一、日历组件 new Date()的月份是从0开始的。 l App.vue父组件： <template> <div> <MonthView :year="year" :month="month"></MonthView> </div> </template> <script> import Mont
阅读全文
摘要：一、Vue的生命周期 生命周期就是指一个对象的生老病死的过程。 用Vue框架，熟悉它的生命周期可以让开发更好的进行。 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着，你不能使用箭头函数来定义一个生命周期方法 (例如 created: () =
阅读全文