- 博客(64)
- 收藏
- 关注
RSS订阅原创 移动端知识点，remjs，vue3.0+安装，Vuex，PC端和移动端自适应框架搭建，全局路由守卫
remjs 引入该js以后 100px就是1rem 自动帮我们转换计算 例如: UI出图写的是 500px 600px 那么实际写的是:5rem 6rem <script src="js/rem.js"></script>swiper初步使用<!DOCTYPE html><html lang="en"><head> ...
2020-07-22 08:42:53
734
原创 Web前端-Vue--vue-cli脚手架
Vue-cli脚手架搭建:拿到新电脑第一次配置环境要做的步骤(以前没有配置过环境):安装npm命令: 1.去nodejs官网下载node.exe 官网地址:https://nodejs.org/zh-cn/2. node-v8.9.4-x64.msi 右键---安装 纯英文目录!!!!!!!!!!!!!!!!!!!3.一路 next 下一步即可 finish完成后 没有界面!!!4.win+R 打开cmd 输入 npm回车 出来一堆英文 没有表示命令不存在 就...
2020-06-28 22:06:29
362
原创 Web前端-Vue--组件
组件1.全局组件 在所有被vue挂载的页面目标中都可以使用 全局组件的渲染 Vue.component("组件标签名称",{ //组件的封装信息 template:"组件显示的页面html",// data: 组件使用的变量 methods:{ 组件的事件驱动函数 } }) ...
2020-06-26 16:00:53
372
原创 Web前端-Vue--vue钩子函数,自带的方法,computed计算属性,过滤器,watch监听器，动画
vue的生命周期钩子函数所谓钩子函数: * 在vue的不同阶段 会暴露出一个个 回调函数 * 可以让使用vue的人 进行不同时期做不同事情// vm.$destroy();//销毁当前vue对象 会触发beforeDestroy destroyed钩子函数 var vm=new Vue({// el:'#app', data:{ msg:'Hel...
2020-06-22 18:10:01
907
原创 Web前端-Vue--v-bind，vue-resource，vue-axios
v-bind在vue中 为了能够让标签的自带属性(比如 src width title id class style) 也能够使用vue中的变量 专门提供了一个指令 v-bind 写法: <img v-bind:src="vue的data中的变量" > 简化写法: <img :src="vue的data中的变量" > v-bind都可以绑定哪些属性: ...
2020-06-20 11:47:59
263
原创 Web前端-Vue-v-html,v-cloak,v-model,template,v-on,event,事件修饰符
v-html和v-text专门用来渲染标签内容的 在一定程度上可以避免 mustache语法 在加载缓慢时闪烁问题 v-html="变量" v-text="变量" 如果标签本身有内容 那么加载完成后 会被覆盖 显示变量所指向的内容 如果使用mustache语法渲染 那么会出现闪烁问题 要使用这两个指令渲染 哪怕加...
2020-06-20 11:16:05
604
原创 Web前端-Vue-概述-初步使用，部分指令，自定义指令
mustache语法是一种模板语法 <!--表示把msg变量的数据渲染到这个地方--> <h1>{{msg}}</h1> <h2>{{msg}}</h2> <h3>{{hehe}}</h3>vue程序初步搭建 1.引入vue.js文件 2.一片html代码 3.定义json 渲染页面vue整个就是一个最大的语法糖 因为vue编写代...
2020-06-19 08:36:12
154
原创 Web前端-ES6-箭头函数,symbol.(...),set,迭代器,map集合,Generator函数,async await异步函数
箭头函数什么是箭头函数: 格式: ()=>{ } 相当于原来的 function(){ } 意义: 简化了原来关于函数的写法格式 函数更简洁 在一定意义上优化了 this丢失问题 在箭头函数中没有默认...
2020-06-17 23:04:27
501
原创 Web前端-ES6-const,let,class，Promise
let和const声明变量const 表示声明常量 值不可以变化的量 const声明的变量 值为常量 不能修改 const修饰基本数据类型: 值不能被更改 const 修饰引用数据类型: 地址不能被更改 但是对象里面的属性跟方法可以被修改var num=10; num=99; const a=9...
2020-06-16 16:30:18
209
原创 Web前端-JS高级闭包 寄生式创建对象 改变this指向方法，立即执行函数，缓存，沙箱
闭包闭包从字面意思理解就是闭合, 包起来. 所谓闭包就是一个闭合包起来的空间 在js中, 根据作用域规则, 只允许函数访问外部的数据, 外部无法访问函数内部的数据, 闭包要解决什么问题？ 既然js一个函数就是一个闭包 我们为什么要学习闭包? 闭包内的数据不允许外界访问 要解决的问题就是间接访问该数据 我们要学习的就是如何间接的在外部访问内部数据 这个...
2020-06-12 15:44:23
375
原创 Web前端-JS高级实例成员和静态成员,arguments,词法作用域,函数提升
所谓实例 instance 对象 实例成员就是对象成员 也就是属性跟方法就是对象本身绑定的属性跟方法 那么什么是静态成员 绑定给构造函数本身的属性跟方法 就是静态成员 实例成员就用对象去调用 静态成员就用构造函数名去调用 不能混用 一般静态成员都是用来封装工具方法的 例如 : Math 不用new对象 使用方便...
2020-06-09 15:37:25
156
原创 Web前端-JS高级原型链，Function创建函数
原型链: 每创建出来一个构造函数,就会绑定一个神秘而且强大的对象 这个对象就是原型 原型是一个对象 既然是对象 就有对应的构造函数 那么构造函数肯定也有自己的原型 原型本身是一个对象 对象又会有构造函数 构造函数又会有 对应的原型 这样就形成了一个链式结构 这个链式结构就是原型链 最上层的...
2020-06-09 15:10:24
630
原创 Web前端-JS高级继承的方式
什么是继承? 人类活动中 继承就是子承父业 在强类型编程语言中 子类继承父类 子类具有父类的功能 但是js是弱类型语言 不存在自定义类型 那么 js中的继承是什么呢? 别的对象有什么功能 我也能拿过来 自己也拥有 就是继承 实现继承的几种方式:被继承的对象 var obj={ name:"小白白", age:16,...
2020-06-06 18:05:27
131
原创 Web前端-JS高级--异常处理--面向对象三大特性--构造函数的原型
异常处理: 针对js运行过程中 可能出现的一些不正常情况做一个预处理 举个栗子: 刘轩准备骑行去爬山 1.骑行到一半 发现车胎没气了 (应该是出发前就做好预处理的) 2.骑在路上很开心 看到路边有小石子 非得过去压一下 嘭... (自我脑残行为) 3.骑行到半山腰 遇到山体滑坡 只能原路返回(无法做处理 不可抗力因素 程序对应这三种情况:...
2020-06-06 17:54:57
156
原创 Web前端-JavaScript--常见本地存储三种方式
前端的本地存储方式有多种多样: 最常用的有三种: localStorage sessionStorage cookie IndexedDB(面试问)localStorage使用: localStorage.setItem("键","值"); 根据键存储值 localStorage.getItem("键"); 根据键取值 ...
2020-05-30 21:40:21
1653
原创 Web前端-JavaScript--ajax 同源测略 跨域
浏览器同源策略浮动框架 前端7.8年前使用的技术<iframe src="http://www.jd.com" frameborder="0"></iframe> 什么是浏览器的同源策略? 所谓同源: 就是同一个源 同一个来源 也就是两个网页在同一个环境下我们尝试修改京东失败后 发现控制台很多警告 原因就是浏览器的同源策略: 如果两个网页是在一个源下面 那么浏览器不会阻止任何数据的...
2020-05-19 15:04:53
179
原创 Web前端-JavaScript--ajax案例
聊天机器人Array版需求: 点击按钮发送消息 实现聊天 步骤: 1.获取元素 #send #inp #msglist 2.按钮点击事件 获取输入框内容 3.创建本次发送的聊天框div 拼接到msglist里面去 4.将本次发送的聊天 调用ajax发送给服务器 5.服务器返回机器人说的话 6.根据机器人说的话 ...
2020-05-18 09:37:42
361
原创 Web前端-JavaScript--jQajax
$.get方法: 参数: url 必选 data:待发送 Key/value 参数。 格式: 1.键1=值1&键2=值2 长字符串可以 2. 一个大括号对象 键值对也可以 callback:成功的回调 type:针对返回数据类型的处理(放到$.ajax方法统一讲)$("...
2020-05-18 09:37:16
207
原创 Web前端-JavaScript--ajax
ajax目前我们所学习的 跟服务器交互手段比较主流的是form表单但是,form表单的交互特点是: 会刷新整个页面 而且是同步加载(上面不请求完 下面没办法请求)所以我们急需一种交互技术: 可以实现 异步请求 局部刷新所以ajax应运而生: ajax特点: 异步请求 局部刷新 ajax: Asynchronous JavaScript And XM...
2020-05-15 12:40:09
164
原创 Web前端-JavaScript--jQuery2
JQ创建一个节点对象: var JQ新节点对象=$("<标签名></标签名>"); $("父元素").html("<标签名>内容</标签名>"); 为父元素设置内部的内容 如果内容包含标签 则会直接渲染到页面上父元素拼接子节点对象: 父元素.append(新节点对象)...
2020-05-12 15:16:23
179
1
原创 Web前端-JavaScript--jQuery
jQ入口函数JQ的入口函数$(function(){ }) /*$(function(){// 页面加载完毕后执行 alert("页面加载完毕了1输出") }) $(function () { alert("页面加载完毕了2输出") })*/jq对象js对象相互转换js对象转换成JQ对...
2020-05-06 15:49:46
140
原创 Web前端-JavaScript--php 基本使用
php输出php常用的输出语句: echo - 可以输出一个或多个字符串 echo 如果尝试输出变量 则会默认把变量转换成字符串然后输出 print - 只能输出简单类型变量的值,如int,string print_r - 可以输出复杂类型变量的值,如数组,对象设置响应头部 告诉浏览器 用什么编码打开当前...
2020-05-05 10:06:07
261
原创 Web前端-JavaScript--正则表达式
正则表达式正则表达式:常规表达式 Regular Expression能够检查字符串是否符合一个指定的规范正则表达式的组成: 普通字符和元字符组成 正则表达式的对象创建:1.字面量创建 var regex=/a/;2.new对象创建方式 var regex=new RegExp(/a/);正则五大类预定类regex=/\d/; //数字字符 //只要出现数...
2020-04-28 21:21:34
156
原创 Web前端-JavaScript--特效 分辨率 阻止冒泡浏览器事件 事件传播 事件委托 获取元素外链内嵌
获取分辨率window.screen.widthwindow.screen.heightconsole.log("分辨率宽度:"+window.screen.width+" 分辨率高度:"+window.screen.height);阻止事件冒泡什么是事件冒泡: 当子元素的某一个事件被触发时,父元素的同样事件也会被触发 一直往上触发 直到dom树的最上层...
2020-04-24 20:00:26
106
原创 Web前端-JavaScript--特效event client
event event事件对象的获取有兼容问题: 1.参数接收: 谷歌/火狐/IE9+ 能获取 IE678返回undefined 2.直接获取全局event(不声明参数) ...
2020-04-21 19:56:27
351
原创 Web前端-JavaScript--特效offset scroll
js特效所谓js特效就是使用js的方式 实现页面动画效果 js的动画效果更加细腻 更加流畅 效果更加丰富 js能实现的动画有三种: 1.闪动动画 适用于非常小范围内的快速移动 2.匀速动画 3.缓动动画 js特效是靠 三大家族和一个长老 实现动画效果 offset/scroll/client ...
2020-04-19 19:46:14
186
原创 Web前端-JavaScript--Bom 定时器 location
BOM所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法 都是绑定给了window对象 作为属性跟方法 因为window经常使用 所以系统默认可以让我们省略 window.(点) 调用 所以绑定给window对象的属性跟方法 调用时 可以省略 window.(点)var num=99; function show() { ...
2020-04-12 20:13:13
222
原创 Web前端-JavaScript--监听 解除监听 对象模块化封装
事件监听1.自己写的* 封装方法 解决传统添加事件的层叠覆盖问题*** 方法的参数:* 1.元素* 2.事件名称(不带on的事件名称)* 3.事件驱动函数// console.log(box.onclick);//元素如果没有绑定过该事件 //那么获取事件返回null function addEven...
2020-04-11 20:06:38
187
原创 Web前端-JavaScript--控制元素的方式
控制元素的5种方式 1. 元素.style.css属性名=属性值 操作的是元素的行内样式box.style.backgroundColor="red"; 2. 元素.className="带样式的类名1 类名2" 操作元素样式 此种方式是直接给元素设置一个或者多个类名 要注意权...
2020-04-09 21:03:55
609
原创 Web前端-html 5—CANVAS随机验证码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机验证码</title> <style> #c1 { border: 1px solid #999; ...
2020-02-29 17:06:53
382
原创 Web前端-html 5—CANVAS数字雨
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="1400" height="800" style="...
2020-02-28 18:06:05
866
原创 Web前端-html 5—CANVAS、环形进度条
环形进度条 var mycanvas = document.querySelector("#tag"); var ctx = mycanvas.getContext("2d"); ctx.lineWidth = 20; ctx.lineCap = "round"; ctx.textAlign = "center"; ctx.textBaseline...
2020-02-28 18:03:58
361
原创 Web前端-html 5—CANVAS、进度条
进度条<progress ></progress><progress value="0.5"></progress><progress min="0" max="100" value="10"></progress><hr><progress id="tag" min="0" max="100...
2020-02-26 19:42:13
271
原创 Web前端-html 5—视频、音频
video视频视频src 关联的就是视频的资源：相对 ，绝对 ，网络此时法播放：只有src有默认的大小注意：当设置（宽高）一个值则另一个值会自动缩放 若比例 失调则 最终的显示效果是动画区域为最大controls ：播放的控制器loop:循环播放autoplay ：自动播放 ...
2020-02-24 19:49:13
274
原创 Web前端-html 5—form
formcolor获取当前的颜色 和 js 连用<input type="color" name="mycolor"> <button>点击改变颜色</button>email邮箱格式的校验，规则： ...
2020-02-23 21:26:36
80
原创 Web前端-css3_4--3D动画
3D动画基本引入必须的两个要素 1 动画名 animation-name 2 动画的执行时间 animation-duration: 2s;div:hover { /*1 动画名 */ an...
2020-02-21 22:17:02
352
原创 Web前端-css3_3--过度
过度就是一个css的样式名：不同的状态根据不同的值表现过渡：从一个状态到另外一个状态 中途发生的那些过程 :状态的递变时间，那些状态发生了改变 ，变化的曲线，多久之后注意：当发生过渡的时候一定要有个触发机制： 鼠标移入 鼠标悬停 点击 获取焦点 ，，，，， 1改变的是实际样式值 2要给过渡的时间值，如果没有则没有过渡的过程， 默认值是0 ...
2020-02-19 19:48:17
458
原创 Web前端-css3_2--伪元素，部分样式
伪元素页面中的每一个元素中都默认遗憾这有两个子元素 before ：在什么什么之前 after ：在什么什么之后 但是可以作为一个真正的元素承载内容，（有区别）离不开 content的样式值】before:在首标签的结束位置，内部元素之前before在什么什么之前<style> /*要与 content连用*/ div:befo...
2020-02-17 20:53:19
264
原创 Web前端-css3_1--选择器、伪类选择器
选择器兄弟选择器相邻兄弟选择器相邻兄弟选择器的基本语法： 参考选择器+目标选择器{样式}匹配规则： 参考选择器 下的紧挨着的那个兄弟<style>#tag+p{ color:cyan;}</style><body>&...
2020-02-16 21:04:42
211
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人