- 博客(34)
- 收藏
- 关注
RSS订阅
原创 你好，Vue (Vue核心)_01
一、简介、初识Vue中文官网: https://cn.vuejs.org/遵循MVVM模式，编码简洁，体积小，运行效率高，适合移动/PC端开发。1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；3.root容器里的代码被称为【Vue模板】；4.Vue实例和容器是一一对应的；5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；6.{{xxx}}中的xxx要写js表达式，且xxx可以
2022-03-30 19:14:33
1689
3
原创 Vue(全局事件总线)_04
一、理解1.Vue原型对象上包含事件处理的方法1)$on(eventName,listener少：绑定自定义事件监听2)$emit(eventName,data:分发自定义事件3)$off(eventName):解绑自定义事件监听4)$once(eventName,listener):绑定事件监听，但只能处理一次2.所有组件实例对象的原型对象的原型对像就是Vue的原型对象1)所有组件对象都能看到Vue原型对...
2022-04-21 08:48:50
740
2
原创 Vue(组件间的通讯方式和动画)_03
一、全局事件总线全局事件总线是一种组件间通信的方式，适用于任意组件间通信。要想使用，首先我们进行安装.。安装全局事件总线：new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事件总线：接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。metho...
2022-04-11 15:42:56
184
原创 Vue(组件化编程)_02
一、模块与组件、模块化与组件化1.模块理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件为什么: js 文件很多很复杂作用: 复用 js, 简化 js 的编写, 提高 js 运行效率2.组件理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)为什么: 一个界面的功能很复杂作用: 复用编码, 简化项目编码, 提高运行效率3.模块化当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用4.
2022-04-01 11:13:41
712
原创 关于Git的基本使用
一.Git基础1.什么是Git有什么特点Git是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出Gt的高性能和高可用性！2.Git的特性Gt之所以快速和高效，主要依赖于它的如下两个特性:①直接记录快照，而非差异比较②近乎所有操作都是本地执行3.Git中的三个区域①工作区：处理工作的区域②暂存区：已完成的工作的临时存放区域③Git..
2022-03-19 10:16:29
715
1
原创 NPM和yarn
一.认识NPMnpm(全称Node Package Manager，即node包管理器)是Node.js默认的、以JavaScript编写的软件包管理系统npm来分享和使用代码已经成了前端的标配官网:npm官网https://www.npmjs.comnpm被全球超过1100万开发人员所依赖拥有超过一百万个软件包，是世界上最大的软件注册表二.安装NPM工具npm是Node.js默认的软件包管理系统安装完毕node后，会默认安装好npmnpn本身也是基于Node.js开发的软件下载No
2022-03-17 20:02:35
167
原创 HTTP介绍
HTTP协议简介什么是通信1.通信的三要素通信的主体，内容，和方式2.互联网中的通信举个例子：服务器把学院简介通过响应的方式发送给客户端浏览器通信的主体是服务器和客户端浏览器通信的内容是学院简介通信的方式是响应什么是通信协议1.互联网中的通信协议客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议.网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议(HyperText Transfer Protocol)简称HTTP协议。
2022-03-17 15:14:24
523
2
原创 Ajax之XMLHttpRequest的基本使用
XMLHttpRequest是浏览器提供的JS对象，可以请求服务器上传的数据资源一.使用xhr发起GET请求一般分为四个步骤：1.创建xhr对象2.调用xhr.open()函数3.调用xhr.send()函数4.监听xhr.onreadystatechange事件<script> // 1. 创建 XHR 对象 var xhr = new XMLHttpRequest(); // 2. 调用 open 函数
2022-03-16 11:36:43
525
原创 JS面向对象之this关键字
一.函数内this的指向代码验证：<body> <button></button> <script> // 1.普通函数 this 指向window function fn() { console.log('普通函数的this' + this); } window.fn(); // 2.对象的方法 this 指向的是对象 o
2022-03-07 17:49:23
282
1
原创 用一个小例子快速上手Echarts
下面将通过案例点位分布统计来实际操作怎么使用echarts关于下载，引用不会的可以去上篇博客，地址如下：https://blog.csdn.net/weixin_42442856/article/details/123087706https://blog.csdn.net/weixin_42442856/article/details/123087706记住三步，轻松搞定第一步：初始化echarts实例对象准备一个具备大小的DOM容器 <!-- 点位 --> .
2022-03-04 15:42:31
134
4
转载 ECharts实现数据可视化（1）——简单介绍
echarts的网址 http://echarts.baidu.com/我以制作桑基图为例，讲解一下echarts的用法。第一步：去ecahrts选择自己需要的模板，并且下载到本地，下载之后是.html的文件，直接浏览器打开运行。我下载的是sankey模板。第二步：更改字段数据，用编辑器打开下载下来的文件，更改模板的数据，编辑器推荐notepad++或者sublime text。第三步，以浏览器打开运行测试，根据实际需求做了修改，数据没有实际意义。五分钟就能入门的ec
2022-02-23 13:18:57
835
原创 jQuery之王者荣耀手风琴案例
不用插件来练习王者官网的手风琴案例先看效果图：结构分析：首先，是大小图的切换。当鼠标从小图上经过时，由当前的小图切换为大图，所以，每位英雄我们都要准备一张大图和一张小图。然后是将大图隐藏，鼠标????经过时，小图淡出，大图淡入，这里我们使用jQuery来改变li标签的宽度，综合起来达到渐变的效果。HTML： <div class="king"> <ul> <li class="current">
2022-01-10 14:45:37
514
3
原创 小游戏-用JS完成贪吃蛇
效果图：完整代码如下：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
2022-01-05 15:19:48
2572
3
原创 js完成卡片式列表效果(移动+阴影)
先看看效果图吧1.给每个卡片设置绝对定位，给父盒子设定相对定位。调整好位置后设置bottom属性，这个很重要。.brick-list li { position: relative; bottom: 0; z-index: 1; float: left; width: 234px; height: 300px; margin-left: 14px; margin-bottom: 14px; text-align: center
2021-12-31 10:22:18
1376
原创 用JavaScript制作导航栏切换
效果图：先写HTML代码：<div class="tab"> <div class="tab_list"> <ul> <li class="current">国际新闻</li> <li>国内新闻</li> <li>体育新闻</li> .
2021-12-24 19:38:48
3134
7
原创 简单的纯JS小游戏--消灭星星
先看看效果图：因为CSDN图片大小的限制，所以只截了部分区域先准备css和一张星星图片，很简单，body背景设为黑色。<style> body { background-color: black; } </style>就直接写JS代码了，解释都写在注释里面了<script> function start() { //设置一个定时器，重复执行的
2021-12-24 19:24:30
4885
原创 使用JavaScript制作轮播图
纯js，不使用轮播图控件怎么做轮播图呢，往下看吧效果图：1.可点击小圆点切换图片2.可点击左右按钮切换图片3.可自动播放先上CSS和HTML代码：<body> <div class="main"> <div class="focus fl"> <a href="javascript:;" class="arrow-l"><</a> &
2021-12-20 20:20:26
918
2
原创 JavaScript做弹出式可拖动登录框（拖动的模态框）
效果图展示：总体来说实现起来比较简单，老规矩，先搭建html框架，代码如下：<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登录会员 .
2021-12-20 15:05:10
1771
1
原创 JavaScript DOM获取元素
目录一、根据根据ID获取getElementById二、根据标签名获取getElementsByTagName三、通过HTML5新增方法获取四、获取特殊元素一、根据根据ID获取getElementById注意：1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面2.get 获得element 元素by 通过驼峰命名法3.参数id是大小写敏感的字符串4.返回的是一个元素对象5.console.dir打印我们返回的元素对象更好的查看里面
2021-12-15 14:25:41
640
18
原创 使用JavaScript DOM制作简单留言板
效果图：先准备html代码：<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul></body>css代码如下：<style> * { margin: 0; padding: 0; .
2021-12-14 20:23:31
1137
1
原创 浅谈JavaScript函数及作用
一、为啥需要函数在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。二、函数的使用1.声明函数function 函数名( ){ //函数体代码}2.调用函数函数名( )调用的时候不要忘记加小括号口诀：函数不调用，自己不执行3.函数的封装函数的封装就是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数...
2021-12-09 16:33:31
681
4
原创 浅谈JavaScript内置对象常见案例
一、猜数字(Math.random())得到一个两数之间的随机整数 ，包括两个数在内，如果你的随机结果需要同时包含最小值和最大值，怎么办呢? 这样定义函数可以实现。 <script> function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var random = getRandom.
2021-12-09 15:35:16
1129
12
原创 JavaScript之循环
目录一、前言二、循环2.1 for循环2.2 双重for循环2.3 while循环2.4 do while循环三、continue和break关键字一、前言 为什么要用循环，在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成此类操作就需要重复执行某些语句。二、循环2.1 for循环在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。for语法结构：...
2021-11-26 09:34:42
270
2
原创 关于《生活资讯网》的错误笔记
最近练手了课后作业《生活资讯网》，是上课以来最打脑壳的四天，当它把以前的知识点都结合起来的时候，就是我们对于知识点掌握最漏洞百出的时候，犯了很多低级错误。错误一：固定定位的盒子必须有宽度 这是很基础的知识，但我老是忘记给宽，导致经常margin: 0 auto；没有反应错误二：定位的盒子居中只能通过left值修改1、margin:0 auto; 只能让标准流的盒子居中对齐。2、定位的盒子居中：先向右走父元素盒子的一半50%，再向左走子盒子的一半(margin...
2021-11-17 20:20:25
210
2
原创 移动Web开发之Bootstrap （Web框架）
一、为什么使用Bootstrap？1.标准化的html+css编码规范2.提供一套简洁，直观，强悍的组件3.有自己的生态圈，不断的更新迭代4.让开发更简单。提高了开发的效率二、如何使用Bootstrap？下载网址：Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网
2021-11-11 08:52:46
1799
13
原创 移动Web之Flex伸缩布局基础（一）
目录前言一、什么是Flex？二、Flex布局父项常见属性 2.1 flex-direction设置主轴的方向2.2 justify-content设置主轴上的子元素排列方式前言布局的传统解决方案，基于盒子模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。如果使用Flex布局，可以简便、完整、响应式地实现各种页面布局。一、什么是Flex？...
2021-11-04 09:14:18
211
22
原创 CSS3 高级教程之动画定义和使用
文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言CSS3可以实现HTML元素的动画效果，不使用JavaScript或者是Flash也能实现动画效果，在CSS3中新增了一个transition模块，通过一些简单的CSS 事件来触发元素的外观变化，使得显示的效果更加细腻。一、keyframes定义动画示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码...
2021-10-28 10:03:33
3886
12
原创 HTML5+CSS3制作底部导航栏
目录前言一、底部导航栏示例图二、HTML框架1.一号盒子2.二号盒子总结前言在日常的网上冲浪中，我们常常在网页最底部，看到一大堆链接，非常整齐，一目了然，那么是如何实现的呢？......提示：以下是本篇文章正文内容，下面案例可供参考一、底部导航栏示例图图1-底部导航栏二、HTML框架1.一号盒子由图1可知，该部分由两个个盒子划分，我们先搭建一号盒子的框架，这里我们用，<dl>...
2021-10-20 20:10:47
19786
6
原创 CSS3新特性之选择器
一.属性选择器属性选择器可以根据元素的属性及属性值来选择元素E[att] 选择具有att属性的E元素E[att="val"] 选择具有att属性且属性值等于val开头的E元素★★★E[att^="val"] 匹配具有att属性且值以val开头的E元素E[att$="val"]匹配具有att属性且值以val结尾的E元素E[att*="val"] 匹配...
2021-10-15 11:07:06
116
3
原创 CSS精灵图应用
目录一、为什么使用精灵图？有何缺点？二、使用步骤1.完成以下效果精灵图的使用2.完成框架3.添加样式4.获取坐标5.添加简易效果总结一、为什么使用精灵图？有何缺点？使用精灵图为了有效减少服务器接受和发送请求的次数，提高页面的加载速度。缺点是图片文件较大，缩放失真，突然变换图片更换比较复杂。二、使用步骤1.完成以下效果精灵图的使用2.完成框架我们可以在一个div里面放九个li标签来放置精灵图，再使用定位将精灵图定位在相应的li标
2021-10-11 09:33:26
398
3
原创 摄影分享网站之导航栏
一. 图片展示二.内容构成 该导航栏由一个大div标签里面包裹三个小div，分别用来放置logo,和搜索框加按钮，最后一个放置导航链接，链接里实现下拉菜单。1.logologo部分比较简单，把图片放入设定好大小的div中，使用float属性向左浮动显示：/* css部分style{ .nav .logo { float: left; margin-left: ...
2021-09-24 20:20:53
133
3
原创 CSS盒子模型
目录前言一、盒子的组成1.外边距2.内边距3.边框4.内容二、圆角边框三、盒子阴影四、文字阴影总结前言CSS的盒子模型是非常重要的，在前端代码编写上回经常用到。一、盒子的组成盒子由四个部分组成，即外边距，边框，内边距和内容。1.外边距 首先，我们来看外边距，CSS margin属性用于在任何定义的边框之外，为元素周围创建空间。外边距可让块级盒子水平居中，满足一下...
2021-09-23 09:56:13
80
3
原创 CSS选择器入门学习
文章目录前言 一、css是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言css样式将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不计的网页的外观和格式。 在所有浏览器和平台之间的兼容性。更少的编码、更少的页数和更快的下载速度。一、CSS是什么？CSS是层叠样式表，也称CSS样式表，是一种标记语言。其基本语法结构是这样的：选择器{属性：属性值}二、CSS基本选择器1....
2021-09-22 14:52:06
82
4
空空如也
列表进入详情页返回列表时保存搜索条件
2022-11-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人