blog
blog copied to clipboard
wuxianqiang
博客系列
非 Prop 的属性说的是不带冒号的属性，比如常见的示例包括 class、style 和 id 属性。 当组件返回单个根节点时，非 prop 属性将自动添加到根节点的属性中。例如，在 `` 组件的实例中： ```js app.component('date-picker', { template: ` ` }) ``` 如果我们需要通过 `data-status` 属性定义 `` 组件的状态，它将应用于根节点 (即 div.date-picker)。 ```html ``` Vue...
 电子邮件是—种用电子手段提供信息交换的通信方式，是互联网应用最广的服务。通过网络的电子邮件系统，用户可以以非常低廉的价格（不管发送到哪里，都只需负担网费）、非常快速的方式（几秒钟之内可以发送到世界上任何指定的目的地），与世界上任何一个角落的网络用户联系。 在很多项目中，我们都会遇到邮件注册，邮件反馈等需求。在 node 中收发电子邮件也非常简单，因为强大的社区有各种各样的包可以供我么直接使用。Nodemailer 包就可以帮助我们快速实现发送邮件的功能。 Nodemailer是一个简单易用的Node.js邮件发送组件。 官网地址：https://nodemailer.com GitHub地址：https://github.com/nodemailer/nodemailer 为了实现这个功能，你首先要有一个邮箱；由于需要使用 SMTP 方式发送，你还需要开启相关功能。你可以登录你的邮箱，然后开启这个设置，以 QQ 邮箱为例：设置->账户->开启服务 (选择POP3/SMTP服务)->点击开启 (需要发送短信开启)->授权码生成。   这里要用到 nodemailer，需要自行安装： ``` npm install nodemailer ``` 打开官网可以看见一个小例子： ```js "use strict"; const...
对于爬虫我们首先想到的是 python，但是对于前端来说我们通常是 node 来写爬虫，去抓取网站的数据而已。 爬虫的基本流程  1、发起请求 使用http库向目标站点发起请求，即发送一个Request，第三方请求库如 request，axios 等。 Request包含：请求头、请求体等 2、获取响应内容 如果服务器能正常响应，则会得到一个Response Response包含：html，json，图片，视频等 3、解析内容 解析html数据：正则表达式，第三方解析库如cheerio，PhantomJS，JSDom.等 解析json数据：json模块 解析二进制数据:以buffer的方式写入文件。 #4、保存数据 数据库 接下来以爬去腾讯网文章数据为例，首先要知道网站的请求地址是 https://www.qq.com/，根据这个地址我们发送一个请求，得到网站的源代码： ```js const request = require('request'); const url =...
```html Document * { margin: 0; padding: 0; } .my-svg-path { transform: rotateZ(90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 2s ease; stroke-dashoffset: -260; } .text { display: flex; align-items: center; justify-content:...
您常常需要让用户在应用的各视图之间切换，不管是从列表换到详情视图，还是显示边栏导航。在这些视图之间设置动画可以吸引用户，并让您的项目更生动活泼。 1、使用transform来切换不同视图；避免使用 left、top 或任何其他会触发布局的属性。 2、确保使用的所有动画简洁明快，并且设置较短的持续时间。 3、考虑在屏幕尺寸增大时您的动画和布局如何变化。 力求使所有动画保持 60fps。这样，用户不会觉得动画卡顿，从而不会影响其使用体验。确保任何动画元素内容设置了 will-change。对于视图变换，您很可能要使用 will-change: transform。  为简单起见，我们假定有两个视图：一个列表视图和一个详情视图。当用户点按列表视图内的列表项时，详情视图将滑入屏幕，并且列表视图滑出。  要实现此效果，您需要一个容纳这两个视图的容器，并为容器设置 overflow: hidden。这样两个视图可以并排放在容器内，而不显示任何水平滚动条，并且每个视图可以按需在容器内侧向滑动。 ```html 列表 返回 详情页面 ``` 此容器的 CSS 代码为： ```css container { width: 100%;...
数组去重有很多种方式，最常用的就是使用Set进行去重，除了这种方式你还能想到其他的吗？今天就让我们一起聊聊关于数组去重的几种方式。 ### 1、filter()和indexOf()实现去重 ```js let originalArray = [1, 2, 3, 4, 1, 2, 3, 4] let uniqueArray = originalArray.filter((item, index, array) => { return array.indexOf(item) === index }) // uniqueArray...
在 css 属性为 auto 的元素不能设置动画，设置了动画也不会有效果，比如下面代码： ```c s s .dropdown { transition: 0.2s; height: 0; } .dropdown.open { /* 高度发生了改变，但是没有动画. */ height: auto; } ``` 折叠面板大家都知道，就是希望有一个元素能够使用CSS transition平滑地折叠和展开，但是它的展开大小需要依赖于里面的内容。 已经设置了过渡：`transition: 0.2s` ，但是展开动画并没有生效。发现只有当高度为auto自动计算时，才会出现此问题。百分比，像素值，任何绝对单位都能正常工作。但是所有这些都需要预先设置一个特定的高度，而不是让它自然地由元素内容的大小决定。 为什么浏览器不去修复这个问题？...
给定一个整数，编写一个函数来确定它是否是2的幂。（范围：1 - 2^31-1） 测试用例： 输入 : 16, 输出 : true 因为 2^4 = 16 输入 : 18, 输出 : false. ### 方法1 最明显的暴力方法就是除以2，然后检查它是否达到1。 ```js var powerOftwo = function(n){ if(n
1、sort ``` const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort() ); ``` > Answer: true, true,...
JSON 的语法可以表示以下三种类型的值。 1、 简单值：使用与JavaScript 相同的语法，可以在JSON 中表示字符串、数值、布尔值和null。但JSON 不支持JavaScript 中的特殊值undefined。 2、 对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。 3、 数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组。 > JSON 不支持变量、函数或对象实例，它就是一种表示结构化数据的格式，虽然与JavaScript 中表示 数据的某些语法相同，但它并不局限于JavaScript 的范畴。 ```js let myObj = { undef: undefined, bool: false, fun: function(){}, date:...