- 博客(49)
- 收藏
- 关注
原创 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关注的人