牧马人的忧伤

Vuex状态管理1、课程目标 Vuex核心概念和基本使用回顾 购物车案例 模拟实现Vuex 2、组件内状态管理流程下面我们通过组件内状态管理的流程来回顾一下什么是组件内状态管理。VUE中最核心的两个功能就是数据驱动与组件化，使用组件化的开发，可以提高开发效率，提高可维护性。 new Vue({ data(){ return { count:0 } }, template:`<div>{{count}}</div>`, methods:{ add(){ this.count++ } } }) 每个组件内都有自己的数据，模板，和方法。数据也称之为状态，每个组件都维护自己的状态。模板我们可以称之为视图，每个组件都有自己的视图，把状态绑定到视图上，最终呈现给用户。当用户与视图交换的时候，可能会更改状态，例如单击按钮，让count的值发生变化，当状态发生变化后，会自动更新到视图，更改状态的部分，我们可以称之为a ...

Vue Router一、Vue Router 回顾1、路由简介路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 SPA（Single Page Application） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求 在实现SPA过程中，最核心的技术点就是前端路由 前端路由 概念：根据不同的用户事件，显示不同的页面内容 本质：用户事件与事件处理函数之间的对应关系 2、实现简易前端路由 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变 ...

Vue响应式原理1、课程目标模拟一个最小版本的Vue 响应式原理在面试的常问问题 实际项目中出现问题的原理层面的解决 ​ 给Vue实例新增一个成员是否是响应式的？ ​ 给属性重新赋值成对象，是否是响应式的？ 为学习Vue源码做铺垫。 2、数据驱动在实现整个Vue响应式代码之前，我们先来了解几个概念。 第一个：数据驱动 第二个：响应式的核心原理 第三个：发布订阅模式和观察这模式 我们先来看一下数据驱动的内容： 数据响应式，双向绑定，数据驱动（我们经常看到这几个词） 数据响应式：数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了频繁的DOM操作，提高开发效率，这与Jquery不一样，Jquery是频繁的操作Dom 双向绑定： 数据改变，视图改变，视图改变，数据也随之改变( 通过这句话，我们可以看到在双向绑定中是包含了数据响应式的内容) ​ 我们可以使用v-model 在表单元素上创建双向数据绑定 数据驱动是Vue最独特的特性之一 ​ 开发过程中仅仅需要关注数据本身，不需要关心数据是如何渲染到视图中的。主流的MVVM框架 ...

Webpack铺垫(自学)yarn包管理器(必须)快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快 中文官网地址: https://yarn.bootcss.com/ 下载yarn下载地址: https://yarn.bootcss.com/docs/install/#windows-stable windows - 软件包(在笔记文件夹里) mac - 通过homebrew安装(看上面地址里) mac如果没安装过homeBrew先运行这个命令 /usr/bin/ruby -e "$(curl -fsSL http://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)" 上面命令不行: 试试这个: curl -o- -L https://yarnpkg.com/install.sh | bash (直接安装yarn) 不要安到带中文的路径下, 建议在C盘/ 使用yarn与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下 # 1. 初始化, ...

webpack从入门到进阶第1章 课程介绍学什么 webpack官网 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 代码转译 模块合并 混淆压缩 代码分割 自动刷新 代码校验 自动部署 课程安排 webpack基础配置 webpack高级配置 webpack性能优化 tapable钩子 AST抽象语法树的应用 webpack原理分析, 手写webpack 手写常见的loader和plugin 学习前提 JS基础 ES6 / ES7 语法 node基础 npm的基本使用 课程目标 掌握webpack的安装 掌握webpack的基础配置 掌握loader的配置 掌握plugin的配置 了解webpack性能优化 了解webpack中的tapable 了解AST的应用 深入学习webpack原理，手写webpack 第2章 ...

1. 小程序介绍微信小程序 ( Mini Program ) ，微信创始人 张小龙 ，在2017年1月9日宣布的微信小程序正式上线 1.1. 特点 触手可及，用完即走 拥有和原生APP的体验 用户量大 面向所有用户开放（企业，组织，个人均可以发布自己的小程序） 小程序就是套在 微信里面的原生APP 1.2. 小程序的运行环境1.2.1. 传统原生APP 1.2.2. 微信运行环境 1.2.3. 微信小程序运行环境 1.2.4. 小结问： 微信小程序和原生APP、微信有什么联系？ 答： 微信小程序就是套在微信里的原生APP 2. 开发环境的准备2.1. 注册账号访问注册页面，耐心完成注册即可。 2.2. 获取APPID由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后，可登录，然后获取APPID。 登录，成功后可看到如下界面 然后复制你的APPID,悄悄的保存起来，不要给别人看到😄。 2.3. 开发工具严格来说，微信小程序支持所有的开发工具，但是从效率和便利性来说，推荐如下 vs code 下载地址 推荐vs code ...

