- 博客(53)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 HarmonyOS之JS的组件基础
基础组件组件是构建页面的核心，我们简单把组件分为以下基础组件，容器组件，媒体组件和画布组件。Text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区。需要注意的是跟HTML的不同之处，我们只能在text中定义相关文字，不能写在span中，所以在鸿蒙开发中，我们得抛弃一些传统思想。使用方式就比如<text class="title_text">{{headTitle}}</text>然后我们在Index.js中定义自己需要的变量，其实组件的布
2021-11-05 20:06:02
848
原创 字体图标iconfont的使用
什么是iconfontIconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具所以作为一名合格的前端程序员，一定要熟练使用iconfont为什么要使用iconfont简单点来说根据以往开发项目的经验，通常是下载img图片，并且直接插入到html中，说实话这个方法比较简单粗暴。但是却有很大的缺点。就是需要浏览器加载资源，降低浏览器性能。所以我找了一篇写的比较好的文章，是关于前端图片的处理技术，可以
2021-11-05 00:30:55
977
原创 Javascript高级知识之移动端和本地存储
移动端触屏事件移动端常见特效移动端开发插件框架window.sessionStoragewindow.localStorage
2021-11-04 00:49:52
1142
原创 Javascript高级知识之PC端
offsetoffset 翻译过来就是偏移量，我们使用offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset和style的区别offset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性，只能获取不能赋值所以，我们想要获取元素大小位置，用
2021-11-01 15:22:52
1044
1
原创 Javascript进阶知识之BOM
BOM概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。那我DOM和BOM的区别是什么呢？DOM是文档对象模型DOM 就是把「文档」当做一个「对象」来看待DOM 的顶级对象是documentDOM 主要学习的是操作页面元素DOM 是W3C 标准规范BOM浏览器对象模型把「浏览器」当做一个「对象」来看待BOM 的顶级对象
2021-10-30 14:50:22
606
原创 Javascript进阶知识之事件高级
注册事件两种方式，传统方式onclick和方法监听注册方式addEventListener利用 on 开头的事件 onclick<button οnclick=“alert(‘hi~’)”>< /button>btn.onclick = function() {}特点： 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数w3c 标准 推荐方式addEventListener() 它是一个方法IE9 之前的
2021-10-29 01:10:42
144
原创 Javascript进阶知识之DOM
WebAPI在以前的文章中，我已经记录了关于ECMAScript的相关基础，当然讲的是基于ES6以前的内容，关于ES6的进阶内容会在后面的文章中写到。本节文章主要把重心放在WebAPI中的DOM知识上。上图是它们之间的关系。Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）比如我们想要浏览器弹出
2021-10-24 23:23:43
185
原创 Javascript基础知识（3）
内置对象内置对象介绍JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象（详见内置对象的官网）前面两种对象是JS 基础内容，属于ECMAScript；第三个浏览器对象属于我们JS 独有的内置对象就是指JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象：Math、Date 、Array、String等Math对象Math 对象不是构
2021-10-19 14:37:21
511
原创 Javascript基础知识（2）
操作符算术运算符浮点数的最高精度是17位小数，因此不要直接判断两个浮点数是否相等var result = 0.1 + 0.2; // 结果不是0.3，而是：0.30000000000000004console.log(0.07 * 100); // 结果不是7，而是：7.000000000000001递增递减运算符前置递增和后置递增运算符可以简化代码的编写，让变量的值+ 1 比以前写法更简单单独使用时，运行结果相同与其他代码联用时，执行结果会不同后置：先原值运算
2021-10-19 11:36:57
306
原创 Javascript基础知识
变量基本语法var age=10;//声明一个名称为age的变量，并且为它赋值，称为变量的初始化var是一个JS关键字，用来声明变量。我们也可以按照其他编程语言的思路，给变量进行更新，并且可以同时声明多个变量，此时只需要使用一个var 多个变量名之间使用英文逗号来隔开。命名规范由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name严格区分大小写。var app; 和var App; 是两个变量不能以数字开头并且
2021-10-18 20:29:02
638
2
原创 Javascrip相关概念与认知
JavaScript相关概念是一种运行在客户端的脚本语言，并且不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器编程。（详情见Node.js入门基础）Javascript的作用（广泛应用于各个领域，说明其的重要性）表单动态校验网页特效基于Node.js的服务器开发桌面程序App控制硬件-物联网游戏开发浏览器分为渲染引擎和JS引擎渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的blink和web
2021-10-18 13:11:48
110
原创 Bug—行内块元素的显示问题
发现Bug今天在做flex布局的时候，我在父元素中引入了四个行内元素span，想测试flex的相关属性，代码如下所示。我本来是想在box这个盒子中放四个span，因为按理说应该正好放下四个span,但实际效果却不是这样。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
2021-10-11 19:17:18
231
原创 CSS的flex布局
传统盒模型布局方式CSS常见的布局方式如下图所示。传统布局方式就是通过盒子模型，使用display+postion+float属性完成布局。详见参考文章文档流布局display布局方式，按照文档的顺序一个一个的显示出来，块元素独占一行，行内元素共享一行浮动布局浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。定位布局通过 position 属性来进行定位flex布局2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面
2021-10-11 16:52:06
202
原创 HarmonyOS之Java事件模块
事件的介绍事件就是可以被识别的操作。常见的事件有单击双击长按和触摸事件我们可以给本文，按钮等添加不同的事件，这样就可以实现交互功能单击事件ClickedListener有四种写法自己编写实现类public class MainAbilitySlice extends AbilitySlice {Text text1 = null;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.
2021-10-09 19:30:28
211
原创 编写简单的鸿蒙入门应用
入门应用HelloWorld当新建完毕一个鸿蒙项目之后，自带有HelloWorld的代码页面中的包含关系如下图所示，MainAbility（界面）包含一个或多个MainAbilitySlice（子界面）MainAbilitySlice（子界面）包含要显示的内容MainAbility是项目启动的第一个界面，在界面里面不是直接显示内容的。在界面里面展示的是子界面，我们也称之为切片slice。在子界面里面才是显示内容的，这也正是为什么我们的逻辑代码都要写在slice文件中配置文件c
2021-10-09 12:15:07
919
原创 鸿蒙应用开发准备
鸿蒙开发使用语言JAVA C/C++ JSJAVA JS适用于手机应用的开发C/C++适用于硬件的开发鸿蒙开发完整流程开发的准备工作下载和安装node.js下载和安装DevEco Studio 并且修改相关配置修改字体大小取消注释斜体并修改注释颜色自动提示忽略大小写自动导包项目结构介绍最外面的结构MyApplication：整个项目的项目名External Libraries：项目中要导入的第三方jar包展开MyApplicati
2021-10-08 19:10:22
271
原创 鸿蒙系统的概述
系统全场景战略华为的1+8+N战略1是指手机 8是指平板 PC 眼镜 智慧屏 AI音响 耳机 手表 车机从手机的优势向外延展，N是指由生态系统合作伙伴提供的智能设备，基于用户为中心的家庭场景，提供全场景的娱乐社交。（初衷是解决在5G万物互联时代，各个系统间的连接问题）鸿蒙操作系统技术特征分布式设计分布式软总线，分布式数据管理和分布式安全分布式软总线在设备间搭建一条无形的总线，具备自发现，自组网，高带宽，低时延的特点。开发者是需聚焦于业务逻辑的实现，无须关注组网方式与底层协议
2021-10-08 17:42:53
1343
原创 项目背景介绍
CSS样式补充精灵图项目章将多张小图片，合并成一张大图片，这张大图片称之为精灵图。精灵图的优点是减少服务器发送次数，减轻服务器压力，提高页面加载速度。比如需要在网页中展示8张小图片，8张小图片分别发送，需要发送8次请求。合成一张精灵图发送，只需要发送1次这种小图片就是一张精灵图上的图标（自取，可以用在下面的代码中）使用步骤：创建一个盒子，设置盒子大小为小图片大小，设置精灵图为盒子的背景图片，将小图片左上角坐标取负值，设置给盒子<!DOCTYPE html><
2021-10-07 13:48:10
14254
原创 CSS的盒子模型
什么是盒子模型CSS中规定由内容区域，内边距区域，边框区域，外边框区域组成，这就是盒子模型。通过盒子的视角更方便的进行布局。内容区域的宽度和高度width和height来规定内容区域的大小边框给边框设置粗细，样式以及颜色内边距设置边框与内容区域之间的距离，padding从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的。外边距设置边框以外，盒子与盒子之间的距离。方法同内边距我们可以把盒子与盒子之间的距离，换一种说法盒子的计算公式盒子尺寸3
2021-10-06 21:51:14
144
原创 CSS进阶知识
选择器进阶复合选择器分为后代选择器（空格）和子代选择器（>）后代包括：儿子，孙子和重孙子等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
2021-10-06 21:01:02
147
原创 HTML标签进阶知识
列表标签无序列表在网页中表示一组无顺序之分的列表，ul>liul标签中只允许包含li标签，li标签可以包含任意内容有序列表在网页中表示一组有顺序之分的列表，ol>liol表示有序列表的整体，用于包裹li标签自定义列表在网页的底部导航中通常会使用自定义列表实现dl>dt>dd <dl> <dt>帮助中心</dt> <dd>账户管理</dd> <dd
2021-10-06 01:50:15
204
原创 HTML基础认知和标签
HTML基础认知网页的知识网页是由文字，图片，音频，视频，超链接等组成常见的五大浏览器：IE，Firefox，Chrome，Safari和Opera渲染引擎浏览器中专门对代码进行解析渲染的部分。不同的浏览器它的渲染引擎也是不同的，如下图所示渲染引擎不同，导致解析相同代码时的速度，性能和效果也不同。根据用户体验的反馈，谷歌浏览器的渲染引擎速度快，性能高，效果好，所以在前端开发中推荐使用谷歌浏览器。（极少数情况需要使用火狐浏览器进行相关代码的调试）Web标准由三大部
2021-10-06 00:32:06
123
原创 网易云音乐案例总结
1. 网易云音乐的自动适配问题移动端如何适配?把所有px转成rem利用flexible.js – 网页宽度改变 – 自动切换html的font-sizeflexible.js是淘宝移动端的适配方法，可以解决所有适配问题// 首先是一个立即执行函数，执行时传入的参数是window和document(function flexible (window, document) { var docEl = document.documentElement // 返回文档的root元素
2021-10-03 19:36:29
473
原创 网易云音乐案例
案例目的了解如何引入网易云的nodeJS服务器通过网易云接口的部分功能实现简单的页面布局通过移动端案例逐渐熟练vant组件库1网易云音乐的本地接口下载网易云音乐node接口项目，在本地启动，为我们vue项目提供数据支持。并且在本地通过Nodemon启动服务，拿到数据，项目下载方式如下。https://binaryify.github.io/NeteaseCloudMusicApi/#/2网易云音乐案例的前端项目初始化初始化工程vue create music-demo下载所.
2021-10-03 19:18:29
872
原创 vue-router路由系统
vue路由简介和基础使用生活中的路由：设备和ip的映射关系node.js中的路由：接口和服务的映射关系前端路由：路径和组件的映射关系http://localhost:8080/#/homehttp://localhost:8080/#/search那么为什么要使用路由呢？一个网页可以局部刷新吗？就比如网易云音乐首页 https://music.163.com/单页面应用SPA指所有功能在一个HTML页面上实现（single page web application）使用路由的优点：整体
2021-08-27 15:43:58
235
原创 vue的进阶组件知识扩展
什么是动态组件,如何使用动态组件，如何切换在同一个挂载点，可以切换显示不同组件。vue内置的component组件，配合is属性。只要改变is属性的值，变为要显示的组件名即可组件缓存vue内置的keep-alive组件把要缓存的组件包起来，这要不会频繁的创建和销毁组件，页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态组件插槽当组件内某一部分标签不确定时，可以使用插槽技术。先在组件内使用slot占位，使用组件时传入具体标签。传入的标签会替换.
2021-08-26 23:51:11
116
原创 vue的进阶组件知识
vue的组件进阶如何自由切换两个组件呢？我们首先想到的是用v-if。在此介绍其他的方法。目标是动态组件- 切换组件显示，同一个挂载点要切换不同组件的显示。<template> <div> <button @click="comName = 'UserName'">账号密码填写</button> <button @click="comName = 'UserInfo'">个人信息填写</button>
2021-08-26 17:00:02
507
原创 vue生命周期和购物车案例进阶
vue的生命周期是什么vue从创建到销毁的过程钩子函数有哪些，分别作用是什么初始化，从创建到编译，beforeCreate/created，created函数能获取data，不能获取DOM挂载，从编译到显示，beforeMount/monuted,mounted中获取真实DOM更新，数据发生变化并且更新页面后，在updated中获取更新后的DOM销毁，一般进行手动消除计时器，定时器和全局事件axios与Ajax的关系以及原理一种前端异步请求后端的计数，ajax是浏览器w.
2021-08-16 09:39:29
148
原创 vue生命周期和购物车案例
1. 生命周期介绍首先来看下面两张图，一张是完整流程图一张是介绍vue四大阶段的八大方法图下面会详细介绍其使用情况。所谓生命周期，就是vue从创建到销毁的整个过程。上面八大方法我们简称为钩子函数，作用是在特定的时间点执行特定的操作，就比如在组件创建完毕后，我们可以在created生命周期函数中发起Ajax请求，从而初始化data数据。vue从创建->编译->显示->更新->销毁的过程。在每个过程中就会执行不同的方法。并且在上图我把整个生命周期分成了四个阶段。创建-
2021-08-16 08:54:16
223
原创 vue组件知识
1vue组件的封装过程 首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。2vue组件如何进行传值
2021-08-11 10:04:00
70
原创 vue组件基础
1.vue组件概念，创建和使用当我们遇到多个重复的标签，我们可以采用vue提供的单文件，组件方式来封装一套然后复用。那么什么是组件呢？1 组件是可复用的Vue实例，封装标签，样式和JS代码。2 组件化就是一种封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。3一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构样式和行为。那么如何来创建组件呢？每个组件都是一个独立的个体，代码里体现为一个独立的Vue文件。分为全局注册和局部注册。全局注册那就是
2021-08-10 10:29:30
297
原创 Vue的基础属性知识
1. Vue基础_更新检测,key作用在上一章我们提到过v-for数组，那么我们的需求是如何v-for数组变化，需要同步更新到页面。但是并不是所有的数组方法都会造成v-for的更新。<template> <div> <ul> <li v-for="(val, index) in arr" :key="index"> {{ val }} </li> </ul> <
2021-08-09 08:25:12
211
原创 Vue的认知理解
1. Vue的特点渐进式声明式渲染数据驱动视图 (响应式)极少的去写DOM操作相关代码双向绑定组件系统不兼容IE8及以下浏览器2. Vue的最大优势是什么 简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离, vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单. 相比传统网页, vue是单页面可以只刷新某一部分3. Vue和jQuery的区别是什么 jQue
2021-08-07 08:19:55
690
原创 Vue中的webpack进阶知识
Vue中的webpack进阶知识1什么是webpackwebpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目2webpack的优点专注于处理模块化的项目，能做到开箱即用，一步到位通过plugin扩展，完整好用又不失灵活通过loaders扩展, 可以让webpack把所有类型的文件都解析打包区庞大活跃，经常引入紧跟时代发展的新特性，能为大多
2021-08-04 09:09:09
132
原创 Vue中的webpack打包工具
目录1webpack基本概念2webpack使用步骤3webpack的配置4webpack开发服务器1webpack基本概念下面给出了webpack的官方网站概念 | webpack 中文文档 (docschina.org)以前写完的网站，文件很多并且体积很大，因此我们可以用它来简化自己的代码。它的本质是一个第三方模块包，用于分析，并且打包代码。2webpack使用步骤在我们使用webpack前，需要下载yarn,并且使用yarn init命令声明一个packa.
2021-08-04 08:21:24
469
原创 ES6模块化与异步编程
目录1ES6模块化2Promise3asycn/await4EventLoop5宏任务与微任务6数据库API接口1ES6模块化其实以前的文章也涉及到过ES6点的相关知识，但是总结的不算太完全，并且并没有深刻的认识。所以我又重新对知识点进行了一遍梳理，因为ES6的相关语法可以帮助我们更好理解Vue的相关知识2Promise3asycn/await4EventLoop5宏任务与微任务6数据库API接口...
2021-08-02 10:30:22
344
vue天猫页面项目.zip
2021-09-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人