Hu：-CSDN博客

原创 vue中常见的集中组件间的通信方式

1.父组件向子组件传递数据使用 props传递父组件：子组件：接收方式可以是数组接收，也可以是对象接收如下是对象方式进行接收2.子组件向父组件传递数据一般使用自定义事件进行传递（props也可以）子组件：父组件：兄弟组件之间一般使用全局事件总线：首先要安装全局事件总线(在实例初始化之前)在页面的dom节点生成之前（mounted）使用this.bus.bus.bus.on绑定事件使用this.bus.bus.bus.emit触发兄弟组件中的事件执行...

2021-07-10 21:11:44 133

原创 vue通过ajax请求数据的流程简单介绍

创建一个.js文件，用来对ajax请求进行封装如下：创建一个新的和axios有同样功能的实例（一般不对原有的axios进行修改）const service = axios.create({ baseURL:'/api', timeout:20000});创建一个新的.js文件用来放置接口请求函数如下;就是一个接口请求函数（get请求）export const reqCategoryList=()=>{ return request({ url:'

2021-07-05 21:01:08 553

原创 html+css+js——仿京东页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>18 不负每一分热爱</title></head><body><style> *{ margin: 0; padding: 0; } .d1{ width: 100%;

2021-06-20 19:49:47 868

原创 JavaScript8——手机验证码的简单界面实现

具体代码如下：<h>手机号:</h><input type="text"><button>发送</button><script> var btn=document.querySelector('button'); var tim=10; btn.addEventListener('click',function () { btn.disabled=true; var tim

2021-06-10 12:43:41 168

原创 JavaScript7——页面倒计时效果的实现

具体代码入下：<style> div{ width: 200px; height: 300px; background-color: #f3313b; margin: 40px auto; } span{ display: inline-block; width: 60px; height: 60px; background-color: bl

2021-06-10 12:40:17 271

原创 JavaScript6——导航栏及二级下拉栏的制作

这次以新浪的导航栏为例模仿制作了一个，具体代码如下：<style> *{ padding: 0; margin: 0; } .u1{ height: 41px; width: 100%; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; color: black; }

2021-06-06 11:39:12 1333 2

原创 JavaScript——tab栏切换效果的实现

具体代码如下：<style> *{ margin: 0; padding: 0; } .d1{ margin: 100px auto; width: 638px; } .d2{ height: 39px; border: 1px solid #ccc; background-color: #CCCCCC; } .d2 li{

2021-06-05 13:19:52 698

原创 JavaScript2——显示隐层文本框的内容

我们模仿一下世纪佳缘网的例子：当鼠标点击对话框的时候里面的内容隐层，并且对话框变成粉色，点击空白区域，对话框的内容又显示，并且对话框颜色又重新变成黑色。具体代码如下：<style> .box{ width: 600px; padding-left: 500px; } input{ color: #999; border-color: #999; } button{ bac

2021-06-03 18:59:22 192

原创 javaScript2——执行点击事件

首先，事件由事件源、事件类型、事件处理程序组成的。事件类型主要有：鼠标点击、鼠标滑过、键盘按下等等。事件处理主要是通过函数赋值的方式来实现的。下面以一个点击事件为例：设置一个（唐伯虎）按钮，然后按下按钮会弹出（点秋香）的页面具体代码如下：<button id="btn">唐伯虎</button><script>var btn = document.getElementById('btn'); //获取事件源btn.onclick=function

2021-06-02 20:05:10 971

原创 javaScript学习1——获取元素的几种方法

1.getElementById获取元素通过id来获取元素<div id="time">2018174</div><script> var timer = document.getElementById('time'); console.log(timer); console.log (typeof timer); console.dir(timer); //打印返回的元素对象更好的查看里面的属性和方法</script&

2021-06-02 17:06:21 319

原创微信小程序开发5——生命周期

组件生命周期组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。此时还不能调用 setData 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。在

2021-06-01 20:13:19 115

原创微信小程序开发4——利用自定义组件实现页面内容切换功能

首先展示一下要显示的功能：`首先需要在开发者工具中新建一个文件夹（components），分别在文件夹中新建.js .json .wxml .wxcss四个文件（可以右键文件夹，选择新建新建（component）。创建的这个文件我们称为子组件。然后在开发者工具中再新建一个页面，这个页面称为父组件。下面我们看一下子组件中的代码：.wxml<view class="tabs"><view class="tabs_title"><viewwx:for="{{t

2021-05-30 20:36:16 2909

原创微信小程序开发3——小程序图片轮转功能的实现

这次讲一下通过swiper标签来实现小程序中图片的轮转功能，来点实际的，现放代码和效果图，然后进行再讲解.wxml .wxssswiper{width:100%;height:calc(100vw * 263 / 439);}效果图展示：下面讲解一下所用到的标签和属性吧swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为autoplay 是否自动切换interval 自动切换时间间隔indicator-color 指示点颜色

2021-05-30 10:58:51 478

原创微信小程序开发2

上次简单介绍了一下微信小程序的开发工具，这一次就谈一下项目的全局配置文件（app.json），它主要包含了小程序的所有的页面路径，界面表现，底部tab栏等等其中pages字段：用于描述当前小程序的所有页面，让客户端知道当前你的小程序页面定义在哪个目录例如：“pages”:[“pages/biaoqian/biaoqian”,“pages/navigator/navigator”,“pages/button/button”,“pages/rich/rich”,“pages/daoru/daor

2021-05-29 21:35:41 495 2

原创微信小程序开发1

首先在微信官网注册账号并下载中微信开发者工具（或者使用vs code等也可以，只需要安装微信开发的插件就可以使用了）。这里我以微信开发者工具为例来进行讲解：上图是微信开发者工具的页面介绍。以上就是开发工具中的项目目录的简单介绍。每创建一个新的页面，都会包含.js、.json、.wxml、.vxss这四个文件。相对于传统web，微信小程序多了一层配置.json。...

2021-05-29 21:02:58 74

snjxh的博客