项目质量监测课程介绍没有规矩不成方圆，所以我们写代码也要有”规矩”，但是我们通常记不住所有的”规矩”，因为人嘛，不可能不犯错。但是，这难不到我们程序员，我们让机器、代码、程序帮我们搞定，让它们来帮我们进行代码质量检查，以便提高的程序的健壮性。 通常来说，项目的质量决定了： 软件项目的命运 软件项目的可维护性 软件项目的运维成本 软件项目的扩展性 为什么要进行代码质量检查？ 代码检查很重要，原因有三： 避免低级bug：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量； 统一代码习惯：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范； 空格 统一缩进 命名规范 … 保证线上代码质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。 如何让一个团队的人产出的代码都在一个基本水平底线之上呢？最初是靠制订规范。要确保规范得以执行只能靠人，所以文字规范成了code review的公共参照标准。单纯靠人的事最终都 ...

前端性能优化课程介绍任何小型企业，博主或成长型公司在网上出现时面临的最大挑战之一就是“页面加载时间”问题。除非您能确保尽可能快速无缝地加载每个页面，您才可以拥有世界上最好最引人注目的网站，否则您仍然无法赢得关注者的尊重和忠诚度。 根据当今网络上的所有主要浏览器公司的说法，如果每个网站都想要排名靠前，表现良好并确保客户满意，那么每个网站都需要快。毕竟，如果您的网页加载速度很慢，那么您会立即增加客户开始在其他地方搜索信息，而不是坚持下去的风险。 这也是为什么很多公司去找专门的技术人员来做SEO（Search Engine Optimization），即搜索引擎优化。 因为，页面的加载会影响到爬虫的爬取，页面加载速度是一项非常重要的指标。况且，页面优化直接影响到了用户体验。所以学习前端性能优化势在必行。 经常有面试官会问：从用户输入浏览器输入url到页面最后呈现 有哪些过程？有什么办法能优化页面性能？ 答案大致如下： 用户输入URL地址 浏览器解析URL解析出主机名 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时 ...

1. Taro1.1. 介绍官网 开发文档 Taro 是一套遵循 React 语法规范的 多端开发 解决方案。由京东的凹凸实验室团队于 2018-09-18 历时 3 个月正式发布。taro 的目标是使用一套代码达到多端统一。 多端： 微信小程序 H5 React Native 支付宝小程序 百度智能小程序 快应用 适配中 1.2. 注意虽然 Taro 拥有多端编译的能力，但是为了让我们的学习有一条比较完整的路线，本章课程是优先以微信小程序的开发为主线来介绍 Taro。 2. 运行项目2.1. 安装脚手架工具@tarojs/clinpm install -g @tarojs/cli 2.2. 创建项目taro init myApp 2.3. 打包编译2.3.1. 发布 微信小程序 npm run build:weapp H5 npm run build:h5 百度智能小程序 npm run build:swan 支付宝小程序 npm run build:alipay React Native npm run build:rn 2.3.2. 监控 微信小程 ...

1. mpvue-介绍mpvue 是美团团队开发的语法类似 Vue.js 的小程序的前端框架 官网 开发文档 1.1. 主要特性主要有以下特性 彻底的组件化开发能力：提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案：方便构建复杂应用 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload 支持使用 npm 外部依赖 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 H5 代码转换编译成小程序目标代码的能力 1.2. 优秀案例 1.3. 前置知识 前端基本功 html + css + javascript nodejs es6 webpack vue 微信小程序 1.3.1. 代码示例new Vue({ data: { a: 1 }, created () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) }, onShow () { // `this` 指向 vm 实例 console.log(' ...

1. wepy-介绍    WePY (发音: /‘wepi/)是一款腾讯团队于2016年11月发布的小程序组件化框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。 官网 1.1. 特性 类Vue开发风格 支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性，如Async Functions 支持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug 支持多种插件处理，文件压缩，图片压缩，内容替换等 支持 Sourcemap，ESLint等 小程序细节优化，如请求列队，事件优化等 1.2. 优秀案例    腾讯疫苗查询小程序、 腾讯翻译君小程序、 腾讯地图小程序、 玩转故宫小程序、 手机充值+、 手机余额查询、 手机流量充值优惠、 友福图书馆（开源）、 素洁商城（开源）、 NewsLite（开源）、 西安找拼车（开源）、 深大的树洞（开源）、 求知微阅读（开源）、 给你的 iPhone X 换个发型、 天天跟我买、 坚橙、 群脱单、 米淘联盟、 帮助 ...

一、Vue知识点串讲复习一下Vue中的核心知识点。 复习完基本的知识点以后，后面再来看一下其它的面试内容 1、基本使用下面，先来看一段最简单的代码，如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue基本使用</title> </head> <body> <div id="app"> {{msg}} </div> <script src="vue.js"></script> <script> //创建vue实例 const app = new Vue({ ...