青青子衿-CSDN博客

原创 typescript基础篇

TypeScript学习笔记一、 TypeScript起步1.1TypeScript简介TypeScript 是由微软开发的一款开源的编程语言。TypeScript 是 Javascript 的超级，遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 java、C#这样的面向对象语言可以让 js 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+就是基于 Typescript

2021-04-28 17:33:12 357 2

原创 Vue自定义指令

Vue自定义指令除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。示例directives/index.js// 注册一个全局自定义指令 `v-has`const has = Vue.directive('has', { bind: function(el, binding, vnode) {

2021-04-26 09:07:30 220

原创深入理解http

一、HTTP 简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。通俗讲：一套用来规范网页和服务器通信行为的一种协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。二、客户端请求消息客户端发送一个HTTP请求到服务器的请求报文包括以下格式：请求行（request line）、请求头（header）、空行、请求

2021-04-13 23:19:11 448

原创 video标签

定义和用法:<video> 标签HTML 5 的新标签,定义视频，比如电影片段或其他视频流常用属性:属性值说明id任意规定元素的唯一 idsrcURL要播放的视频的 URLpreloadauto/meta/none规定在页面加载时是否预加载视频,如果使用 “autoplay”,则忽略该属性controls如果出现该属性，则向用户显示控件，比如播放按钮posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的

2021-01-12 14:42:33 7372

原创 js计算短信输入的字符长度

概念：数据存储是以“字节”（Byte）为单位，数据传输大多是以“位”（bit，又名“比特”）为单位。手机短信的长度是由编码决定的，根据国际标准:如果发送纯英文字符，由于英文ASCII采用 7位编码，所以1120位的限额可以传送1120÷7=160个字符；如果发送纯汉字字符，每条短信最多发送1120位，合（1120÷8=140，一个字节占8位）140字节的内容，每个汉字占用2个字节140/2=70个字符；一旦传送的字符中包含中文、日文、韩文等双字节字符，不论中文还是西文，不论全角还是半角，都必须采用

2021-01-06 16:04:42 518

原创 Android调试工具adb

Android调试工具adb --Web页面adb即Android Debug Bridge（安卓调试桥)，用于安卓调试用，它就是一个命令行工具，通过电脑端与手机设备或模拟器交互设置。它存在于 sdk/platform-tools 目录下，调试工具adb可以独立运行，可以快速进行项目调试，特别适合不是android开发人员，但需要安装adb驱动。安装adb驱动1.下载Android Platform Tools到Android开发官网下载Android Platform Tools并解压，解压后可

2020-12-28 18:14:59 4409

原创 html+css实现滑动开关按钮

实现的效果:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IGEU3PBW-1607681396153)(C:\Users\lai.jin\AppData\Roaming\Typora\typora-user-images\1607679987570.png)]html<label class="switch_on" id="switch_btn"> <input type="checkbox" checked="checked"> <

2020-12-11 18:10:15 7146 3

原创一系列 JS Object操作分类

对象的遍历for…in 循环(遍历的是key, obj[key]获取属性值)const obj = { name: "张三", gender: "男"}Object.defineProperty(obj, "age", {value:"18", enumerable:false}); //增加不可枚举的属性ageObject.prototype.protoPer = function(){console.log("name is 张三")};//通过原型链增加属性，为一个函数for (le

2020-12-07 18:25:36 213

原创一系列 JS 数组操作分类

数组的遍历for 循环let arr = [1, 2, 3, 4, 5];for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}// 1// 2// 3// 4// 5for…of 循环(遍历的是value)let arr = ['Chocolate', 'zhlll', 'lionkk'];for (let val of arr) { console.log(val);}// Chocolate

2020-12-05 17:35:49 880

原创九种简洁的Vue数据通讯

在编写一个vue项目的时候，组件之间的数据通信是必不可少的。也是非常的重要的一步。今天写几种vue中组件的数据通信方式以及应用场景。一.props&@1.props父组件把数据通过v-bind指令绑定在子组件参数上传下去.子组件通过props这个属性获取. props可以以数组和对象的形式接收数组形式:父组件:<Children v-bind:msg="msg"></Children>子组件:props: ["msg"] //字符串对应的是父组件绑定的v-b

2020-12-02 11:33:43 269

原创 JS处理代码中可能出现的错误信息:try catch finally

js中try、catch、finally的执行规则:首先一个常识就是，在浏览器执行JS脚本过程中，当出现脚本错误，并且你没有手动进行异常捕捉时，他会在浏览器下面出现黄色的叹号，这是正常的，这也不是最重要的，最重要的是，出错行以下的所有JS代码将中停执行，这是我们不希望看到的，所以说，对于自己写的，拿不准的脚本还是加上异常捕捉比较好。try: 测试代码块的错误，一般把可能会出错的代码放到这里catch：捕获处理抛出的错误。只有try里面的代码块发生错误时，才会执行这里的代码，参数err记录着try里

2020-10-23 18:31:24 644

