web前端
文章平均质量分 92
yanghainan0318
积极向上的小伙!
展开
-
移动端知识点,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 · 736 阅读 · 0 评论 -
Web前端-Vue--路由,本地mock数据搭建,keep-alive,active-class,重定向redirect,路由懒加载
路由原创 2020-06-30 20:59:45 · 519 阅读 · 0 评论 -
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 · 371 阅读 · 0 评论 -
Web前端-Vue--组件
组件1.全局组件 在所有被vue挂载的页面目标中都可以使用 全局组件的渲染 Vue.component("组件标签名称",{ //组件的封装信息 template:"组件显示的页面html",// data: 组件使用的变量 methods:{ 组件的事件驱动函数 } }) ...原创 2020-06-26 16:00:53 · 378 阅读 · 0 评论 -
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 · 912 阅读 · 0 评论 -
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 · 264 阅读 · 0 评论 -
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 · 606 阅读 · 0 评论 -
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 · 156 阅读 · 0 评论 -
Web前端-ES6-箭头函数,symbol.(...),set,迭代器,map集合,Generator函数,async await异步函数
箭头函数什么是箭头函数: 格式: ()=>{ } 相当于原来的 function(){ } 意义: 简化了原来关于函数的写法格式 函数更简洁 在一定意义上优化了 this丢失问题 在箭头函数中没有默认...原创 2020-06-17 23:04:27 · 516 阅读 · 0 评论 -
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 · 216 阅读 · 0 评论 -
Web前端-JS高级闭包 寄生式创建对象 改变this指向方法,立即执行函数,缓存,沙箱
闭包闭包从字面意思理解就是闭合, 包起来. 所谓闭包就是一个闭合包起来的空间 在js中, 根据作用域规则, 只允许函数访问外部的数据, 外部无法访问函数内部的数据, 闭包要解决什么问题? 既然js一个函数就是一个闭包 我们为什么要学习闭包? 闭包内的数据不允许外界访问 要解决的问题就是间接访问该数据 我们要学习的就是如何间接的在外部访问内部数据 这个...原创 2020-06-12 15:44:23 · 377 阅读 · 0 评论 -
Web前端-JS高级实例成员和静态成员,arguments,词法作用域,函数提升
所谓实例 instance 对象 实例成员就是对象成员 也就是属性跟方法就是对象本身绑定的属性跟方法 那么什么是静态成员 绑定给构造函数本身的属性跟方法 就是静态成员 实例成员就用对象去调用 静态成员就用构造函数名去调用 不能混用 一般静态成员都是用来封装工具方法的 例如 : Math 不用new对象 使用方便...原创 2020-06-09 15:37:25 · 160 阅读 · 0 评论 -
Web前端-JS高级原型链,Function创建函数
原型链: 每创建出来一个构造函数,就会绑定一个神秘而且强大的对象 这个对象就是原型 原型是一个对象 既然是对象 就有对应的构造函数 那么构造函数肯定也有自己的原型 原型本身是一个对象 对象又会有构造函数 构造函数又会有 对应的原型 这样就形成了一个链式结构 这个链式结构就是原型链 最上层的...原创 2020-06-09 15:10:24 · 636 阅读 · 0 评论 -
Web前端-JS高级继承的方式
什么是继承? 人类活动中 继承就是子承父业 在强类型编程语言中 子类继承父类 子类具有父类的功能 但是js是弱类型语言 不存在自定义类型 那么 js中的继承是什么呢? 别的对象有什么功能 我也能拿过来 自己也拥有 就是继承 实现继承的几种方式:被继承的对象 var obj={ name:"小白白", age:16,...原创 2020-06-06 18:05:27 · 133 阅读 · 0 评论 -
Web前端-JS高级--异常处理--面向对象三大特性--构造函数的原型
异常处理: 针对js运行过程中 可能出现的一些不正常情况做一个预处理 举个栗子: 刘轩准备骑行去爬山 1.骑行到一半 发现车胎没气了 (应该是出发前就做好预处理的) 2.骑在路上很开心 看到路边有小石子 非得过去压一下 嘭... (自我脑残行为) 3.骑行到半山腰 遇到山体滑坡 只能原路返回(无法做处理 不可抗力因素 程序对应这三种情况:...原创 2020-06-06 17:54:57 · 156 阅读 · 0 评论 -
Web前端-JavaScript--常见本地存储三种方式
前端的本地存储方式有多种多样: 最常用的有三种: localStorage sessionStorage cookie IndexedDB(面试问)localStorage使用: localStorage.setItem("键","值"); 根据键存储值 localStorage.getItem("键"); 根据键取值 ...原创 2020-05-30 21:40:21 · 1666 阅读 · 0 评论 -
Web前端-JavaScript--ajax 同源测略 跨域
浏览器同源策略浮动框架 前端7.8年前使用的技术<iframe src="http://www.jd.com" frameborder="0"></iframe> 什么是浏览器的同源策略? 所谓同源: 就是同一个源 同一个来源 也就是两个网页在同一个环境下我们尝试修改京东失败后 发现控制台很多警告 原因就是浏览器的同源策略: 如果两个网页是在一个源下面 那么浏览器不会阻止任何数据的...原创 2020-05-19 15:04:53 · 183 阅读 · 0 评论 -
Web前端-JavaScript--ajax案例
聊天机器人Array版需求: 点击按钮发送消息 实现聊天 步骤: 1.获取元素 #send #inp #msglist 2.按钮点击事件 获取输入框内容 3.创建本次发送的聊天框div 拼接到msglist里面去 4.将本次发送的聊天 调用ajax发送给服务器 5.服务器返回机器人说的话 6.根据机器人说的话 ...原创 2020-05-18 09:37:42 · 364 阅读 · 0 评论 -
Web前端-JavaScript--jQajax
$.get方法: 参数: url 必选 data:待发送 Key/value 参数。 格式: 1.键1=值1&键2=值2 长字符串可以 2. 一个大括号对象 键值对也可以 callback:成功的回调 type:针对返回数据类型的处理(放到$.ajax方法统一讲)$("...原创 2020-05-18 09:37:16 · 208 阅读 · 0 评论 -
Web前端-JavaScript--ajax
ajax目前我们所学习的 跟服务器交互手段比较主流的是form表单但是,form表单的交互特点是: 会刷新整个页面 而且是同步加载(上面不请求完 下面没办法请求)所以我们急需一种交互技术: 可以实现 异步请求 局部刷新所以ajax应运而生: ajax特点: 异步请求 局部刷新 ajax: Asynchronous JavaScript And XM...原创 2020-05-15 12:40:09 · 165 阅读 · 0 评论 -
Web前端-JavaScript--jQuery2
JQ创建一个节点对象: var JQ新节点对象=$("<标签名></标签名>"); $("父元素").html("<标签名>内容</标签名>"); 为父元素设置内部的内容 如果内容包含标签 则会直接渲染到页面上父元素拼接子节点对象: 父元素.append(新节点对象)...原创 2020-05-12 15:16:23 · 184 阅读 · 1 评论 -
Web前端-JavaScript--jQuery
jQ入口函数JQ的入口函数$(function(){ }) /*$(function(){// 页面加载完毕后执行 alert("页面加载完毕了1输出") }) $(function () { alert("页面加载完毕了2输出") })*/jq对象js对象相互转换js对象转换成JQ对...原创 2020-05-06 15:49:46 · 141 阅读 · 0 评论 -
Web前端-JavaScript--php 基本使用
php输出php常用的输出语句: echo - 可以输出一个或多个字符串 echo 如果尝试输出变量 则会默认把变量转换成字符串然后输出 print - 只能输出简单类型变量的值,如int,string print_r - 可以输出复杂类型变量的值,如数组,对象设置响应头部 告诉浏览器 用什么编码打开当前...原创 2020-05-05 10:06:07 · 264 阅读 · 0 评论 -
Web前端-JavaScript--正则表达式
正则表达式正则表达式:常规表达式 Regular Expression能够检查字符串是否符合一个指定的规范正则表达式的组成: 普通字符和元字符组成 正则表达式的对象创建:1.字面量创建 var regex=/a/;2.new对象创建方式 var regex=new RegExp(/a/);正则五大类预定类regex=/\d/; //数字字符 //只要出现数...原创 2020-04-28 21:21:34 · 158 阅读 · 0 评论 -
Web前端-JavaScript--特效 分辨率 阻止冒泡浏览器事件 事件传播 事件委托 获取元素外链内嵌
获取分辨率window.screen.widthwindow.screen.heightconsole.log("分辨率宽度:"+window.screen.width+" 分辨率高度:"+window.screen.height);阻止事件冒泡什么是事件冒泡: 当子元素的某一个事件被触发时,父元素的同样事件也会被触发 一直往上触发 直到dom树的最上层...原创 2020-04-24 20:00:26 · 106 阅读 · 0 评论 -
Web前端-JavaScript--特效event client
event event事件对象的获取有兼容问题: 1.参数接收: 谷歌/火狐/IE9+ 能获取 IE678返回undefined 2.直接获取全局event(不声明参数) ...原创 2020-04-21 19:56:27 · 356 阅读 · 0 评论 -
Web前端-JavaScript--特效offset scroll
js特效所谓js特效就是使用js的方式 实现页面动画效果 js的动画效果更加细腻 更加流畅 效果更加丰富 js能实现的动画有三种: 1.闪动动画 适用于非常小范围内的快速移动 2.匀速动画 3.缓动动画 js特效是靠 三大家族和一个长老 实现动画效果 offset/scroll/client ...原创 2020-04-19 19:46:14 · 190 阅读 · 0 评论 -
Web前端-JavaScript--Bom 定时器 location
BOM所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法 都是绑定给了window对象 作为属性跟方法 因为window经常使用 所以系统默认可以让我们省略 window.(点) 调用 所以绑定给window对象的属性跟方法 调用时 可以省略 window.(点)var num=99; function show() { ...原创 2020-04-12 20:13:13 · 225 阅读 · 0 评论 -
Web前端-JavaScript--控制元素的方式
控制元素的5种方式 1. 元素.style.css属性名=属性值 操作的是元素的行内样式box.style.backgroundColor="red"; 2. 元素.className="带样式的类名1 类名2" 操作元素样式 此种方式是直接给元素设置一个或者多个类名 要注意权...原创 2020-04-09 21:03:55 · 616 阅读 · 0 评论 -
Web前端-JavaScript--innerText、节点访问关系 属性节点
a标签点击不跳转一旦给a标签添加点击事件 那么点击事件会执行的的同时 a标签也会实现跳转效果 这样用户体验很不好如何解决a标签点击跳转问题: 1.把a标签的href改成 javaScript:;(不知道链接该写什么时 可以写这个)<a href="javaScript:;">点击切换图片</a> 2.在a标签的点击事...原创 2019-12-22 08:52:21 · 828 阅读 · 0 评论 -
Web前端-JavaScript--Dom案例
广告栏案例 需求: 点击广告栏的小× 关闭整个广告栏部分 步骤: 1.获取元素 #close #header 2.#close的onclick点击事件 3.在事件驱动函数里面 给#header设置display="none";<!DOCTYPE html><html lang="...原创 2019-12-28 10:51:50 · 182 阅读 · 0 评论 -
Web前端-JavaScript--Dom
Dom概述JavaScript三大核心: ECMAScript(基础语法) DOM Document Object Model (文档对象模型) BOM Browser Object Model (浏览器对象模型) 跟浏览器本身操作有关的方法 都在BOM里面 BOM最大的对象是 window什么是DOM: 所...原创 2019-12-18 14:42:16 · 136 阅读 · 0 评论 -
Web前端-JavaScript--对象
面向对象面向对象 是一种编程思想 是基于面向过程的编程思想 什么是面向过程: 亲力亲为(自己动手 丰衣足食) 面向程序的每一个步骤 我们之前的编程都是面向过程 什么是面向对象: 强调一切皆对象 强调对象调用功能 将我们从执行者 变成了指挥者 面向过程 买电脑 研究配置---坐车81...原创 2019-12-17 16:40:42 · 171 阅读 · 0 评论 -
Web前端-JavaScript--函数
函数如果有一段代码要反复执行那么我们可以用大括号 包起来 起个名字 用来反复调用这就是函数 所谓函数就是一段代码可以反复执行 只要调用函数 就可以反复执行重复的代码函数定义的格式: function 函数名(参数(形参)){ 函数体代码(要被反复执行的代码) }...原创 2019-12-16 09:26:37 · 331 阅读 · 0 评论 -
Web前端-JavaScript--数组
99乘法表<script> document.write("<table border='1'>"); for(i=1;i<=9;i++){ document.write("<tr>"); for (j=1; j<=i; j++) { document.write('<td&...原创 2019-12-13 15:53:28 · 379 阅读 · 0 评论 -
Web前端-JavaScript--基础2
JS中的流程控制语句: 顺序结构 从上到下依次执行 代码的先后顺序对结果又直接影响 到目前为止 我们的编码都是顺序结构 console.log("好希望自己彩票中奖:"+a+"万!"); var a=100; //代码的顺序对结果又直接影响 选择结构编...原创 2019-12-12 09:46:24 · 141 阅读 · 0 评论 -
Web前端-css1--引入方式与选择器 层级覆盖
csscss 中的样式格式语法: 选择器{ 样式名:样式值; 样式名:样式值; 。。。。。。 }css 的引入方式: 3种: 1外部样式: (开发时...原创 2019-12-01 23:12:40 · 344 阅读 · 0 评论 -
Web前端-css2--部分样式
css宽高样式html标签的分类: 块: 在默认样式下: 当前的标签自己独占一行 ;可以设置宽高。 例如: div p h1~h6 nav header footer section ul li ol 行内块:在默认样式下:多个...原创 2019-12-02 00:33:00 · 127 阅读 · 0 评论 -
Web前端-css3--图文基线 背景
csshtml表现分类: 1块: 自己独占一行 可以设置宽高 2行内块: 可以供占一行 可以可以设置宽高 3行内: 可以供占一行 不可以设置宽高 display:改变标签的表现状态 block...原创 2019-12-04 21:14:17 · 776 阅读 · 0 评论 -
Web前端-css4--盒子模型
盒子模型内容区域<body><style> div{ width: 200px; height: 200px; background-color: #f00; }</style>...原创 2019-12-04 21:25:03 · 144 阅读 · 0 评论