- 博客(49)
- 收藏
- 关注
RSS订阅
1原创 VUEX使用
vuex基础-statestate是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中定义state// 初始化vuex对象const store = new Vuex.Store({ state: { // 管理数据 count: 0 }})如何在组件中获取count?原始形式- 插值表达式App.vue组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，
2021-11-22 15:06:45
188
原创 小程序— npm包，MobX全局数据共享，API的promise化
使用 npm 包小程序对 npm 的支持与限制目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm 包有如下 3 个限制：① 不支持依赖于 Node.js 内置库的包② 不支持依赖于浏览器内置对象的包③ 不支持依赖于 C++ 插件的包总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。使用 npm 包 - Vant Weapp1. 什么是 Vant WeappVant Weapp 是有赞前端团队开源的一套小程序 UI
2021-11-04 22:13:14
477
原创 小程序 -自定义组件
自定义组件 - 组件的创建与引用1. 创建组件① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component” ③ 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：2. 引用组件组件的引用方式分为“局部引用”和“全局引用
2021-11-03 09:12:28
1983
原创 小程序 - 视图与逻辑
页面导航1. 什么是页面导航页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：① <a> 链接② location.href2. 小程序中实现页面导航的两种方式① 声明式导航⚫ 在页面上声明一个 <navigator> 导航组件⚫ 通过点击 <navigator> 组件实现页面跳转② 编程式导航⚫ 调用小程序的导航 API，实现页面的跳转页面导航 - 声明式导航1. 导航到 tabBar 页面tabBar 页面指的是被
2021-10-30 11:39:05
165
原创 小程序 - 模板与配置
WXML 模板语法 - 数据绑定1. 数据绑定的基本原则① 在 data 中定义数据② 在 WXML 中使用数据2. 在 data 中定义页面的数据在页面对应的 .js 文件中，把数据定义到 data 对象中即可：3. Mustache 语法的格式把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：4. Mustache 语法的应用场景Mustache 语法的主要应用场景如下：⚫ 绑定内容⚫ 绑定属性⚫ 运算（三元运算、算术运
2021-10-27 23:08:52
840
原创 微信小程序
微信小程序小程序简介1. 小程序与普通网页开发的区别a. 运行环境不同网页运行在浏览器环境中小程序运行在微信环境中b. API 不同由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如：⚫ 地理定位⚫ 扫码⚫ 支付c. 开发模式不同网页的开发模式：浏览器 + 代码编辑器小程序有自己的一套标准开发模式：⚫ 申请小程序开发账号⚫ 安装小程序开发者工具⚫ 创建和配置小程序项目第一个小程序 - 注册
2021-10-26 11:08:29
1359
原创 Vue初始化 axios 拦截器 proxy 跨域代理
vue-cli1. 什么是 vue-clivue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用② 基于 webpack③ 功能丰富且易于扩展④ 支持创建 vue2 和 vue3 的项目vue-cli 的中文官网首页：https://cli.vuejs.org/zh/2. 安装 vue-clivue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：2.1 解决 Windows
2021-09-23 12:13:52
1114
原创 JavaScript高级05 ES6
ES6相关概念（★★）什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增语法let（★★★）ES6中新增了用于声明变量的关键字let声明的变量只在所处于的块级有效 if (true)
2021-09-22 18:57:33
102
原创 JavaScript高级04 正则表达式
1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript
2021-09-22 18:48:12
96
原创 JavaScript高级03 闭包 递归
1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function
2021-09-20 16:25:51
183
原创 JavaScript高级02 原型 数组方法
1.构造函数和原型1.1对象的三种创建方式–复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age
2021-09-20 14:48:29
157
原创 JavaScript高级01 对象
1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于
2021-09-20 08:43:11
78
原创 JavaScript Web APIs DOM05 动画
**1.1. **动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是： 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整1.1.2 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候，判断步长是正值还是负值 1.如果是正值，则步长往大了取整
2021-09-19 20:01:52
83
原创 JavaScript Web APIs DOM06 移动端 本地存储
1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件如下：1.1.2 触摸事件对象（TouchEvent）TouchEvent 是一类描述手指在触摸平面（触摸屏
2021-09-18 22:42:10
212
原创 JavaScript Web APIs DOM04 元素偏移量
**1.1. **元素偏移量 offset 系列1.1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位1.1.2 offset 与 style 区别offsetoffset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding
2021-09-15 16:35:56
147
原创 JavaScript Web APIs DOM03 键盘事件 定时器 this指向 URL 同步异步
1.1. 常用的键盘事件1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
2021-09-14 21:23:55
154
原创 JavaScript Web APIs DOM02 DOM事件 鼠标事件
1.1. 节点操作1.1.1 删除节点node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script>
2021-09-11 19:07:39
170
原创 JavaScript Web APIs DOM01 排他思想 节点操作
1.1. 排他操作1.1.1 排他思想如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）给当前元素设置样式 （留下我自己）注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button&
2021-09-11 15:01:09
126
原创 JavaScript基础2 内置对象 字符串对象 简单复杂数据类型
1 - 内置对象1.1 内置对象JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等1.2 查文档
2021-09-08 09:38:46
193
原创 JavaScript基础1 作用域 对象
1 - 作用域1.1 作用域概述 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。JavaScript（es6前）中的作用域有两种：全局作用域局部作用域（函数作用域）1.2 全局作用域 作用于所有代码执行的环境(整个script标签内部)或独立的js文件。1.3 局部作用域 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称
2021-09-06 21:52:54
169
原创 vw vh移动端布局
1.移动端布局移动端布局—flex布局为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放需要移动端适配有如下方案：2.vw/vh是什么1.vw/vh是一个相对单位（类似em和rem相对单位）vw是：viewport width 视口宽度单位vh是： viewport height 视口高度单位2.相对视口的尺寸计算结果1vw = 1/100视口宽度1vh = 1/100视口高度例如：当前屏幕视口是 375像素，则 1vw 就是 3.75 像素， 如果当前屏幕视口
2021-08-26 08:29:00
267
原创 ES6模块化与异步编程高级用法
1. ES6 模块化的基本语法ES6 的模块化主要包含如下 3 种用法：① 默认导出与默认导入② 按需导出与按需导入③ 直接导入并执行模块中的代码1.1 默认导出默认导出的语法： export default 默认导出的成员1.2 默认导入默认导入的语法： import 接收名称 from ‘模块标识符’1.3 默认导出的注意事项每个模块中，只允许使用唯一的一次 export default，否则会报错！1.4 默认导入的注意事项默认导入时的接收名称可以任意名称，只要是合法的成
2021-08-25 20:40:58
443
原创 移动WEB开发之rem适配布局
1. rem 基础rem 单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小/* 根html 为 12px */html {font-size: 12px;}/* 此时 div 的字
2021-08-24 20:18:38
82
原创 移动WEB开发之flex布局
1. flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Fle
2021-08-23 20:41:00
257
原创 Vue中axios的复用
1.先封装一个axios并向外导出2.如果多个组件请求一个路径，可以将接口封装起来进行复用3.按需导入到组件当中4.直接调用api传递参数即可
2021-08-23 09:08:40
327
原创 动态组件 & 插槽 & 自定义指令
1. 什么是动态组件动态组件指的是动态切换组件的显示与隐藏。2. 如何实现动态组件渲染vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。示例代码如下：3. 使用 keep-alive 保持状态默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。示例代码如下：4. keep-alive 对应的生命周期函数当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。当组件被激活时，会自动触发组件的 activated
2021-08-18 21:12:46
566
原创 Props，生命周期，数据共享，ref的引用
1.组件之间的父子关系1.1使用组件的三个步骤1.2通过 components 注册的是私有子组件例如：在组件 A 的 components 节点下，注册了组件 F。则组件 F 只能用在组件 A 中；不能被用在组件 C 中。请大家思考两个问题：① 为什么 F 不能用在组件 C 中？② 怎样才能在组件 C 中使用 F？1.3 注册全局组件在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：2.组件的 props
2021-08-15 20:15:36
414
原创 Vue全家桶-Vuex
1. Vuex 概述1.1 组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据： EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件1.2 Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。1.3 使用 Vuex 统一管理状态的好处① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护② 能够高效地实现组件之间的数据共享，提高开发效率③
2021-08-09 21:13:07
104
原创 Vue全家桶-模块化开发，webpack
1. 模块化相关规范1.1 模块化概述传统开发模式的主要问题① 命名冲突② 文件依赖通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护1.2 服务器端模块化规范1. CommonJS① 模块分为 单文件模块 与 包② 模块成员导出：module.exports 和 exports③ 模块成员导入：require(
2021-07-28 17:21:34
270
原创 Vue全家桶-前端路由
1.路由的基本概念与原理1.1 路由路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为： 后端路由 前端路由1. 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系2. SPA（Single Page Application） 后端渲染（存在性能问题） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application）单页面应
2021-07-26 16:48:37
90
原创 Vue全家桶-前后端交互
1. 前后端交互模式1.1 接口调用方式原生 ajax基于 jQuery 的ajaxfetchaxios1.2 URL 地址格式1. 传统形式的 URL格式：schema://host:port/path?query#fragment1.schema：协议。例如http、https、ftp等2.host：域名或者IP地址3.port：端口, http默认端口80，可以省略4.path：路径, 例如/abc/a/b/c5.query ：查询参数，例如 uname=lisi&
2021-07-25 09:54:03
271
原创 Vue之组件化开发思想
1. 组件注册1.1 全局组件注册语法1.2 组件用法1.3 组件注册注意事项1. data必须是一个函数⚫ 分析函数与普通对象的对比2. 组件模板内容必须是单个跟元素⚫ 分析演示实际的效果3. 组件模板内容可以是模板字符串⚫ 模板字符串需要浏览器提供支持（ES6语法）4. 组件命名方式⚫ 短横线方式Vue.component('my-component', { /* ... */ })⚫ 驼峰方式Vue.component('MyComponent', { /* ...
2021-07-23 20:20:20
112
原创 Vue之表单操作，自定义指令，计算属性，侦听器，过滤器
1. Vue常用特性1.1 表单操作1. 基于Vue的表单操作⚫ Input 单行文本⚫ textarea 多行文本⚫ select 下拉多选⚫ radio 单选框⚫ checkbox 多选框2. 表单域修饰符⚫ number：转化为数值⚫ trim：去掉开始和结尾的空格⚫ lazy : 将input事件切换为change事件<input v-model.number="age" type="number">1.2自定义指令1. 为何需要自定义指令？内置指令不满
2021-07-22 20:32:32
410
原创 Vue基础指令
1. Vue概述Vue：渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建官网：https://cn.vuejs.org/v2/guide/⚫ 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue⚫ 灵活：在一个库和一套完整框架之间自如伸缩⚫ 高效：20kB运行大小，超快虚拟 DOM2. Vue基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤2.3 Vue.js之HelloWorld细节分析
2021-07-22 14:50:27
78
原创 数据库与身份认证
1. 数据库的基本概念1.1 什么是数据库数据库（database）是用来组织、存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。1.2 常见的数据库及分类市面上的数据库有很多种，最常见的数据库有如下几个：1.MySQL
2021-07-21 15:43:19
1544
原创 node模块化
1. 模块化的基本概念1.1 什么是模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。1. 编程领域中的模块化编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处：1.提高了代码的复用性2.提高了代码的可维护性3.可以实现按需加载1.2 模块化规范模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则。例如：1.使用什么样的语法格式来引用模块
2021-07-15 17:37:21
183
原创 服务器的基本概念与初识Ajax
1. URL地址1.1 URL地址的概念URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。常见的URL举例：http://www.baidu.comhttp://www.taobao.comhttp://www.cnblogs.com/liulongbinblogs/p/11649393.html1.2 URL地址的组成部分URL地址一般由三
2021-07-10 21:22:16
79
原创 HTML5 和 CSS3 提高
1. HTML5 的新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。声明：新特性增加了很多，但是我们专注于开发常用的新特性。基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。1.1 HTML5 新增的语义化标签 ：头部标签 ：导航标签 ：内容标签 ：定义文档某个区域 ：侧边栏标签 ：尾部标签
2021-06-20 16:41:30
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人