原创移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法

但是这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为（100%-键盘高度），这样的话main的height:100%也会变成（100%-键盘高度），所以需要强行将main的高度设置为html原本的100%。<inputid="searchInput" type="text" class="search-input" :placeholder="" v-model="search"@input="input()"@change="change(

2020-07-31 16:17:34 437

原创 ES6中class类的详解

类和模块的内部，默认就是严格模式,类不存在变量提升//es5function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);//es6class Point { constructor(x, y) { this.x =

2020-06-28 16:21:43 2982

原创使用express搭建服务器

安装: npm init ; npm install express --save ; npm install mysql --save服务器结构目录:index.jsconst express = require('express') //引入express const app = express() // 初始化const sqlQuery = require('./sql')app.get('/',(req,res)=> { res.send('答题服务器')})

2020-06-28 15:17:35 200

原创 react插槽实现

import React, { Component } from 'react';import ReactDOM from 'react-dom';class ParentCom extends React.Component { constructor(props) { super(props) console.log(props); } render() { return ( <div>

2020-06-23 10:30:36 838

原创解决跨域方案

后端解决1.cors 优先使用2.jsonp(只能解决get请求)前端解决3.webpack proxy(打包后webpack没有了)devServer: {proxy: {‘/api’: {target: ‘请求接口’}}}4.nginx反向代理(中间件) 运维配置5.webpack plugin -->webpack-dev-middleware...

2020-06-16 18:04:54 327

原创 CSS样式属性

1.font字体a.font-size字体大小默认谷歌浏览器是16px; em单位,是body字体大小的倍数b.font-weight字体粗细 bold(700) normal(400) strong和b默认是加粗的,可以用font-weight:normal;去掉加粗效果c.font-style字体风格 italic 倾斜 em和i标签默认是倾斜的,可以用font-style:normal去掉倾斜效果 normal 正常/默认的d.font-family 哪种字体连写顺序

2020-05-30 11:39:17 241

原创 CSS层叠样式表:(选择器,元素显示方式)

1.行内式<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>2.内嵌式<head><style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }</style></head>3.外链式<head><link r

2020-05-30 10:35:22 661

原创 HTML常用标签

web网页要遵循web三大组成：html（负责结构），css（负责样式），JavaScript（负责交互行为）标签分类和标签关系：单标签和双标签标签要有语义化，并列关系和嵌套关系标签分类：1.骨架标签<html> //根标签 <head> //头部 <title></title> </head> <body> //主体 &

2020-05-30 10:17:23 140

原创 vue 封装Toast全局提示组件

1.编写组件toast.vue<template> <transition name="fade"> <div v-show="visible">{{message}}</div> </transition></template><script>export default { data () { return { visible: false, message

2020-05-21 15:51:40 852

原创 vue中el属性，template属性，render函数,$mount 和 el的区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>我今年{{age}}岁了</span> </div> </body></html><scrip

2020-05-20 19:05:41 1481

原创前端干货--常用网址

Vue组件大全：https://github.com/opendigg/awesome-github-vue蚂蚁数据可视化-AntV：https://antv.alipay.com/zh-cn/index.html#__productsJavaScript语法编译器：https://www.babeljs.cn/Echarts库：https://echarts.baidu.com/tutor...

2019-08-17 15:20:47 105

原创 vuex实现购物车逻辑

步骤1：在store.js中//导入vueximport Vuex from ‘vuex’// 导入Vueimport Vue from ‘vue’;Vue.use(Vuex)//实例化仓库对象const store = new Vuex.Store({//状态state: {//短路运算carData: JSON.parse(window.localStorage.getI...

2019-07-31 10:55:42 359

原创【Vue+axios】 axios拦截伪造token,判断是否登录

【Vue+axios】 axios拦截伪造token,判断是否登录http文件夹中的http.js添加响应拦截器 //导入axiosimport axios from 'axios'import router from '../router/router';//导入vueimport Vue from 'vue'//创建副本const Axios = axios.cre...

2019-07-17 18:19:55 1086 3

原创 vue基于token的登录权限判断方法

在路由配置里,使用路由的全局导航守卫来判断是否登录:// 实例化对象const router = new VueRouter({routes})// 注册导航守卫(回调函数)router.beforeEach((to, from, next) => {if (to.path === ‘/login’) {// 登录页不需要判断next();}//不是去登录页面els...

2019-07-15 12:29:52 1577

原创 Vue.js生命周期

Vue.js之生命周期学习到vue阶段的同学，总是会被vue的生命周期钩子函数搞混，接下来我就带着大家一步步去理清vue的生命周期钩子函数.什么是vue的生命周期呢? 其实就是从Vue实例被创建开始到实例销毁时的过程，整个过程主要可以分为八个阶段分别是：创建前（beforeCreate）、创建后（created）、挂载前（beforeMount）、挂载后（mounted）、更新前（befo...

2019-07-14 16:08:23 111

weixin_44818614的博客