2020年04月_此鱼非闲鱼也

原创 vue非prop特性及props验证

1、非prop特性非 prop 特性：是指向一个组件传属性，但是该组件并没有相应 prop 来定义，这些 props 会被自动添加到组件的根元素（template模板中，包裹元素的最外层元素）上。2、替换/合并已有的特性默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）替换/合并已有的特性 ...

2020-04-29 20:36:03 723

原创 vue中.sync修饰符与vue插槽

sync修饰符vue组件之间数据传递，组件之间的通信方式：单向绑定父组件通过 props 传入数据到子组件内部，但是子组件内部不要修改外部传入的 props，vue提供了一种事件机制通知父级更新，父级中使用子组件时，监听对应的事件绑定处理函数即可虽然不推荐在组件内部修改 props ，但有时需要组件内部状态变化时去改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目...

2020-04-28 22:44:47 1598

原创 vue组件传参（父传子、子传父、利用组件传参实现分页显示数据）

vue组件传参1、父传子父：自定义属性名 + 数据（要传递）=> :value="数据" 子：props ["父组件上的自定义属性名"] =>进行数据接收父级调用子组件，通过子组件的属性传入数据子元素内部通过props配置(数组)，来接受对应的数据，如props:['属性1','属性2',...]在可复用的组件中，最上层只能有一个...

2020-04-28 19:11:23 987

原创 vue全局过滤器与局部过滤器的使用

vue中的过滤器定义：对内容或数据进行过滤(二次处理)的一种方式写法：Vue.filter("过滤器名称",过滤方式);使用：过滤器类似于管道流种类：局部过滤器和全局过滤器1、全局过滤器（1）定义无参全局过滤器 <div id="app"> <p>{{ message | replaceStr}}</p> </di...

2020-04-25 22:43:19 2053 2

原创 vue中computed与watch的使用

