- 博客(45)
- 收藏
- 关注
RSS订阅原创 全局封装proxy--公共数据配置与axios封装
在main.js中引入 import "$axios" from "./$axios.js"在js文件中引入axios import axios from "axios"公共数据配置声明app---const app=createApp(App)注意 声明了app后 调用mount("#app")的对象改成app。创建一个函数: 传入参数app 设置基础url 设置公共axios。直接调用全局中声明的变量 proxy.msg。app挂载 app.use($axios)新建一个js文件$axios.js。
2022-09-22 21:41:42
437
2
原创 Vue--组件数据传递与组件切换
Box2:this.$emit("x","box2修改了数据") Box1:v-on="$listeners" Box:"@x="changex"" changex(val){log(val)} val="box2修改了数据"----父组件在子组件标签上### 子组件用prons接收value 然后就能当数据使用。获取元素节点 如父组件A，子组件B，孙组件C。
2022-09-12 15:24:00
482
1
原创 Vue项目
懒加载写法:需要使用时才加载组件: Box:()=>import("XX.vue")组件中的data写法 data(){return {msg,arr}}遇到/hj请求就由本地网址向target中的网址发起代理请求实现跨域。script中expor default{}内些组件的各种数据和业务。在vue.config.js中关闭严格模式或创建时自己设置关闭。创建Vue项目指令: vue create name。组件注册写法:外部引入了 就直接写Box,组件注册模块:components:{
2022-09-12 14:55:02
263
原创 自定义指令与生命周期函数
那么在标签上写入属性v-red就能对这个标签执行red函数中的操作 也就是可以使用DOM操作，一般vue是不建议使用DOM操作的,但在directives中可以。这个函数在运行时 vm在创建中：劫持data，methods 也就是this对象中还不能访问到数据。能做网络请求 可以设置到数据源中 因为这个钩子中this已经创建完毕了。在这个函数中可以操作this对象了但是无法操作页面(DOM)页面重新渲染前 触发的钩子 (如数据更新 重新渲染前)当前vm实例在创建到销毁的过程中 会去调用的函数。
2022-09-11 15:11:00
362
原创 过滤器,计算属性,属性侦听器
若msg是一个非函数数据msg将作为fn的第一个参数传入fn 10,20是第2,3个参数,fn返回的值再作为参数传给fm最后返回的值显示页面上。与methods区别:如果页面重新渲染时会执行methods中的函数，这个函数会执行，但是computed不会。当与computed中的函数有关联的数据发生改变时 函数就会重新计算，如果不变函数就不会重新执行。当这个数据变化时 函数就会执行 函数的第一个参数是变化后的值，第二个参数是变化前的值。过滤器一般写法{{msg|fn(10,20)|fm}}
2022-09-10 16:35:28
129
原创 响应式驱动与双向数据绑定
如:在input标签中使用v-model属性v-model="msg" msg就相当于输入框value 当用户输入内容msg也会跟着变化。vm.$set(this.arr,1,"hello")参数1一个data中的数组 参数2替换的位置 参数3被替换成的值。双向数据绑定:如果变量变了也会让页面刷新,如果用户操作DOM改变了页面 反之也会改变容器中的数据。用@click="fn"去更改数据中的msg时，页面上的msg会跟着变化不用刷新页面。只刷新不改变就写原来的值 ，这样就完成了页面的重新渲染。
2022-09-10 16:22:01
124
原创 Vue基础指令2
v-for也可以写成 v-for="(el,index) in arr" index为自动分陪的下标 可以在div内当做参数或渲染到页面。v-show 用css影藏元素(display:none) 内存消耗更高 适用于经常切换业务。如果v-for取的el in 那么v-if就会取v-for的el。style的样式绑定 什么时候用:当页面中有某些样式的改变时。在一个div中加上v-for属性 他的所有子元素都会循环渲染。v-if v-for 写到一起时 v-for 优先级更高。v-if与v-show。
2022-09-08 18:01:06
156
原创 Vue基础指令
div id="app" v-clock> 在app上加上v-clock 然后[v-clock]样式设置display:none。v-bind:src="" 可以让src中填一个字符串 而字符串可以去data中获取。@click="fn" 或v-on:click="fn" 绑定点击事件。v-pre静默 跳过编译不去识别msg1 页面直接显示{{msg}}v-html同v-text会渲染字符串中的标签如简写v-bind:src----:src。2.v-text 与 v-html。
2022-09-08 17:47:10
197
原创 webpack打包工具
babel-loadr加载器 npm install babel-loader @babel/core @babel/preset-env webpack -D。ts加载器:npm install ts-loader webpack typescript --save-dev 需要创建tsconfig文件。npm i sass-loader -save-dev sass加载器。npm i file-loader --save-dev文件加载器。
2022-09-02 23:29:55
605
原创 前后端--上传商品
获取图片文件:var f1=f.files[0] //点击函数的参数this指向input标签本身。根据登录时缓存的邮箱 在sql中取出头像名字等信息 再根据前端的字段取出价格。再用sql将信息插入商品goods数据表 后面在商品界面自动调用。没登录就打开登录界面 登录了就加载缓存中的头像和名字。将图片和字段发送到商品界面这里可以引入一个工具函数。写静态界面 商品图上传框 商品名 价格等。对于已经登录过的页面 都需要先判断是否登录。发送网络请求 把表单发过去。商品图片盒子写点击事件。.....
2022-08-11 20:35:27
97
原创 前后端--登录
var captcha=svgCaptcha.create({ //svgCaptcha.create创建验证码。3.if判断email是否存在数据库中 if不存在返回"邮箱不存在"else存在再次请求邮箱和密码匹配的数据。this.ctx.session.verif=captcha.text //缓存验证码。let verif=this.ctx.session.verif//取出缓存验证码。在login的网络请求处 判断输入的验证码是否等于原验证码。判断返回的各种code码返回不同的结果。......
2022-08-10 22:37:32
131
原创 前后端交互项目板块写法--注册
INSERT INTO user (ctime,screenname,touxiang,email,password,idcardimg) VALUES ("${ctime}","${ziduan.screenname}","${ziduan.touxiang}","${ziduan.email}","${ziduan.pwd}","${ziduan.idcardimg}")` 存入所有前端传入的数据。获取前端上传的文件 let f1=this.ctx.request.files。.........
2022-08-09 22:43:11
72
原创 egg框架
router.get("/ajax",controller.home.fn) 表示 路由/ajax 其指向controller文件中的home.js文件中的fn函数。2. .body:前端post发送给egg的参数字段 也就是axios.post(url,{userid:13,pwd:123})第二个参数。input：name属性为query字段的key值 输入的value为 key的值 点击submit之后在跳转的网址的query部分显示。......
2022-08-04 19:16:19
556
原创 网络请求技术 跨域
varquerobj=querystring.parse(query1)将取出的query部分转化为键和值的对象这里是query1={callbackname}res.end(`${querobj.callback}(${str})`)返回一个字符串给script的src请求这里是callback(str)函数。3.script标签的src值可以做网络请求且能跨域当请求的后端返回了一个js文件内容为vara=1时可以直接在当前项目使用。但显示的网址是自己的网址。......
2022-08-01 18:41:48
132
原创 ajax技术
前端向后端做网络请求如下代码:1.创建可以做网络请求的对象let xhr=new XMLHttpRequest()||new ActiveXObject()2.配置连接信息第二个参数为请求的网址xhr.open("GET",`http://192.168.1.6:8888/ajax1?name=karen&count=20`,true)这里会请求ajax13.发起网络请求xhr.send()4.监听网络数据xur.onreadystatechange=function(){}xhr.readyState=
2022-08-01 17:38:35
254
原创 node.js基本
letpath=__dirname+"要返回的文件所在的项目文件"+pathname表示传给用户的文件。用户只需要输入目标文件的名字就能找到这个文件fs.readFile(path,(err,data)第一个参数为返回目标文件的路径，第二个参数为回调函数他的参数分别是。通过if判断用户输入的网址如/test/home返回相应的文件。err为读取不到文件时返回的data为读取到的文件。表示后端最后一次返回给前端的数据可以写data。__dirname表示当前文件所在的项目文件。...
2022-07-29 11:48:21
52
原创 事件链冒泡捕获与代理
无论事件触发时是不是目标对象的监听器在监听器内部的事件对象event中都可以访问这个事件的目标对象利用这个特点去绑定事件给父级元素来代理子级元素的业务这种设计就是事件代理。冒泡阶段box3->box2->box1->body->html->document->window因为box2和box1绑定了所以先打印box2再打印box1。捕获阶段从window->documnet->html->body->box1->box2->box3。事件代理利用的事件冒泡原理。这样的设计有两个缺点。......
2022-07-22 18:55:27
41
原创 元素盒子模型
11.e.pageX//鼠标点击处相对于页面的水平偏移量（没有滚动条时与e.clientX相同，有滚动条时相当于e.clientX+scrollLeft）12.e.pageY//鼠标点击处相对于页面的竖直偏移量（没有滚动条时与e.clientY相同，有滚动条时相当于e.clientY+scrollTop）6.obj.clientHeight//返回元素的可视高（包括元素的高，内边距，不包括边框）；2.obj.offsetHeight//返回元素的高度（包括元素的高度，内边距和边距）；...
2022-07-18 19:10:01
72
原创 关于事件对象
3.使用监听事件传参ebtn2.addEventListener("click",function(e){e,this}e打印pointeventthis指向button。2.直接写函数functionfn(e){e,this}此时e打印buttonthis打印window。4.改用箭头函数fn=(e)=>{e,this}e打印buttonthis指向window。5.监听事件箭头函数e打印事件对象this打印window。...
2022-07-18 18:58:56
139
原创 点击事件 编写法则
1.点击事件只针对被点击的那个元素做改变比如在el的点击事件函数里可以直接el.style.backgroundColor="skyblue"改变el。5.确定点击的td在tr的位置因为遍历的tds有很多无法确定所在tr这里引入工具函数。6.用forEach遍历进所有tr每个tr的第i个也就是被点击的那个变色。3.对td点击事件因为列同时变而列上都是td。4.排他forEach输入所有td赋予白色。2.无关被点击el的元素需要其他操作。1.获取两个trtd。......
2022-07-14 19:23:52
587
原创 DOM操作获取元素 元素关系 操作元素属性
box.innerHTML="6666"给id为box的标签添加h1标签。email.value="6666"给idemail的标签设置value值。a1.style.backgroundColor="red"改变背景色。vararr=box1.children//id=box1的子元素们。img1.src="../img/hua.webp"添加图片地址。box2.align="center"添加居中属性。如...
2022-07-14 19:12:43
126
原创 正则表达式
由以下代码：rer.test(str) 验证字符串是否符合reg规则 str字符串中是否有rer正则表达式str:字符串 rer:正则表达式test函数的另一种用法:new RegExp 创建正则对像match匹配由以下代码:str2.match(reg2) : str2为字符串 reg2为要在字符串中匹配的正则表达式 与test相反/[a-c][a-c]/ig 表示取两个数 第一个a-c之间的数 第二个也是a-c之间的数 两个数要相邻 i表示不用区分大小写 g表示不限数量
2022-07-13 20:20:08
92
原创 Vue底层核心
vue框架的底层核心语法如下代码：因为上边Object.defineProperty选定的obj,"a" 意为对obj对象中的a操作writtable:true/false 为false时 "a"设置a不可被设置 打印obj.a时显示为value设置的字符enumerable:true/false 意为是否可枚举(for in) a是可以被遍历的成员configurable:true/false 意为是否可删掉/改变符号的属性 true表示可以Object对属性的描述:由Object.d
2022-07-13 19:22:41
122
原创 劫持 call apply bind
this关键字的引用劫持:这是最普通的劫持 把obj的this 劫持到 obj2中call函数劫持:由下面代码知: 分析obj.say.call(obj2,100,200) 相当于obj.say(100,200)正常运行 多出来的元素是.call(obj2)意为将obj.say(100,200)运行中的this原本指向obj这里被call函数改变为obj2如果目标中没有this 那么call()的第一个参数就无效 填什么都可以apply函数劫持：aplly和call一样 但是实参的传入
2022-07-13 16:58:57
46
原创 获取时间与随机数
获取时间的方法如下所示:1.两个时间相减 结果为毫秒时间计算都是毫秒1000为单位自定义设置时间:var sinadt=new Date("Mon Apr 21 19:41:00 +0800 2022")单位换算:var re=new Date(time).getMinutes()//把time换算成分钟获取特性范围的随机数:获取伪随机数: var re=Math.random() 取57-88间的数:获取x到y之间的随机数:Math.random()*(x-(y)+y)Math.ceil()向上取
2022-07-13 16:33:33
129
原创 遍历器合集
1.for循环for 循环是 Js 中最常用的一个循环工具， 经常用于数组的循环遍历。2.for in循环or in 循环主要用于遍历普通对象， i 代表对象的 key 值， obj[i] 代表对应的 value, 当用它来遍历数组时候， 多数情况下也能达到同样的效果， 但是你不要这么做， 这是有风险的， 因为 i 输出为字符串形式， 而不是数组需要的数字下标， 这意味着在某些情况下， 会发生字符串运算， 导致数据错误， 比如： '52' +1 = '521' 而不是我们需要的 53。另外for in
2022-07-12 19:19:16
273
原创 时间函数与Math函数
Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth() 从 Date 对象返回月份 (0 ~ 11)。getFullYear() 从 Date 对象以四位数字返回年份。getYear() 请使用 getFullYear() 方法代替。getHours() 返回 Date 对象的小时 (0 ~ 23)。getMinutes() 返
2022-07-12 18:48:56
60
原创 字符串,数组的方法
str.toUpperCase() 转换成大写str.toLocaleLowerCase() 转换小写str.substr(2,2) 从str的第2个下标开始截取两个字符str2.substring(1,3) (1,3]第一个字符不取 取到第三个字符 下标从1开始 会根据两个参数大小调位置str1.slice(1,4) [1,4]闭区间提取字符串片段 下标从0开始 anchor() 创建 HTML 锚。big() 用大号字体显示字符串。blink() 显示闪动字符串。bold(
2022-07-12 18:46:06
86
原创 作用域链AO GO
一个函数的AO变化情况：先赋值形参 才有fm函数的提升fn运行带参数 :AO{n:undefined==>100,a:undefined==>20,function fm()}fn运行无参数 ：AO{n:undefined,a:undef,function fm(){}}函数有属性 1. length 2. name anxxxxxs 3.[scopes] 作用域 js对象有两种成员 一种是上文成员(js语法可以直接访问的成员) 一种是下文成员(底层语法可
2022-07-12 16:53:31
114
原创 局部预编译过程
分析代码是否正确 1.隐式操作 预编译 var function 2.形式函运==》函数调用了以后 在运行代码之前 会生成一颗对象:执行期上下文对象(AO)：函数每次调用都会生成 2.1.给AO对象添加成员：函数内部的局部变量和形参变量 名 作为AO对象的属性名 赋值undefined AO：{ a:undefined a:undefined 形
2022-07-12 16:29:40
45
原创 自调用与无函数名调用
对于下面的函数:这是一个简单的自调用函数通过一个简单的公式实现函数的自调用 输出从10到1互相相乘的结果由下面的代码可知:要打印出这个嵌套数组的所有数字在不知道内容的情况下先将数组进行遍历 当有非数字时便取这个非数字的数组自调用在遍历直到遍历完所有数组中的数字对于没有函数名的情况如何自调用: arguments.length 实参的长度 arguments.callee 正在运行的函数对象 下面是function这个函数...
2022-07-11 20:15:35
96
原创 作用域与函数提升
var 关键字 var fn; fn就是标识符 作用域：标识符(变量和函数名) 在哪些地方能够被访问 哪些地方就是这个标识符的作用域 这些地方就是指的函数的代码块内部和函数的代码块外部 规则1：函数内部的代码可以访问函数内部的标识符 也可以访问函数外部的标识符(副作用) 规则2：函数外部可以访问函数外部的标识符 但是不能访问函数内部的标识符案例1：由以下代码可知：1.fn运行时内部同时运行fm() 2.对于fm中的a 分为两种
2022-07-08 20:15:13
126
原创 官方函数 原型链互联Fun Obj
Object 是一个函数Function也是一个函数 function是一个关键字他们的数据类型都是function：console.log(typeof Object);//"function"console.log(typeof Function);//"function"函数有三种写法 1.声明式:写一个函数运行脚本时 系统预编译时 帮我们创建这个函数对象 2.定义式:创建函数的语法糖 直接生成一个函数数据(对象) 被标识引用 var a=function
2022-07-08 12:17:08
52
原创 构造函数与原型链
根据函数的业务分类 取了不一样:构造函数 闭包 回调 事件监听器 一般专用于创建对象的函数就是构造函数下面构造函数fn的作用是什么?创建一个有属性a的对象下面构造函数fn2的作用是什么？创建一个有fool方法的对象同一个函数创建出来的对象们 具有相同的空间结构和功能每一个函数创建出来的对象是不相同的 有哪些构造函数呢？ a: 1.自定义函数 2.官方提供的函数:Function String Number Boolean Object Array Date Math官方构造函数对于自己创建的
2022-07-02 22:46:14
93
原创 符号优先级
符号优先级 当多个运算符出现一个语句中 会有一个执行的顺序 var a=(20+30)*50//优先括号 var a=b+c*d//乘法优先案例：对于函数fn中有一个fm函数的情况做以下操作：1.打印 new fn和new fn() 带参和不带参都打印function fm2.new fn()() 双括号 返回fm中的数组并创建为新数组3.new new fn()() 创建一个名为fm的空数组面试题:由以下面试题可以看出：1.Foo.getName 函
2022-06-30 22:03:50
323
原创 原型思想 内存公用
原型思想:内存公用由下面的代码看出：1.fn创建了两个对象f1和f22.每个对象都有一个原型对象__proto__3.由同一个函数创建的对象他们的__proto__共用一个内存 所以相等函数原型对象prototye由下面的代码可以看出:1.每一个函数创建时 都会有一个原型对象prototype被创建2.每一个函数创建的对象 他的__proto__对象中的值引用自原函数的prototype原型对象prototype添加元素方法:fn.prototype.age=23 在fn的prototype中添加
2022-06-30 16:24:29
45
原创 关于作用域的案例和字符串与数字加减
对象中的方法运行:现将要打印的值赋值给一个变量fn再打印运行时为undefined;直接点语法运行方法并打印可得到结果;直接打印getCount()时会报错;对于两个参数的函数 分别传参的情况:var a=fun(0)a.fun(1)a.fun(2)这样的传参运行方式为独立作用域运行 fun(1)和fun(2)都是接着fun(0)运行下面的运行方式为同一作用域都是接着上一个的运行结果运行var b = fun(0).fun(1).fun(2).fun(3)关于回调函数的案例:分别传入三个参数
2022-06-30 14:55:14
104
空空如也
前端，Vue，rtsp视频
2022-12-16
TA创建的收藏夹 TA关注的收藏夹
TA关注的人