qq_42972967的博客

原创 vue 父传子 子传父 兄弟组件传值

一、谁是父？谁是子？兄弟是怎样的关系？首先确认关系弄清楚谁是父组件，谁是子组件！例如：a组件引用了b组件，那么a组件就是b组件的父组件，b组件就是a组件的子组件，放图：在HelloWorld组件中引入了MySwiper组件，HelloWorld组件是MySwiper的父组件，同样MySwiper是HelloWorld的子组件，还有另外一种引用方式，全局注册组件：在main.js中全局注册这个MySwiper组件，在HelloWorld中引入使用同样是上述关系。兄弟组件自然不用多.

原创 Vue CLI

Vue CLI 环境要求： 需要 Node.js 8.9+ (推荐 8.11.0+)全局安装 Vue-CLI安装成功后，在命令行可以使用 vue 命令，比如查看当前安装的版本：如果执行上面后，命令行提示 'vue' 不是内部或外部命令解决方法：配置环境变量运行 vue create 命令来创建一个新项目会提示选择默认（ default ）还是手动（ Manually ）,默认的配置非常适合快速创建一个新项目的原型， 而手动设置则提供了更多的选项。 这里选择 def

原创 Vue Router打包Vue单文件组件

8.1 什么是路由Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。通过根据不同的请求路径，切换显示不同组件进行渲染页面。8.2 基本路由使用8.2.1 安装路由注意：要安装 vue 模块8.2.2 引入 vue-router.js8.2.3 HTML 路由切换<div id="app"> <div class="header"> <h1&...

原创 Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。通过根据不同的请求路径，切换显示不同组件进行渲染页面。要安装 vue 模块引入vue-router.js-html路由切换<div id="app"> <div class="header"> <h1>头部</h1> </div> <div class="left"...

原创 红绿灯

原创 搭建web服务器

1. 引入核心模块http2. 创建服务3. 启动服务回调函数有它有两个参数。第一个参数表示`来自客户端浏览器的请求`，第二个参数用来`设置对本次请求的响应`。它们的形参名并不重要，但是，一般第一个参数名使用req或者request表示，第二个参数使用res或者resposne表示。当某个客户端来请求这个服务器时，这个函数会自动调用，同时会自动给这两个参数赋值。第一个参数中包括本次请求的信息。 req：请求 req.url。本次请求的地址 req.method。 获取...

原创 模板引擎的理解

模板引擎介绍客户端中拿到请求的数据过后最常见的就是把这些数据呈现到界面上。使用模板引擎步骤1、准备一个存放数据的盒子 2 、引入template-web.js文件 3 、定义模板，一定要指定script的id和type属性4 、调用template函数，为模板分配数据，template函数有两个参数一个返回值5、将结果放到准备好的盒子中...

原创 缓速动画封装

清除历史定时器 获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。对步长进行二次加工(大于0向上取整,小于0项下取整)动画原理： 目标位置 = 当前位置 + 步长，检测缓动动画有没有停止直接移动指定位置...

原创 封装匀速动画

要用定时器，先清除定时器，一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突而定时器本身讲成为盒子的一个属性，我们要求盒子既能向前又能向后，那么我们的步长就得有正有负，目标值如果大于当前值取正，目标值如果小于当前值取负目标值和当前值只差如果小于步长，那么就不能在前进了，因为步长有正有负，所有转换成绝对值来比较...

原创 新年倒计时没过年都好使呦

获得新年那天时间戳建立定时器，获得当前时间，差值即是相差毫秒值计算时间填入HTML.

原创 事件绑定和事件触发发现的bug

$('a').trigger('click')并不能触发a标签中内容的点击事件，只是相当于触发了a本身的onclick，而不是像用户点击一样的事件。如果想要触发click事件，得把trigger绑定到a标签的子元素sapn上面，如下面图，强调两个事情triggerHandler() 阻止冒泡 trigger() 会进行隐式迭代...

原创 轮播图js首先获取要使用的元素，创建index是图片的索引，num是小圆点的索引，先实现自动滚因为默认向右滚所以向右滚和自动滚一样，通过建立计时器将封装好的自动滚函数导入，向左滚则与之相反让index

轮播图js首先获取要使用的元素，创建index是图片的索引，num是小圆点的索引，先实现自动滚因为默认向右滚所以向右滚和自动滚一样，通过建立计时器将封装好的自动滚函数导入，向左滚则与之相反让index--，鼠标移入左右按钮消失，移开左右按钮出现，左按钮通过监听点击事件实现调用向左滚函数，向右滚同理，小圆点利用迭代实现一个排它效果将css样式赋给类名为.avtive的<li>....

原创 轮播图的css给最外层大盒子相对定位，利用子绝父相让.content这个盒子利用js动起来从而实现轮播效果，小圆点则是通过类名在js调整它css样式左右按钮就设置了一些宽高属性和值利用浮动让它左右分布

原创 轮播图的html,图片有5张，最后一张为“假1“为了js写无缝连接使用，左右按钮分别用两个盒子加a标签，小圆点用无序列表简单解释了一下

原创 了解浏览器内核web标准和认识网页

1. 认识网页网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。思考：网页是如何形成的呢?总结网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来。。。2. 浏览器（显示代码）浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。可能你最熟悉的是 IE浏览器，但是。。。...