JavaScript
缘明随心
这个作者很懒,什么都没留下…
展开
-
vue-获取当前时间并格式化
yyyy-mm-dd hh:mm:ssVue.prototype.getNowFormatDate = function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month;原创 2020-07-11 13:31:53 · 6577 阅读 · 0 评论 -
JavaScript-dom节点操作
dom节点操作js 操作dom节点什么是dom过程DOM数--所有的东西都是节点节点的类型---nodeType节点的查找节点的创建节点关系子节点关系父节点关系兄弟节点关系节点的操作增删改复制插入获取节点rectjs 操作dom节点什么是domDOM:文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。过程HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是原创 2020-07-09 10:54:36 · 274 阅读 · 0 评论 -
vue---vux详解
vue---vux详解VUEX 全局状态管理器什么样的数据需要放在vuex中?参数---详解`state``geeters``mutations``actions``modules`使用modules----state的使用及调用modules----getters的使用及调用modules----mutations的使用及调用modules----actions的使用及调用问题----如何在vuex中调用vuex中的方法或事件使用映射解构的方法在组件中直接调用对应事件,数据名等VUEX 全局状态管理原创 2020-07-07 19:33:28 · 4798 阅读 · 34 评论 -
移动端-移动端事件
移动端事件移动端事件事件类型特touch 对应的event 对象触摸位置ios 手劳事件(两指触发)安卓多指事件封装移动端事件事件类型touchstart :触换开始(于指放在触摸屏上)touchmove :拖动(手指在触摸屏上移动)touchend :触摸结柬(手指从触摸屏上移开)touchenter:移动的手指进入一个dom元素touchleave :移动的手指高开一个dom元素。touchcancel,是在拖动中断时候触发。特touch 对应的event 对象touches:原创 2020-07-07 09:15:47 · 437 阅读 · 0 评论 -
前端优化----技术
前端优化为什么要前端优化----可能会更新技术---雅虎军规为什么要前端优化----可能会更新加快页面渲染速度,提升用户体验技术—雅虎军规减少HTTP请求合并css,合并js,使用精灵图技术,使用base64图片格式压缩压缩图像 (tinypng 网站可以压缩png格式的图片)压缩js,css,html开启gzip懒加载首先加载首屏内容,其他内容通过Ajax获取其他的图片先加载默认,通过修改src来实现懒加载图片js内容可以懒加载预加载pre原创 2020-07-06 10:30:26 · 199 阅读 · 0 评论 -
Ajax---详解
AjaxHTTPhttp请求方式中的8中请求方式请求报文响应http请求/响应的步骤客户端链接到web服务器发送http请求服务器接收请求返回HTTP响应释放链接TCP链接客户端浏览器解析HTML内容http响应状态码GET与POST请求区别HTTP主要特点无连接无状态简单快速灵活支持B/S 与C/S原生的---Ajax什么是AjaxAjax的优势Ajax的缺点同步异步Ajax的实现步骤Ajax---GET方法案例Ajax---POST方法案例Ajax的方法中的名词解释文件上传jQuery中的---Ajax原创 2020-07-01 18:56:38 · 4560 阅读 · 39 评论 -
vue-问题
vue-问题为什么要封装axiosjsopn的原理什么是跨域同源策略跨域方法vue-cli中路由守卫方法有哪些组件内部路由独享全局路由守卫参数说明this说明$router与 $route区别vue组件有哪些传参方式cookie sessionStorage localStorage 区别js文档注释有哪些格式什么是promise为什么要封装axios实现默认配置 如:baseURL,timeout…实现请求拦截:header添加(token、user)加载提示 数据进行格式化响应拦截:原创 2020-07-01 10:07:31 · 470 阅读 · 0 评论 -
JavaScript-Promise的使用及详细解释
JavaScript-Promise的使用及详细解释案例使用多种方法实现以下案例第一种---setTimeout嵌套第二种---封装函数Promise详解小案例第三种---使用Promise来实现最开始的案例Promise---具体使用的案例第一版---点击按钮显示图片第二版---加载出第一张之后在加载其他,依次加载第三版---图片中谁先加载完成,谁就先显示第四版---等待图片全部加载完毕,所有图片一起显示封装Jsonp案例使用多种方法实现以下案例案例目标“你好”----2秒后输出“你笑起来真好原创 2020-07-01 09:22:29 · 2156 阅读 · 33 评论 -
vue-跨域问题
vue-跨域问题同源策略什么是浏览器的同源策略什么是跨域 ,实现跨域的方法有那些跨域跨域的方法jsonp ,CRS 浏览器响应头信息允许跨域(`Access-Control-Allow-Origin : * `) 允许任何域名访问 --后端设置本地服务器代理跨域---proxy什么是jsonp服务器跨域的实现原理vue-cli 的代理跨域代理跨域的原理代理跨域的实现方法同源策略什么是浏览器的同源策略当前浏览器发起Ajax的时候要求,当前页面,和请求地址同源当前页面 : http://localho原创 2020-06-28 18:52:44 · 393 阅读 · 0 评论 -
封装-Jsonp
封装-JsonpJsonpjsonp是什么?为什么使用jsonp?原理---jsonp的通俗讲解案例---使用script的src获取跨域数据封装Jsonp案例---获取qq.com中的城市信息与天气信息Jsonpjsonp是什么?通过script标签中的src属性没有同源限制的方法进行获取数据即通过script标签来跨域获取数据,名为JSON with Padding,或者就叫JSONP。JSONP的原理很简单,但需要服务器端给予相应配合。大致来说,JSONP的实现思路就是在客户端编程时作原创 2020-07-01 09:14:23 · 644 阅读 · 0 评论 -
vue-路由守卫
vue-cli---路由守卫组件内的路由守卫---局部`beforRouterEnter() {}`----进入路由前执行的方法案例---拦截,不登陆不能进入购物车,自动跳转到登录界面案例---显示隐藏tabs全局路由守卫案例---实现权限登录组件内的路由守卫—局部beforRouterEnter() {} 进入路由前执行的方法beforRouterLeave() {} 离开路由前执行的方法beforeRouterUpdate() {} 路由更新前执行的方法,如: produce/abc =原创 2020-07-01 08:55:26 · 708 阅读 · 0 评论 -
Vue-Axios的封装---登录注册---axios(二)
Vue-cli---Axios的封装简单的的登录与注册第一种---逻辑数据未分离注册登录用户页面获取用户数据信息以及注销第二种---逻辑数据分离---token封装Axios调用封装完毕的Axios---并在添加所需要的方法然后进行使用登录zai首页获取并显示用户信息及注销token的使用简单的的登录与注册第一种—逻辑数据未分离注册使用注册原型的方式的axios方法进行注:有后台更好<template> <div class="register"> <h1原创 2020-06-29 21:01:14 · 5036 阅读 · 39 评论 -
JavaScript-写一个简单的jQuery
写一个简单的jQueryjQuery中---闭包文档加载属性等待递归执行参数的多态链式调用写一个很简单的jQueryjQuery中—闭包使用匿名函数 或 闭包实现局部变量避免变量的全局污染(function() {})()window全局方法window.$ = window.jQueryjQuery无new 操作结论function jQuery() { return new jQuery.prototype.init();}// 再jQuery的原型上添原创 2020-06-18 18:50:37 · 447 阅读 · 0 评论 -
Vue案例-简单的购物车清单功能
vue简单的购物车功能目标:实现全选 当book的sel有变化时候都需要检测是否为全选目标:实现全选与反选目标:计算总价,总数量<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./vue/vue.js" type="text/javascript" charset="utf-8">&原创 2020-06-18 13:56:29 · 520 阅读 · 0 评论 -
JavaScript-闭包
闭包闭包闭包(什么是闭包):函数作为参数被传递(函数套函数)函数作为返回值被传递(函数套函数)闭包的作用:闭包引用的变量不会被销毁,也就是可以访问闭包可以实现局部变量,避免全局变量污染总结:闭包也是变量作用域的特殊情况:在变量定义的地方就开始了查找赋值,而不是在函数执行的地方开始查找赋值函数作为返回值被传递总结:被闭包引用的局部变量,不会被销毁闭包可以实现局部变量,避免全局变量污染function fun() { var a =原创 2020-06-18 13:51:30 · 133 阅读 · 0 评论 -
JavaScript-原型与原型链详解
原型与原型链原型与原型链原型原型链列子 ---思考---`indexOf()`列子---给每个字符串实例添加一个翻转方法 `reverse`例子---思考---例子---思考---Vue中挂载全局的axios判断 对象类型原型与原型链原型每个class(类) 和函数都有一个显示原型 prototype 存放函数 或 类的公用方法和属性每一个实例都有一个隐式原型 __proto__实例的 __proto__ 指向的是对应函数 或 类的 显示原型 prototype原型链获取对象的属性 或原创 2020-06-17 11:54:32 · 263 阅读 · 17 评论 -
JavaScript-this指向问题
this指向script标签中的this指向指向:window<script> console.log(this) // window</script>全局变量,全局方法,普通函数this指向需要看调用的环境都省略了一个window.this指向全局-window// 普通的函数调用window.function myFun() { console.log(this);}myFun(); // windowvar fun = 2;===>原创 2020-06-16 10:28:29 · 289 阅读 · 24 评论 -
JavaScript-对象
对象对象是一个键值对应的无需数据集合-字典对象的创建键(属性)是唯一的属性可以动态的添加没有限制字面量的创建var obj = { name : "mumu", age : 18, gender : "男"}对象的访问Objec.属性名—点的形式来访问var obj = {name : "mumu",age : 18,gender : "男"}alert(obj.name); // mumu;Objec[属性名]—中括号属性名的形式来访问var obj = {nam原创 2020-06-12 18:05:07 · 123 阅读 · 0 评论 -
JavaScript-日期对象
日期对象new Date()—创建日期(一)var d = new Date(); // 创建一个日期格式console.log(d); // Fri Jun 12 2020 14:26:35 GMT+0800 (中国标准时间)new Date(年,月,日,时,分,秒)—创建日期(二)var d = new Date(2019,10,22,15,32,12); // 创建一个日期格式console.log(d); // Fri Nov 22 2019 15:32:12 GMT+08原创 2020-06-12 18:04:19 · 158 阅读 · 0 评论 -
JavaScript-数学对象Math
数学对象—MathMath.PI—数学中的Πconsole.log(Mathl.PI) // 3.141592653589793...Math.round()—四舍五入var num = 3.141592653589793;console.log(Math.round(num)) // 3Math.ceil()—向上取整var num = 3.141592653589793;console.log(Math.ceil(num)) // 4Math.floor()—向下取整原创 2020-06-12 18:03:31 · 160 阅读 · 0 评论 -
JavaScript-数组
数组数组是一个有序,可以存储多个单元的数据结构数组是我们后期用到最多的一种数据结构(储存数据)数组的长度可以自由指定数组值可以任意的类型数组的定义字面量方式var arr1 = [1,2,4];构造函数var arr2 = new Array(5); //声明数组的长度为5;var arr3 = new Array("你","好","世界",10,false); // 创建数组并指定数据内容访问数组arr[n] 数组的第n个元素,从0开始arr.lengt原创 2020-06-11 18:04:50 · 154 阅读 · 0 评论 -
JavaScript-字符串
字符串的创建双引号var str1 = "我爱我的祖国";单引号var str2 = '我爱我的祖国';字符串模板var str3 = `我爱我的祖国`;new 实例化字符串对象, 实例化两个对象是不相等的var str4 = new String("我爱我的祖国");var str5 = new String("我爱我的祖国");alert(str4 === str5); // false调用console.log(str1,str2,str3);原创 2020-06-11 18:03:39 · 140 阅读 · 0 评论 -
JavaScript-函数
函数js 默认是从上至下是顺序执行分支:可以让js代码选择(跳过)执行循环:可以让代码重复执行函数:可以重复调用代码块函数的定义定义函数名字与变量的命名一致由数字 字母 下划线 $ 组成不能以数字开头,不能是关键字// 最基础的函数function 函数名() { 函数内容;}// 列子:定义函数 用三种方式输出“你好”;function say() { console.log("你好"); document.write("你好<br/>"); ale原创 2020-06-10 17:40:46 · 288 阅读 · 0 评论 -
JavaScript-循环语句
循环循环时用来做,重复,有规律,的语句while 循环循环的要素循环语句运行条件循环的条件变更循环的初始值循环的语句while(判断条件) { 语句1(循环体); 条件变更;}// 第一轮 先判断条件是否成立,成立执行语句1,执行条件变更语句;// 第二轮 再去判断条件是否成立,成立再次执行语句1,执行条件变更语句;// 。。。。。// 第n轮 判断条件是否成立,不成立,就不再执行语句;循环结束// 再页面中输出100句,我爱你 (重复的事情)var times =原创 2020-06-09 17:02:41 · 152 阅读 · 0 评论 -
JavaScript-分支语句
JS 的分支JavaScript 代码是从上至下逐行执行,分支就是可以跳过这个规则if 分支if(判断条件) { 判断成功之后的执行的语句}// 判断条件必须为turly变量(必须是成功的)// 获取用户数据的分数 如果 大于60 则输出 棒棒的var score = prompt("请输出分数",60); score = score * 1 //转化为Number类型 if(score >= 60) { alert("棒棒的"); }if else 分支if(判断条原创 2020-06-09 17:01:53 · 710 阅读 · 0 评论 -
JavaScript-数据类型的判断
Js 中的数据类型的判断typeofinstanceofconstructorisArrayObject.prototype.toString.call(判断对象,null)isNaN() 判断是否为非数字typeof用法:typeOf(需要判断的对象);var a = 123; // Numbervar b = "abc"; // Stringvar c = false; // Booleanvar d; // Undefinedvar f = {}; // Obj原创 2020-06-09 17:01:05 · 118 阅读 · 1 评论 -
JavaScript-运算符号
赋值运算符号=数学运算符号加: +减: -乘: *除: /取余: %括号: ()先乘除,后加减 ,有括号先算括号累计运算累加:+=var a = 5;a += 5; ==> a = a + 5;累减:-=var a = 5;a -= 5; ==> a = a - 5;累乘:*=var a = 5;a *= 5; ==> a = a * 5;累除:/=var a = 5;a /= 5;原创 2020-06-09 09:18:09 · 351 阅读 · 0 评论 -
JavaScript-变量数据类型
变量储存数据的一个容器为什么要使用变量简化操作灵活程序变量命名规则必须是 字母 数字 _ $ 组成不能以数字开头不能是JavaScript的关键字 如:class,var 等推荐的规则尽量用英文 (拼音也行)命名要有意义 c1 c2 c3 没有意义,money left 等这些就有意义可以采用驼峰写法,下划线写法; 如:bestNumber best_number (尽量统一)变量声明的方法声明即赋值var num = 100;先声明后赋值var nu原创 2020-06-09 09:14:31 · 123 阅读 · 0 评论 -
JavaScript-初识
javaScript(JS)什么是JavaScript呢?一款运行再浏览器的脚本编程呢个语言(服务器运行的JavaScript称为:nodejS)javaScript 有什么用?主要是嵌入再网页中和用户进行交互的脚本javaScript 写在那里?script 标签内.js 文件内-通过src属性引入html标签事件属性内 onClick="console.log('你好')"写在a标签的href属性内 href="javascript:alert('要去百度码?')"javaS原创 2020-06-09 09:12:36 · 115 阅读 · 0 评论