sumengyzy-CSDN博客

原创 Vue框架 - 事件处理器

监听指令在之前叙述的指令中，实现了控制页面元素的显示（v-show）及数据驱动视图（v-model）那如果想要在给页面添加事件又该如何实现？v-on：方法处理可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on：可以缩写为 @ ，可以直接去调用功能性的语句，也可以去调用函数（函数去执行功能）注意点：事件执行的函数，需要在 met...

2020-05-07 00:33:16 160

原创 VUE-基础组件

基本示例Vue.js 组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count:...

2020-04-23 22:47:18 128

原创 Vue阶段 - 指令自定义，修饰

指令修饰符 / 自定义指令指令修饰符注意： autofocus 无法在苹果的移动端生效<input type="text" autofocus >不同的指令下，有不同的修饰符，需要使用是时，查看文档具体内容查看api 或自定义指令的具体实现有些指令没有修饰符格式：指令名称：参数.修饰符 = 值.number<input v-model.numb...

2020-04-22 21:33:33 156

原创 VUE-框架指令

Vue中的指令{{ }} 被称作大胡子语法、双花括号语法，在 Vue 的使用中很常见可以存放变量名，存放表达式（一些运算，只要最终的结果）{{x+y}}<h1>Hello,{{title}}</h1>但是它有着自身的局限性，只允许出现在内容区域，怎么办？！我想改 class类名！想改id名！想改属性名！Vue 指令为迎合属性（类名，id，name）变...

2020-04-17 23:08:24 157

原创 Vue-安装和理解

vue中用cdn引入vue.js的方式——作者：尤玉溪1.index.html中添加第一个script链接：src=“https://cdn.bootcss.com/vue/2.5.10/vue.min.js”>2.vue_cli3架构的vue在vue.config.js中添加 configureWebpack: config => { config.externals =...

2020-04-15 23:41:44 125

原创前后端交互 - CORS跨域 / Nodejs中间件代理跨域

CORS跨域 / Nodejs中间件代理跨域跨域：指的是浏览器行为，正常情况下是成功的，只是同源策略不允许拿数据，所以会报错。jsonp 方式跨域，主要的负担都由前端来承担，但是无法携带参数。cors 方式跨域，主要的负担由后端来承担，看起来较为优雅。CORS跨域CORS是一个W3C标准，全称是"跨域资源共享"( Cross-origin resource sharing )。它允许浏...

2020-04-14 21:33:24 3249

原创 ES6 - 字符串及数组新增方法

字符串及数组新增方法字符串新增方法str.startsWith：判断是否已指定字符串开头的参数1 ：指定字符串参数2 ：指定的开始位置 (从1开始)let str = "好好学习,每天进步一点点"; console.log(str.startsWith("好好")); console.log(str.endsWith("学习",3));repeat()将字符串重复指定的次...

2020-04-13 03:32:08 188

原创 ES6 - 箭头函数

箭头函数es6的新方法，优化前端写法，便于开发人员开发。定义需要绑定一个变量或者自调用。箭头函数函数形式形式一// () => 返回值 let fn = () => 2; console.log(fn()); 形式二// 形参 => 返回值let fn2 = num => num*2;console.log(fn2(10)); ...

2020-04-13 03:17:03 56

原创 ES6 - Map对象和 Set对象

Map对象和 Set对象Map对象new Map([a])let arr = [ ["a",1], ["b",2], ["c",3] ]let m = new Map(arr);object与map的比较相同点都允许你按键存取一个值、删除键、检测一个键是否绑定了值不同点Object的键只能是字符串或者 Symbols Ma...

2020-04-13 03:01:35 107

原创 ES6 - 变量、解构赋值及展开运算符

基础知识由于ie低版本不兼容es6新语法，所以在使用的使用优先考虑兼容性的问题如果不考虑兼容的话，优先推荐使用let/constlet / constlet写法和var 一致，用来声明变量let 和 var 的具体区别var a = 15; let b = 1;var :重复声明作用域：全局作用域函数作用域(局部作用域)可以预解析(变量提升)let ...

2020-04-13 02:51:13 173

原创移动端 - 视口和像素、响应式布局及 em / rem

视口和像素、响应式布局及em / rem视口和像素meta标签：告诉浏览器一些设置信息是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配移动端布局必须写meta视口标签存在5个指令width: 设置布局视口的宽度，一般都是device-width(设备宽度)initial-scale: 初始缩放比例。 1即是100%， 2是200% ，以此类推ma...

2020-04-13 02:38:51 130

原创怪异盒模型 / 弹性盒模型