1、事件函数vue中使用事件指令定义事件，@事件名="执行事件的函数";或者@事件名="执行事件的函数(参数)";在vue实例中事件函数是写在methods中的，如methods:{ 事件函数名(参数){ //函数体 }}注意：methods是与el和data同级的属性。看看示例：页面一开始打开先显示原始数据，三个按钮"全部"或"男"或"女"按钮后，筛选对应的数据显示到页面。 <...

2020-04-25 21:26:36 283

原创 vue组件(全局注册、局部注册)

vue组件使用1、认识组件(1) 创建组件的写法写法： Vue.component("组件名",{ //xx }); //这里是全局注册组件的写法Vue.component()函数的第一个参数就是组件名，比如Vue.component(“my-comname”,{ //xx}}); 那么my-comname就是新建组件的名称；（2）注意：为了能在模板中使用，这些组件必须先注册以便 ...

2020-04-23 21:01:08 845

原创 vue事件(事件指令、事件对象、事件修饰符)

vue事件1、事件指令：两种写法：(1) v-on:事件名.修饰符="执行的函数名或表达式"(2) @事件名="执行的函数名或表达式"注意:(1) 事件执行的函数，需要在methods中定义，即函数都存放在methods中(2) 事件绑定时，vue中函数名后有无小括号都可以调用，加小括号是为了传参使用。在普通js函数中，加小括号是调用此函数(3) this指向...

2020-04-22 18:24:11 1265

原创 vue自定义指令-实现按钮控制元素拖拽

1、要求：(1) 每次打开页面时，拖拽元素不可拖动，单击按钮后可以拖动元素，再次点击按钮，元素又不可拖动了。(2) 第一个按钮控制第一个div元素拖拽，第二个按钮控制第二个div元素拖拽，而且它们互不影响。2、问题：(1)前面写的拖拽代码，再次点击按钮后，元素还可以继续拖动。(2)点击其中一个按钮，另一个按钮的状态也改变了，两个元素都可以拖拽，无法实现一对一控制元素拖拽3、解决：(1...

2020-04-21 20:33:30 1307

原创 vue指令修饰符、自定义指令

1、vue指令修饰符指令名称:参数.修饰符 = "值"比如 v-bind:value.number = “msg”（1）不同指令有不同的参数，也有不同的修饰符（2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符<div id="app">  &...

2020-04-20 22:31:47 1119

原创 Vue指令使用(v-once、v-cloak、v-pre、v-slot与v-on)（二）

vue中指令的使用1、v-once只会渲染元素或组件一次，即使后续的数据修改了，也不会渲染到页面上；它后面不需要跟任何表达式,比如<div v-once>{{dvText}}</div> <div id="app">  <h1>{{passa...

2020-04-17 22:18:34 610

原创前端框架之Vue的初步学习

什么是vue？官方解释：一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。它的目标是通过尽可能简单的API，去实现响应数据绑定和组合的视图组件。vue的使用之前，我们要先引入一个vue的js文件，两种方式：去vue官网上下载vue.js到本地,使用·<script>标签将它引入到html文件中直接引用网络上地址，CDN上的vue网络地址：https...

2020-04-17 17:15:25 176

原创服务器端代理proxy实现跨域访问

在koa中使用代理proxy我们知道浏览器有个"同源策略"的限制，再回忆一下，同源是什么？所谓同源,即同协议、同域名、同端口。如果不满足同源三者条件任意一个，即是非同源，也就是跨域访问。跨域访问有不同的实现方法，今天来研究一下服务端代理是怎么实现跨域的。服务器端代理是如何实现跨域的原理：服务器端不直接去发出跨域请求，而在服务器端设置一个代理(proxy),由服务器端向跨域下的代理发出请求，...

2020-04-16 23:39:53 2165

原创 vue(常用指令、:key标识符、属性绑定与数据流)

vue指令在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方是，指令的值是用引号括起来的表达式，不同的指令有不同的作用，vue内置了一些常用的指令，而且我们还可以自定义指令。1、内容输出指令：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...

2020-04-16 21:24:38 1670

原创客户端存储cookie、以及localStorage和sessionStorage和cookie三者的异同

一、在koa中使用cookiecookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。储存cookie的值：ctx.cookies.set(name, value, [options])获取cookie的值:ctx.cookies.get(name, [options])options常用设置:1） maxAge 表示从 Date.now() 得到的毫秒...

2020-04-13 08:43:00 387

CORS全称"跨域资源共享"(Cross-origin resource sharing)。跨域资源共享是一份浏览器技术的规范，以避开浏览器的同源策略CORS约定服务器端和浏览器在HTTP协议之上，通过一些额外HTTP头部信息，进行跨域资源共享的协商。服务器端和浏览器都必需遵循规范中的要求。XMLHttpRequest支持通过withCredentials属性实现在跨域请求携带身份信息(Cr...

2020-04-10 21:09:09 590

原创 jsonp的方式实现跨域访问(访问蘑菇街)

什么是jsonp？浏览器有一个安全限制策略，叫做"同源策略"。同源就是指，域名、协议、端口号都必须相同。比如在同一个网站访问不同的页面，都可以访问到，但是实际工作中有时需要访问外界的地址，比如打开百度，要访问京东商城，那就涉及到跨域(不同源)的问题。当然有很多方法可以实现跨域访问，而jsonp是解决跨域问题的比较流行和常用的方式!jsonp（JSON with Padding）jsonp是获取...

2020-04-09 22:01:40 521

原创 socket.io模块

Nodejs下引入socket.io模块，实现服务器端与客户端的长连接const Koa = require("koa");const Router = require("koa-router");const static = require("koa-static");let app = new Koa();let router = new Router();app.use(st...

2020-04-07 02:03:47 382

原创 Websocket跨域访问

WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议,可以实现跨域访问。websocket安装命令 npm i ws -S服务器端：let WebServerSocket = require("ws").Server;let wss = new WebServerSocket({port:8200});const mysql = require("...

2020-04-07 01:50:52 4870

原创 sse服务器推送数据

SSE（server send event）服务器推送数据注意：推送数据的过程中不能中途停止推送 !服务器端：const http = require("http");const fs = require("fs");const url = require("url");let server = http.createServer((req,res)=>{ let ur...

2020-04-07 01:44:45 540

原创 koa+ajax+mysql实现网页对话

打开浏览器，进入某个网站时，经常会有这种对话窗口，双方可以像在qq聊天一样进行对话。今天来研究一下它是怎么实现的。服务器端index.js//两个路由,一个用来加入聊天发送对话内容，另一个用来获取对话内容//获取对方发送过来的内容router.get("/getData",async ctx=>{ let [rows] = await connect.promise().q...

2020-04-07 01:38:15 170

原创认识pug模板引擎

我们知道ES6后，javascript提供了一个模板字符串，可以实现模板引擎的功能，很方便好用，但是它需要写在js文件中，然而对一下大型而又复杂的项目而言，再这样写就不太好了，此时我们就需要借助外界的引擎模板来实现一些功能。什么是模板引擎呢？了解一下它的概念。模板引擎就是web应用中动态生成html的工具，负责将数据和模板结合。再来看一下比较流行的或者常用的模板引擎有哪些呢？常见模板引擎...

2020-04-07 00:56:24 1630 1

原创 Koa框架的使用(二)-新闻管理

使用koa实现新闻管理，具体功能实现：主页新闻显示主页新闻分页详情页显示项目主目录下的data目录下的data.json文件(准备的新闻数据)[ { "id":1, "title": "18人死伤！韩国一男子纵火后持凶器伤害避险邻居", "content": "展馆人潮如织，商品琳琅满目，来自200多个国家和地区不同肤色的采购商...

2020-04-06 23:34:57 273

原创 Koa框架的基本使用(一)

官网解释Koa是基于Nodejs平台下的下一代web框架，Koa不在内核方法中调用任何中间件，它不仅是一个轻量级的函数库，几乎所有的功能都通过第三方来实现。它提供了一组可以快速优雅的编写服务器应用的方法。现在有Koa和Koa2两个版本，后者依赖于Nodejs7.6.0版Koa安装命令 npm i koakoa-router 监听路由，编写接口时使用，安装命令 npm i koa-rou...

2020-04-06 18:34:39 534

转载 GET和POST区别及优缺点

Get和Post在面试中一般都会问到，一般的区别：（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）（2）post发送的数据更大（get有url长度限制）（3）post能发送更多的数据类型（get只能发送ASCII字符）（4）post比get慢（5）post用于修改和写入数据，get一般用于搜索排序和筛选之类的操作（淘宝，支付宝的搜索查询都...

2020-04-06 16:03:43 1164

原创 Nodejs中的Buffer缓冲区

Node.js Buffer(缓冲区)JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。Buffer的创建//Node 6.0以前的方式 new Buffer();//现在的创建方式 Buffer.allo...

2020-04-06 15:48:43 281

原创文件上传(显示进度条、上传速度)

XMLHttpRequest对象使用XMLHttpRequest对象实现数据交互。//创建XMLHttpRequest对象let xhr = new XMLHttpRequest(); //let来创建(ES6版本以上)//为了应对所有的现代浏览器，检查浏览器是否支持 XMLHttpRequest 对象。//如果支持，则创建XMLHttpRequest对象。如果不支持，则创建 Acti...

2020-04-01 23:00:51 3412

此鱼非闲鱼也的博客