- 博客(44)
- 收藏
- 关注
RSS订阅原创 axios抽取
单文件组件是一个独立的文件(拥有独立的作用域)直接在main.js里面导入其他的文件 比如axios 那么其他的组建也无法直接使用每一个组件都是可复用的vue实例 构造函数是Vue怎样让每一个对象共享一份属性? 让所有的组件都能使用axios 可以直接把它加入到Vue.prototype注意点 :1.原型里面设置的属性 所有的实例化对象都可以使用(共享)2.Vue开发中 如果遇到所有组件都需要的方法或者模块 都可以直接放到Vue的原型上3.命名规则 ..
2020-09-02 13:25:43
172
原创 vue-router
介绍：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。功能：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为安装src导入<script src="/path/to/vue.js"><
2020-09-02 13:20:18
119
原创 vue-resource与 axios
vue-resourcevue-resource vue.js的一个插件作用:就是发送网络请求 和jQuery相比 功能更加纯粹(只做一件事)发送请求是通过向vue的实例化对象里面添加$http属性 调用get方法 可以发送get请求 post请求 还可以请求跨域资源为什么不推荐使用vue-resource库？1.vue-resource 不需要与vue深度结合 可以使用第三方库2.第三方库或持续迭代更新 功能更全面3.vue团队结合前面两点 觉得没必要花精力去维护vue
2020-08-25 19:04:47
218
原创 vue-计算属性与钩子函数
计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你
2020-08-25 18:54:50
396
原创 自定义指令
1.自定义指令 其实就是写一个回调函数2.钩子函数 就是回调函数3.钩子函数的作用：让开发人员在特定的时候执行自定义逻辑4.el 是使用了自定义指令的这个dom元素5.注意 ： 自定义指令的名称里面不能有大写字母6.钩子函数不能随便乱写7.三个钩子函数的触发时机bind : 指令应用到元素上触发 元素插入donm时触发一次inserted ： 元素被插入dom树中时 会被触发一次 可以通过增加元素来触发多次update ： 只要数据发生变化就会触发 可以触发多次自定义指令的作用 .
2020-08-19 13:52:34
551
原创 vue内部指令03
1.v-cloak 指令作用： 在Vue还没有解析完毕之前 把一些标签隐藏起来css: [v-cloak]{ display: none; }html: <div id="app"> <img v-cloak src="../imgs/诸葛亮.jpg" alt=""> <h2 v-cloak>{{info}}</h2> </div>js: var app = ne
2020-08-19 13:48:26
75
原创 vue内部指令02
1.v-if v-else v-show 指令v-if:是vue 的一个内部指令，指令用在我们的html中。v-show:调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。v-if 和v-show的区别：v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。v-show：调整css dispaly属性，可以使客户端操作更加流畅。v-if v-else结合实例html: <div id="app"> <div v
2020-08-12 10:05:34
94
原创 vue内部指令01
1.v-text && v-htmlv-text 给元素设置文本语法:在标签里面 v-text = “data里面的数据”特点:直接设置会覆盖掉标签原本的文本 没办法解析标签简写方式{{}}弊端:网速慢的时候会出现{{xxx}}如果我们要保留标签里面原始的文本 name就必须使用简写方式<h1>我不爱睡觉{{message}}</h1>注：开发中 简写方式用的很多 v-text用的很少v-html:在标签内部 v-html
2020-08-12 09:46:46
96
原创 冒泡排序与arguments关键字
冒泡排序function bubble(arr){ let newarr = [...arr]; for(let i=0;i<newarr.length-1;i++){ for(let j=0;j<newarr.length-1-i;j++){ if(newarr[j] > newarr[j+1]){ [newarr[j] , newarr[j+1]] = [newarr[j+1] , newarr[
2020-08-05 09:04:01
305
原创 数组去重的12种方法
1.ES6 set去重function sort1(arr) { return Array.from(new Set(arr));}2.for嵌套for 然后splice去重function sort2(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) {
2020-08-05 09:01:23
625
原创 npm内置模块
npmnpm内置模块1.http使用方法：1.导入模块 const http = require(“http”)；2.创建服务器对象 const server = http.createServer((request,response) => { })request 是存储发送请求的所有信息的对象response 是服务器响应返回的所有信息的对象3.开启服务器 server.listen(“端口号”,ip地址,callback);1.地址可以省略 端口号不行 默认地址是127.0.0
2020-07-28 19:19:25
329
原创 nodejs入门
学习nodejs的意义？ 1.了解浏览器端和服务器端的交互过程 可以缩短开发周期 2.出现bug可以快速定位是前端问题还是后端问题 3.nodejs和其他后端语言拥有一样的功能 可以做数据库的增删改查 爬虫虫 读写文件 …什么是nodejs？ Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境， v8解析js是最快的 nodejs是让js运行在服务器端 nodejs里面的api大多数都是异步的服务器端的js和浏览器端的js有什么区别
2020-07-28 19:17:42
74
原创 JS jQuery
jQuery定义：1.jQuery是一个快速、小且功能丰富的JavaScript库。(jquery其实就是别人封装好的外部js库)2.它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，3.它使用了一个易于使用的API，可以跨多种浏览器工作。4.通过多功能性和可扩展性的结合，jQuery已经改变了数百万人编写JavaScript的方式。引入jQuery<script src="js/jquery-1.12.4.min.js" type="text/javascript
2020-07-15 19:18:58
180
函数中的this指向
1. 普通函数的this普通函数的this : this就是谁调用 this就指向谁 this是在调用的时候确定的function f1(){ console.log(this);}f1(); //window2.对象里面的方法this对象里面的方法,它里面的this指向当前这个对象var obj = { a : 6, b : 7, name : "zhangshang", print(){ // console.log(this.a + t
2020-07-15 19:14:01
3626
原创 let 和 const
let和const命令是ES6新增的语法作用:是用来声明变量和var的作用一样let和const的用法注意点几乎一样只是let在同一作用域内 可以重新赋值 但是不能重复声明const声明的是常量声明过后 就不能在重新声明或者重新赋值letlet声明的变量只在1et所在的作用域内起作用（变量绑定）var a = 123;function f1(){ a = 456; console.log(a); //在下面进行let声明 let a; //报错 没初始化}1.作用域的问题 通
2020-07-15 19:12:30
96
原创 模板引擎
模版引擎1.ES5之前拼接的字符串 1.拼接太麻烦 需要多次分割 不便于维护 2.所有拼接的字符串只有一行显示太长 3.模板字符串 所有的内容写在反引号(``)里面 然后变量放在${}里面document.querySelector("p").innerHTML = "我叫" + stu.name + "，我今年" + stu.age + "岁了，我住在" + stu.place + "，今年上" + stu.grade + "年级";function age(num){ retu
2020-07-13 19:39:01
73
原创 FormData对象
formData对象1.使用formData传递参数需要注意的点 :1.使用FormData传递数据 必须是post请求2.创建FormData对象 创建时可以传参 参数是form表单元素 必须是DOM元素3.传递的form对象能获取到的 只能找到带有name属性的表单元素4.如果想要额外传递其他参数 FormData对象调用append方法添加进去2.如果通过jQuery发送ajax请求 , 并且使用FormData对象传递数据1.processData : false 告诉jQuery
2020-07-13 19:36:52
211
原创 ES6 结构赋值、扩展运算符、数组、字符串、函数扩展
解构赋值1.什么叫做解构?在ES6中按照一 定的模式从 数组中提取数值对对应的变量进行赋值的操作就叫做解构赋值 本质上讲解构赋值就是模式匹配2.解构赋值var [a,b,c] = [1,2,3];console.log(a,b,c);//1 2 31.如果想要解构赋值成功那么就必须保证两边的模式完全一样var [a,b,c]=[1,2,{name : 'lucy'}];console.log(a,b,c); //1 2 {name:'lucy'}2.如果解构不成功 那么变量的值就等于und
2020-07-13 19:35:42
493
原创 js ajax
ajax定义ajax就是异步 的js和XML1.Ajax即"Asynchronous Javascript And XML” (异步JavaScript 和XML) ，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。2.通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。3.就是使用ajax技术对网页进行局部更新 (向后台发送 了请求但是页面不会发生跳转)
2020-07-08 18:46:38
281
原创 bootstrop
Bootstrap视口视口的概念1.在PC端没有视口的概念，只有窗口。2.是html页面外面的一个容器我们会把所有的内容都放进视口里面，然后在对视口进行缩放3.默认视口的宽度是980px 因为早期PC端网页的版心的980px4.视口宽度为980px对于移动端来说会出现缩小后文字很小的情况 所以后来提供了双击放大的功能，但是需要左右滑动，用户体验很差，所以我们需要设置移动端的视口不发生缩放meta标签meta标签是对网页进行配置<meta name="viewport" content
2020-07-08 18:13:01
878
原创 jquery基础
一.设置文本的方法text() 获取和设置文本的方法1.获取全部的文本// console.log($(“div”).text());2.设置文本只需要给text(参数) 加了参数后 就是给元素设置文本会覆盖元素原本的文本 包括子元素如果新设置的文本中包括了标签，那么他是不会解析标签的 当成文本解析二.设置获取样式的方法css()就是用来获取或者设置样式的方法1.获取div1标签的样式console.log((".div1").css("width"));在所有的I..
2020-05-17 17:50:01
62
原创 jquery是什么
query 是什么？jquery其实就是别人封装好的外部js库jQuery是一个快速、小且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，它使用了一个易于使用的API，可以跨多种浏览器工作。通过多功能性和可扩展性的结合，jQuery已经改变了数百万人编写JavaScript的方式。为什么引入jquery原生的缺点：1.不能写多个入口函数 写了多个 就会覆盖前面的2.原生的获取元素的名字太长 不好记3.容错率低，如果前面.
2020-05-17 17:40:47
986
原创 事件对象的三大坐标系
事件对象 ：当我们触发某个事件，那么和这个事件相关的一些信息就好自动保存一个对象里面，我们就把这个对象称作事件对象当我们触发某个事件的时候，浏览器就会自动帮我们捕获一些关于这个事件的一些信息谷歌火狐 ： 一般是给事件处理函数添加一个形参 event ev eIE8 使用一个全局变量来保存和事件相关的信息1.screenX screenY 表示的是从鼠标点击的点到屏幕左上角的距离2...
2020-04-12 13:25:06
286
原创 动画效果
动画效果三个家族作用：获取元素真实的位置或者宽高offset家族成员offsetWidth/offsetHeight与点语法获取元素属性的区别点语法获取元素属性的特点1.只能获取行内属性，无法获取行外属性，如果行内属性不存在 获取到的是空字符串2.获取到的属性是string类型的数据 而且带单位3.获取刀的只是我们再行内设置的width和height的值，（我们...
2020-04-12 13:16:17
69
原创 匀速运动与缓速运动
1.匀速运动匀速运动的步骤：1.开启定时器之前，清楚原本的定时器clearInterval(ele.timeID);2.获取当前位置var currentLeft = ele.offsetLeft;;3.开启定时器ele.timeID = setInterval(function(){},50);4.移动盒子currentLeft += 50;5.把盒子现在的位置赋值给lef...
2020-04-12 13:11:59
369
原创 操作DOM元素（4）
appendChild用法1.新创建一个li元素 var newLi = document.createElement("li"); newLi.innerText = "我是新建的li"; ul1.appendChild(newLi);2.如果要添加的元素原本就存在 移动到父元素的最后 var li2 = document.getElementById("li2"); ul...
2020-03-22 14:13:09
93
原创 操作dom元素（3）
操作dom元素动态操作查查元素idgetElementById返回值只获取到一个元素，没有找到返回nullclassgetElementsByClassName返回值是一个类数组，没有找到返回空数组标签名getElementsByTagName返回值是一个类数组，没有找到返回空数组namegetElementsByName...
2020-03-22 13:44:55
62
原创 操作DOM元素(2)
四、对节点进行操作1、查找结点a. 采用节点之间的关系去拿 根节点： document.documentElement ;b. 采用方法去拿document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖iddocument.getElementsByTagName();//标签名document.g...
2020-03-15 13:34:57
118
原创 操作DOM元素(1)
JS操作DOM元素代码的编写DOM树传统的html文档顺序是:document->html->(head,body)根据 DOM，HTML 文档中的每个成分都是一个节点。整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点一、document对象(DOM核心对象)1、d...
2020-03-15 13:06:02
126
原创 js 函数执行 事件
函数执行方式 最基本的有三种普通的函数调用this 谁调用就指谁 function test () { console.log(111); console.log(this); } test(); // this也是window, 表示默认是使用window调用 window....
2020-03-08 13:49:50
513
原创 2020.3.1预解析 闭包 事件
函数预解析（1）会生成一个对象（GO），这个对象封装的就是作用域，称为GO（global object）。当全部挂载完成之后，然后代码在去逐行执行GO={ }（2）分析变量声明（var）——变量作为GO对象的属性名，值为undefinedGO={foo:undefined;}（3）分析函数声明（function...
2020-03-01 12:02:53
90
原创 js对象
对象定义无序的键值对的集合创建对象的两种方式字面量: var student = {};建了一个空对象内置构造函数 var student = new Object();对象的赋值和取值取值对象名.属性名 ------如果存在，返回响应值；如果不存在，undefined对象名.方法名------直接获取，返回函数体，对象名.方法名(),即调用这个方法赋值(类似数组)对象名....
2020-02-23 14:09:13
51
原创 JS函数
函数函数的声明 function 函数名(参数) { 函数体 } var 函数名 = function(参数) { 函数体 }函数的调用 函数名();函数参数 参数的作用 是让调用者传递数据给函数 谁传递参数 调用者 谁接收参数 函数接 传参的本质 实参给形参赋值 形参 形式参数, 是在函数内部声明一个变量, 必须省略var ...
2020-01-08 15:18:24
87
原创 JS冒泡排序 开关思想 二维数组 时期API
冒泡排序，开关去重<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> function sortNumber(...
2020-01-08 15:09:03
213
原创 JS数组
数组数组的声明方法 var 数组名 = [元素1, 元素2, .....] 数组名 就是变量名 简单声明方法用的多 var 数组名 = new Array(元素1, 元素2, 元素3, ........) 两种声明方式的区别 var arr=[10]; 表示数组长度为1, 数组元素为10 var arr = new Array(10); 表示的是数组长度...
2020-01-08 14:54:18
114
原创 js三种循环结构
JS基础循环循环结构 while循环 适用于循环次数不确定的循环 先进行条件判断, 再执行循环体(先奏后斩) 条件判断语句的类型 关系表达式 布尔类型的值 其他数据类型的值, 都要转换成布尔类型 注意 循环变量自增, 防止死循环 do-while循环 适用于循环次数不确定的循环, 但是循环体必须无条件先循环一次 (先斩后奏) 特点都和whi...
2020-01-08 14:29:29
287
原创 JS基础2
JS基础第三天自增自减运算符 ++ 等同于 +=1 前自增++a 先自身加1, 再进行运算 后自增a++ 先进行运算, 在自身加1 -- 等同于 -=三元表达式 ?: 语法 : 表达式1 ? 代码1 : 代码2 表达式1可以是什么? 关系表达式 布尔类型类型的值 其他类型的值, 要转换成布尔类型进行计算数据类型转换 显示转...
2019-12-30 16:28:31
235
原创 js基础
JS基础浏览器 谷歌 Blink(2013年) IE Trident 火狐 Gecko 欧朋 Blink Safari webkitjs组成 ECMAScript (3/5/6/7)它是JS语言的标准,规定了JS的编程语法和基础核心知识 DOM document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法 BO...
2019-12-30 16:24:55
68
原创 前端web学习 html入门
第一天学习记录<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>这是网页标题</title> </head> <body> <!--加粗b 倾斜i 下滑线u 删除线s 上标sup 下标sub 换行br...
2019-12-27 08:46:40
181
原创 css 定位
一、定位普通流定位：（元素默认的定位方式）position：static浮动定位：float left rightclear ：left 清除左浮动 right 清除右浮动 both 不管是左右都清除相对定位：position：relative绝对定位：position：absolute固定定位：position：fixedz-index：调整元素的图层...
2019-12-16 09:20:59
254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人