怪异盒模型 / 弹性盒模型标准盒模型我们平常状态下所写的，即为标准盒模型状态下的css样式.box{ width:200px; height: 200px; background-color: purple; padding: 20px; margin: 20px; box-sizing:content-box; /*开启标准盒模型（通常为默认状态，一般不写）*/ ...

2020-04-13 02:19:19 303

原创 H5新特性 - CSS动画2D / 3D 、自定义动画及动画库

CSS动画2D / 3D 及动画库自定义动画及动画库一个元素只有一个transform属性；后面增加的transform属性会覆盖前面的属性执行元素，添加过渡效果transition:all,2s;这里是引用添加hover， hover中写动画效果div{ width: 100px; height: 100px; background: red; margin-...

2020-04-13 02:05:05 204

原创 H5新特性 - CSS选择器

CSS选择器是在原先的CSS基础上延伸出来的，为了更方便、快捷的选中元素，有利于开发人员的开发div+p-紧邻选择器：div后面紧邻的第一个p标签div[id]所有带有id属性的div(不考虑id名字是什么)p[class=box]所有class类名为box的p标签div[class~=box]所有class名中包含box的div格式div[class~=box]{ b...

2020-04-13 01:56:07 74

原创 H5新特性 - 本地存储

本地存储注意：本地存储调用者必须统一，用临时存储存储的数据，只有临时存储才能找到localStorage永久存储（相对），其中的数据不随着浏览器的开关而改变sessionStorage临时存储（相对），当浏览器关闭/当前页面关闭时，数据消失,页面刷新时不会影响两者区别local 和 session的区别：local这里做永久存储，浏览器关闭与否并不影响它。多数使用在用户自动登...

2020-04-13 01:43:06 115

原创 H5新特性 - 拖拽属性

拖拽属性拖拽属性H5的新特性 : 是指鼠标点击源对象之后，不松手将其拖拽到目标对象，或半途松手(释放)的过程拖拽 Drag源对象：指定的鼠标点击的一个事物，例如：一个元素，一个图片等目标对象：指定是我们拖动源对象后，预计要进入的区域被拖动的源对象可以触发的方法ondragstart: 源对象开始被拖动ondrag: 被拖动过程中ondragend: 源对象被拖动结束源...

2020-04-13 01:34:32 558

原创 H5新特性 - canvas的基本使用

canvas的基本使用其实就是一块画布canvas标签canvas标签：宽高的属性必须设置在标签中，而不是css样式中(包括行间样式)<canvas id="cc" width="500px" height="500px"></canvas>通过标签获取画布canvas是标签，画布是canvas的一个属性绘制之前都需要通过标签获取到画布，再通过画布来...

2020-04-13 01:08:17 131

原创 H5新特性 -音频视频标签（媒体标签）

音频视频标签常见媒体标签有：audio 、 video 、source实际上他们的控件都一样，这里以audio为例进行说明controls: 用户控制界面（标签自带）autoplay：自动播放用于视频，背景音乐loop：循环播放currentTime: 当前播放时间duration ：总时间（只读）volume: 音量muted: 静音p...

2020-04-13 00:04:30 221

原创 H5新特性 - 新增标签

新增的语义标签标签语义化旨在让标签有自己的含义，见名知义优势代码结构清晰，方便阅读，有利于团队开发（开发效率提高）方便其他设备解析（屏幕阅读器，盲人阅读器）以语义的方式来渲染页面有利于搜索引擎优化（SEO）主体结构元素主要用来划分区域<nav> 导航 </nav><article> 主体 </article><sect...

2020-04-12 23:44:35 681

原创前后端交互 -跨域问题

ajax如何跨域同源策略是指协议、域名，端口号都一致这是浏览器的强制规定ajax 能不能跨域测试 ajax 能不能实现跨域（准备两个后端）为了测试方便所有的页面都直接放在了 static 文件夹下后端服务器的准备负责准备数据的后端const Koa = require("koa"); const Router = require("koa-router"); c...

2020-04-12 23:19:56 174

原创 node.js阶段 - buffer和stream理解

buffer是数据的缓冲区，也是一个类，不是模块创建node6.0 之前的方式new Buffer ( )现在的创建方式参数：是内容的大小，单位是字节 blet buffer = Buffer.alloc(10)console.log(buffer)数据转化buffer 会把数据( 不限 ) 转化成二进制，然后以十六进制的方式展示 let buffer...

2020-04-07 06:36:37 334

原创 node.js阶段 - 原生-JS-搭建服务器

原生方式搭建服务器通过 http 创建服务引入 http 模板const http = require("http");操作文件、文件夹const fs = require("fs");解析url的字符串const url = require("url");根据文件格式获取对应的头部信息const mime = require("./mime.json")处理文件路...

2020-04-07 06:23:21 120

原创 node.js -阶段.npm，nvm；

npmNPM( Node Package Manager )官网的地址是： npm官网。npm注册需要保证牢记自己的邮件( 用户名 ) 和密码。需要验证邮箱 — 通过邮件验证。终端在终端中输入npm adduser ( 启动关联的服务 ) ==> Username : ( 输入用户名 ) ==>==> Possword : ( 输入密码的时，不会有任...

2020-04-07 06:12:51 90

原创 node.js-前端数据

|node.jsweb应用中，动态生成html的工具，负责数据与模板的结合常见的模板引擎有 ejs，jade（pug），nunjucks等pug编译工具下载 npm install pug-cli -gpug 生成的文件名 -w ( 跟随修改实时变化 )pug 生成的文件名 -P ( 将生成的文件整理为可阅读格式 )pug 生成的文件名 -w ( 跟随修改实时变化 )注意事...

2020-04-07 05:51:24 92

sumengyzy的博客