前端入门学习
文章平均质量分 50
HTMl CSS JS Vue框架的学习笔记
33的史努比
这个作者很懒,什么都没留下…
展开
-
GitStash理解
stash:存放,保存当前工作进度,会把暂存区和工作区的改动保存在一个栈上后续可以在任何时候任何分支重新将某次的修改推出来,重新应用这些更改的代码。原创 2023-07-12 09:41:54 · 349 阅读 · 0 评论 -
强制缓存与协商缓存
文章目录缓存的概念缓存作用强缓存(一)expires(二)cache-control(三)pragma协商缓存(一)last-modified(二)etag缓存的概念缓存其实就是资源副本,在向服务器请求资源时,会copy一份在本地存储但是与本地存储的localstorage cookie不一样:本地存储:存的是数据记录,存储量较小缓存:存的是请求的资源文件 存储量相对较大缓存作用缓存就是为了减少不必要的请求直接从本地读取加载可以减少服务器加载压力,优化用户体验缓存按浏览器读取优先级顺序依次原创 2022-03-22 20:31:43 · 386 阅读 · 0 评论 -
axios与fetch
Axios是对XMLHttpRequest的封装而Fetch是一种新的获取资源的接口方式不同点:传递数据Axios是放到data属性里,以对象的方式进行传递Fetch则是需要放在body属性中,以字符串的方式进行传递数据转化Axios 自动对数据进行转化Fetch 需要手动转化 .json()fetch("地址") .then((response) => response.json()) // 对响应数据转换 .then((data) => { console.原创 2022-03-22 11:33:12 · 1218 阅读 · 0 评论 -
JavaScript——面向对象
记录一下阅读《JavaScript高级程序设计》的一点点笔记——面向对象访问器的属性 set getvar book = { _year : 2004, edition : 1 }; Object.defineProperty( book,"year", { get : function(){ return this._year原创 2022-03-17 21:08:44 · 1153 阅读 · 0 评论 -
js代码如何执行
在执行一段代码时,js先创立一个执行栈· js创建全局执行上下文,push到执行栈中,为代码中所有变量分配内存并赋一个初始值(undefined)· 执行阶段,JS引擎会逐行执行代码,即为之前分配好内存的变量逐个赋值(真实值)· function的声明和调用 :JS引擎会创建一个函数执行上下文,并push到执行栈中,其创建和执行过程跟全局执行上下文一样。特殊情况1:函数中存在对其它函数的调用时,JS引擎会在父函数执行的过程中,将子函数的全局执行上下文push到执行栈,这也是为什么子函数能够访问到父原创 2022-03-17 21:06:50 · 2082 阅读 · 0 评论 -
JavaScript——关于闭包
文章目录概念作用缺点及解决方法概念闭包就是能够读取其他函数内部变量的函数。闭包就是将函数内部和函数外部连接起来的一座桥梁作用读取函数内部变量在内存中保存变量:function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; }f1是f2的父函数,而f2的存在依赖于f1f2被赋给了全局变量,这导致f2始终在内存中,原创 2022-03-17 17:30:46 · 1129 阅读 · 0 评论 -
关于类数组——转换成数组的方法
类数组:var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }拥有length属性,索引为非负整数不具有数组的所具有的方法转换成数组的方法:想取出 name age sex:slicespliceArray.from (es6)apply// 1. sliceArray.prototype.slice.call(arrayLike); // ["name", "age", "sex"] // 2. spliceArr原创 2022-03-17 16:36:52 · 225 阅读 · 0 评论 -
JavaScript——继承
学习一下 b继承a的方法~文章目录原型链继承借用构造函数组合继承原型链继承新实例的原型等于父类的实例function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); } }function Cat(name){ this.name = name; }Cat.prototype = new Animal();//原型链继承实例可继承原创 2022-03-17 16:03:00 · 109 阅读 · 0 评论 -
Vue——axios实例以及与ajax对比
复盘项目时,注意到dell老师使用的是axios实例,封装简单可用的get方法,并没有直接使用axios.get。文章目录axios实例ajax简单的代码实现ajax关于状态码ajax与MVC二者优缺点axios实例*为什么要创建axios实例,与直接的axios.get有什么区别呢?因为在实际工作中,可能需要访问多个服务地址,而这些服务请求和响应的结构也可能都完全不同,那么你可以通过axios.create创建不同的实例来处理。而且这样写代码又精简了啊喂(>○<)另外搜索中又发现了原创 2022-03-13 16:39:13 · 1480 阅读 · 0 评论 -
vue——路由vue router
vue做的都是单页应用,只有一个主页面index.html,所以标签不起作用的,这就要使用vue-router来进行管理文章目录一.介绍二. 创建组件三. router-view四. routes配置webpack内联注释懒加载 延迟加载五. 路由中的钩子函数六. history模式一.介绍vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。在vue-router单页面中,路径之间的切换就是组件的切换。二. 创建组件用vue-cli产生项目结构,src文件目录下会有原创 2022-03-13 15:54:45 · 1017 阅读 · 0 评论 -
Vue原理——MVVM MVC MVP
概念MVVM(Model-View-ViewModel)是一种软件架构设计模式,它是一种简化用户界面的事件驱动编程方式。MVVM 分为 Model、View、ViewModel:● Model代表数据模型,数据和业务逻辑都在Model层中定义;● View代表UI视图,负责数据的展示;● ViewModel负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定原创 2022-03-12 16:59:10 · 394 阅读 · 0 评论 -
Vue——生命周期
文章目录一.概念二.生命周期函数1. beforecreated(){}2. created(){}3. beforemounted(){}4. mounted(){}5. beforeupdated(){}6. updated(){}7. beforedestroy(){}8. destroyed(){}三. 父子组件的生命周期1. 创建过程:2.更新过程3. 销毁过程一.概念生命周期事件(钩子),组件创建,更新,销毁的过程二.生命周期函数1. beforecreated(){}实例创建前执行它原创 2022-03-12 16:16:16 · 340 阅读 · 0 评论 -
Vue——runtime-compiler runtime-only区别
runtime-compiler runtime-only区别在main.js有区别compiler :/* eslint-disable no-new */new Vue({ el: '#app', components: { App }, template: '<App/>'})template-> ast(抽象树) -> render -> vdom -> UIonly:性能更高,代码量更少render函数render->v原创 2022-03-01 11:30:12 · 392 阅读 · 0 评论 -
Vue——父子组件通信案例
父子组件通信案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --&原创 2022-02-28 12:31:25 · 426 阅读 · 0 评论 -
vue——子访问父组件
子访问父组件parent<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-02-28 12:15:28 · 73 阅读 · 0 评论 -
vue——父访问子组件
父访问子children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2022-02-28 12:01:44 · 369 阅读 · 0 评论 -
Vue——父子组件间传递 子传父
子传父emit当子组件需要向父组件传递数据,就要用到自定义事件v-on 可以监听dom事件和 组件之间的自定义事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi原创 2022-02-27 21:55:12 · 216 阅读 · 0 评论 -
Vue——父子组件的通信
父组件向子组件传递数据props 数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-27 21:07:22 · 203 阅读 · 0 评论 -
组件中数据存放问题
组件不可以访问vue里面的实例组件数据的存放:组件对象也有data属性,也有methods属性,data属性必须是一个函数 // 注册 Vue.component('cpn',{ template:'#cpn', data(){ return {title : 'aaa' } } })为什么组件data是函数对象可以共用,会相互影响,函数原创 2022-02-27 19:54:54 · 154 阅读 · 0 评论 -
Vue——组件
组件基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2022-02-27 18:32:33 · 47 阅读 · 0 评论 -
v-model的使用
v-model 与radio结合使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-27 16:20:13 · 63 阅读 · 0 评论 -
js高阶函数的使用
多种循环方式:totalPrice(){ let totalPrice = 0 // 1.普通for循环 // for(let i=0; i < this.books.length; i++){ // totalPrice+=this.books[i].price * this.books[i].count // } // 2. i in book原创 2022-02-27 15:32:53 · 36 阅读 · 0 评论 -
购物车界面搭建
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.原创 2022-02-27 12:13:54 · 82 阅读 · 0 评论 -
小案例——@click,:class
Q:列表第一项红色,之后点击某项某项变红:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-27 11:10:56 · 91 阅读 · 0 评论 -
条件判断,循环遍历,响应式
条件判断v-if当条件为false时,包含v-if的元素根本不会存在于dom中v-show 当条件为false时,只是给元素增加一个行内样式display:none循环遍历v-for 遍历对象 数组类似<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2022-02-27 10:55:10 · 89 阅读 · 0 评论 -
Vue——用户登录切换的小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-02-27 08:58:21 · 190 阅读 · 0 评论 -
vue——v-if,v-else,v-else-if
v-if v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2022-02-26 20:45:07 · 134 阅读 · 0 评论 -
v-on修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-02-26 20:31:44 · 55 阅读 · 0 评论 -
Vue——对象字面量的增强写法
1.属性的增强写法 const name = 'why'; const age = 11; const obj = { name, age, }2.函数的增强写法 const obj = { run(){ }, eat(){ }原创 2022-02-26 19:41:59 · 177 阅读 · 0 评论 -
计算属性的setter getter
只读属性:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2022-02-26 15:28:12 · 107 阅读 · 0 评论 -
vue——计算属性
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2022-02-26 14:48:57 · 50 阅读 · 0 评论 -
v-bind动态绑定style(对象语法 数组语法)
对象语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2022-02-26 14:17:41 · 95 阅读 · 0 评论 -
Vue——模板语法
mustach语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2022-02-26 13:52:57 · 43 阅读 · 0 评论 -
VUE生命周期
vue实例从创建到销毁的过程即生命周期,即指从创建,初始化数据,编译模板,挂载DOM到渲染,更新到渲染,销毁等一系列过程。主要分为8个阶段,创建前后,载入前后,更新前后,销毁前,销毁后以及一些特殊场景的生命周期。菜鸟教程——vue生命周期...原创 2022-02-26 09:29:54 · 140 阅读 · 0 评论 -
创建VUE实例传入的options
el:类型 string/htmlelement决定vue管理哪个dom // el : '#app' el: document.querySelector('#app'),data :类型:objec/函数methods:类型:{[key:sting]:function}方法vs函数:方法method,与实例对象挂钩,在实例里面称之为方法函数fuction...原创 2022-02-26 08:54:08 · 62 阅读 · 0 评论 -
VUE——MVVM
MVVMModel-View-ViewModel计数器的MVVM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-原创 2022-02-26 08:43:46 · 62 阅读 · 0 评论 -
JavaScript权威指南的笔记——构造函数
// 创建对象 工厂模式function creatPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o;}var person1 = creatPerson('xr',22,'se');var pers原创 2022-02-25 16:22:55 · 184 阅读 · 0 评论 -
VUEjs的一点点体验——coderwhy视频笔记
创建vue实例传入一些options(对象类型) 包含:el 该属性决定挂载哪个元素data 该数据直接定义或来自网络。从服务器加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co原创 2022-02-25 16:21:13 · 1786 阅读 · 0 评论 -
JavaScript——事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-02-17 09:43:24 · 36 阅读 · 0 评论 -
javascript——小方块运动
关于小方块的运动,包含加速,停止<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-02-12 16:34:44 · 143 阅读 · 0 评论