- 博客(33)
- 收藏
- 关注
原创 vue的一、二级路由、路由导航、路由模式、404、
路由通过路由就可以让我们的vue项目完成 页面之间的跳转 同时展示多个页面路由—可以实现SPA(单页面应用)只有一个html页面的应用 模拟多个页面的跳转传统项目 如果想完成多个页面 那么就要几个页面 新建几个html页面 这样是没有问题 只是在页面切换的时候 会有白屏效果 用户体验不好为了解决上述的问题 所以 使用单页面应用技术 就可以很好的解决页面切换的白屏问题单页面技术就是只有一个html页面 在我们切换页面的时候 html不变 变得是html’中渲染的内容路由的原理
2022-05-22 03:30:00 3603 1
原创 vue的逆向传值、 同胞传值、 跨组件传值、 slot 插槽
逆向传值–自定义事件子组件 把数据传递到父组件之上逆向传值 默认是不被允许的 我们需要借助一些其他知识来完成逆向传值(自定义事件辅助)1.必须在子组件中通过事件来触发<template> <div> zizizzizi <!-- 1.通过事件触发一个函数来完成逆向传值 --> <button v-on:click="fun()">点我进行逆向传值么么哒!!</button> </div&g
2022-05-21 09:38:03 1333
原创 vue的----生命周期、数据交互、模拟数据、组件
请您介绍一下生命周期的每个钩子?(说一下实例创建的流程和原理)实例创建实例创建之前—beforeCreate数据的观测与事件的初始化,属性的创建 还没有进行实力创建之后–created在此时vue实例已经创建完毕所以数据的观测属性方法等内容都已创建完毕 (el属性还没有挂载)模板渲染模板渲染之前-----beforeMount在页面挂载前调用,所以在此阶段页面并没有渲染与模板的编译,程序在此时会把数据绑定到页面上 但是页面并没有显示模板渲染完成----mounted 页面已将渲染出来了h
2022-04-16 23:39:03 544
原创 vue--watch监听器、修饰符、计算属性、自定义指令、生命周期
一、watch监听器watch是vue实例的一个属性 主要作用是监听data中的数据 当data中的数据改变的时候 watch就会触发语法: 写在el data methods 的同级watch:{ 你要监听的数据(newval,oldval){ 你要完成的逻辑 }}二、创建脚手架1.在全局下载vue脚手架(除非你重装系统了 或者重装node了)否则不需要再次下载npm install -g @vue/cli@42.查看版本vue --version3.把cmd
2022-04-14 20:57:47 2171
原创 vue 的定义、指令、双向绑定的原理、vue全家桶
框架框架:与业务无关的代码快,但是封装了很多方法方便与我们进行项目开发框架的分类:js框架和 ui框架js框架:里面封装了很多代码模块(功能)ui框架:帮助我们快速的创建页面HTML属性:就是写在开标签中,并且 属性='属性值‘ 通过属性可以扩展html标签的功能 src=“2367”vue是什么?vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架渐进式:只会对自己影响的范围内生效 ,可以很好的和第三方框架进行整合自底向上增量开发 先完成页面的开发 然后再完成向上
2022-04-14 18:06:50 658
原创 Git版本控制工具命令大全
git使用的命令git clone 远程仓库到本地git init -y 初始化仓库git status 查看仓库状态git add (./ -A/文件夹名字) 把开发的代码放在本地版本库/缓冲区(形成了版本)git commit -am “注释” 将缓冲区的内容提交版本库git push “远程仓库的地址” 将本地库中的文件提交到版库git pull -u “远程仓库的地址” 将远程库中的文件拉取到本地库如果有冲突解决冲突 在提交git reflo
2022-04-14 11:54:05 300
原创 gulp AND suss
一、gulpgulp工程化的工作:复制/编译/压缩/合并/即时刷新/如果使用原始的开发方式完成前端的开发,会导致的问题: 1)、代码暴露 2)、性能问题 3)、兼容性问题 4)、没法完成模块化3. 工程化的作用* 前端工程化就是为了让前端开发能够“自成体系”。而不是后端的附属品。分别从模块化、组件化、规范化、自动化着手。从设计—》到开发—》到编译打包----》到上线。如: 1)、为了解决代码暴露,性能问
2022-04-14 11:33:42 320
原创 nodejs学习--npm、COMMONJS模块化规范
nodeJS一、nodeJS的介绍NodeJS不但自己可以完成服务器软件的功能,也不再需要php,asp,jsp等传统的服务器语言nodeJS可以解析JS代码,而没有浏览器安全级别的限制,因为,它的运行可以脱离浏览器的环境,而是在服务端运行;提供了很多系统级别的API,如:文件的读写进程的管理网络通信NodeJS的包管理器npm,成为世界上最大的开放源代码的生态系统。二、环境搭建1、下载:进入nodeJS官网(https://nodejs.org/en/),中文官网(http://n
2022-04-14 11:21:22 487
原创 什么是观察者模式?
一、观察者模式概念和场景观察者模式又叫发布者订阅者模式,它定义了一对多的关系,让多个观察者对象同时监听某一个主体对象,这个主体对象发生变化时就会通知所有的观察者对象,使得他们能够自己更新自己如:你订阅游戏主播,当主播开播的时候他就会给你推送开播消息;使用观察者模式的好处:1.1支持简单的广播通信,自动通知所有已订阅的对象。1.2页面载入后目标元素容易和观察者者存在一种动态关联,增加了灵活性。1.3目标对象与观察者之间的抽象耦合关系能够单独扩展及运用。2、观察者模式代码: window.
2022-03-24 15:12:34 2454
原创 webstorage和ES6的模块化
一、webstoragewebstorage是html新增的存储数据的方案,比使用cookie更直观,它提供了访问特定域名下的会话存储或本地存储的功能,如果是会话存储,则使用sessionStorage,如果是本地存储(硬盘),则使用localStorage。sessionStorage和localStorage的官方函数一样。注意:这不是JavaScript语言本身的特性,是BOM的东西。window.localStorage和window.sessionStorage。1.1 存储数据:loca
2022-03-24 14:48:12 219
原创 闭包、继承的四种方式、原型、bind,call和apply的区别、函数的三种定义方式
一、闭包官方解释:一个函数和对其周围状态的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包。闭包就函数内部的函数,可以在内部函数访问外部函数的作用域;在js中,每当创建一个函数,闭包就会在函数创建的同时创建出来。通俗的来说:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。闭包的作用a.可以读取函数内部的变量b.让这些变量的值始终保持在内存中通常,函数的作用域及其所有变量都会在函数执行
2022-03-22 23:41:44 320
原创 jsonp和promise
一、jsop跨域访问跨域访问就是跨域名访问,即A网站的网页在代码上访问b网站的后端代码,由于同源策略,所以ajax不能跨域访问。同源策略:同源指的是:协议、端口、地址 都相同;同源策略:就是javaScript或者cookie只能访问同源下的内容,这就是浏览器的安全机制跨域访问的几种方式:由于ajax不支持跨域访问,为了解决跨域访问,出现了:Jsonp,iframe,flash,xhr2,常用jsop;jsop跨域JSONP(JSON with Padding)可用于解决主流浏览器的跨域
2022-03-20 11:13:58 334
原创 http是什么
一、httpHTTP:超文本传输协议,是一个请求响应的协议,是无状态的协议。指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。规定了请求和响应过程中的约定。请求:请求报文的内容包括三部分:请求行,请求头,请求体,(里面放的是信息)响应:响应报文的内容包括三部分:响应行,响应头,响应体,(里面放的是信息)2.1 常见状态码:200 ok 响应成功400:客户端请求有语法错误401:请求未经授权报头域一起使用**403 Forbidden //服务器收到请求,但是拒绝提供服
2022-03-18 10:11:09 13382
原创 同步与异步得区别
一、同步与异步同步就是按顺序依次执行代码块(洗菜-切菜-炒菜)异步:同时执行,也叫并发。(烧水-切菜-听音乐)二、AJAX1,ajax:AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术 前端通过与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。2. ajax的优势3. 用户体验好,快。可以在不中断操作的时候与web服务器进行通信通过局部更新页面降低网络流量,提高网络的使用效率4. ajax的核心:xmlHttpRequest,和服务器交互主要依赖该对象。
2022-03-18 09:09:24 562
原创 数据库简单了解
一、数据得概念1.数据路得概念:数据库是按照数据结构来组织、存储和管理数据得仓库;2.表:一个仓库被分为几块;3.字段:表里面得内容每个字段的数据类型:如:int ----> 整数varchar ----->(可变长度)字符串 char ---->(不可变长度)字符串 blob -----> 二进制数据 date -----> 日期...
2022-03-18 08:18:02 820
原创 简单认识php
一、php介绍php是服务器端语言优点:1跨平台,支持多种数据库2安全性和效率好3成本低缺点:安装比较复杂服务端得语言还有JSp ,ASP,python,nodeJs,go.php全称:personal home page;phpStudy:是搭建服务器得工具搭建好服务器可以把php文件放在服务器文件里面2.扩展名 .php <?php 代码块?> php代码以封号结束 echo==document.write 可以解析HTML标签访问服务器得三种方式
2022-03-12 17:25:39 1599
原创 this指向的方向
this:一、this是代名词,代表谁需要看场景,在js中,this的场景就是函数。二、this的四种情况当this所在函数是时间处理函数时,this代表事件源当this所在函数是构造函数,this代表new出来的对象当this所在函数是对象或者实例的方法是,this代表调用改方法的对象;当this不属于以上情况时,this一般表示windows对象...
2022-03-08 14:34:46 67
原创 啥是面向对象
一、面向对象面向对象是一种编程思想,最基本的数据单位是对象,而不是基本类型。特点:封装 继承 多态化封装:把一堆相关的数据封装到一起形成一个有机的类;继承:子类自动拥有父类的所有属性和方法,继承是程序复用性的体现。多态:解决同一个问题有不同的方法。类:是复杂的数据类型,包括了很多数据类型。对象:对象是类的举例说明二、普通函数和构造函数的区别函数名的首字母大写构造函数通过new用算符调用的构造函数内部,在预编译时会增加var this=new Object()构造函数没有返回
2022-03-07 14:36:31 1520
原创 ES6新语法
一、letlet 用来定义变量得关键字let 标识符a。块级作用域:只能在该块去使用,且变量在该块不会被丢失b.暂时性死区:当内部变量与外部变量同名时,内部变量屏蔽外部变量3.同级作用域不能重复定义变量4.不能变量提升二、const用来定义一个常量(const)后面得常量必须有值(初始化)块级作用域暂时性死区没有变量提升不能重复定义三、thisthis是函数体内得内置函数当this出现在事件体内,this代表触发该事件得DOM元素3.当this与普通方法(除了事
2022-03-03 15:07:25 307
原创 正则Api
一、 正则表达式(regular expression)是一个描述字符规则的对象。如:只能出现字母,只能出现数字,前三个必须是数字等。构造方法var reg=new RegExp(“a”,“i”);console.log(reg.test(“1”))字面量var reg=/a/;正则中的特殊符号^:正则开始$:正则结束. : 元字符, 表示任意一个字符. : 表示转义字符 .表示.+: 表示其前面紧挨着的字符至少出现1次 等价{1,}* :表示其前面出现的
2022-03-02 15:40:07 600
原创 事件绑定的方法
一、事件绑定的方法有两种通过Html直接绑定通过js对象绑定缺陷:无法为相同的元素绑定相同的事件无法决定事流的传递方向通过事件监听的方法可以解决以上两种问题目标元素.addEventLister(“去掉on的事件名”,回调函数【是否捕获】)注意:捕获和冒泡同时发生是,先捕获后冒泡监听取消事件的方式var fun = function() {console.log(“嘿嘿嘿”);}document.addEventListener(“click”, fun);document.re
2022-03-01 14:52:13 1578
原创 事件的三要素
一、事件三要素目标元素:操作那个dom元素事件类型:on开头的各种类型事件事件对象:包含了事件类型操作的属性和方法注意:事件对象的产生一定要有事件兼容方法:var =evt||event鼠标事件对象page 整个页面的高度,宽度不变 常用client 能看的见的位置坐标 不常用offset 以父元素为圆心 常用于托拽...
2022-02-28 14:34:59 3859
原创 this 你知道嘛
一、this与事件连用代表触发事件的dom元素childNodes:返回子元素的数组,存储的是文本和元素节点children:返回子元素的数组,存储的是元素节点outerHTML 将自身以及子元素所有的内容都获取出来,包括Html标签和自身innerText 输出元素的文本内容innerHTML 输出标签间的所有内容二、setAttribute/getAttribute自定义属性OBx.wan=“buc” wan是创建的属性...
2022-02-25 20:30:06 327
原创 【无标题】BOM and Dom
一、BomBOM属于浏览器对象模型window 分为document history location event navigator screenwindow.document.write(“nihao”);所有的属性和方法都是有前缀的凡是前缀是window的属性和方法可以省略弹出框具备阻塞行为,后续代码不会执行alret() console.log() prompt() confirm()settimeout:返回值为关闭定时器的钥匙wndow.onload 延迟加载
2022-02-24 17:21:43 364
原创 forEach循环语句
一、forEachforEach功能:遍历整个数组元素,执行某种功能操作。参数:forEach(回调函数);fun(元素的数值,[元素的下标],[数组名]){函数体}返回值:无2. map功能:遍历整个数组元素,执行某种功能操作。参数:forEach(回调函数);fun(元素的数值,[元素的下标],[数组名]){函数体return}返回值:返回i一个新数组3. filter :过滤调不要的新数组fun(元素的数值,[元素的下标],[数组名]){函数体按条件 retur
2022-02-23 19:37:39 905
原创 选择排序 代码
一、选择排序选择相当于排序,他会把下标为0的数值,和其他元素进行比较,找到符合条件的进行交换。 var arr=[ 2,1,3,6,5,9,4,8,7] var t; var k=0; for(var i=0;i<arr.length-1;i++){ k=i; for( var j=i+1;j<arr.length;j++){ if(arr[k])>arr[j]{k=j;}}t=arr[i
2022-02-22 16:47:51 292
原创 数组加冒泡排序
一、数组(栈空间和堆空间)数组的构造方法赋值eg:var arr=new Array(1,2,3,4);new是在对空间开辟的关键字通过new按照array的类型开辟一个空间内置基本类型和引用类型存储数据的区别:a.内置基本类型只有一块栈空间用来存储数据b.引用类型有两块空间,一快是栈空间,一块的堆空间。栈空间用来存储地址,堆空间用来存储内容;2.字面量方法赋值var arr=[1,2,3,4,5];二、数组:相当于集合 一个变量可以存储多个数据, 1. 数组元素的访问
2022-02-21 17:53:13 99
原创 作用域(六)
一、封装闰年function fun(y){if((y%40&&y%100!=0)||y%4000){return true;}else{return false;}} //只告诉结果让用户做 选择var flag= fun(2022);if(flag){consol.log(“run”)}else{console.log(“ping”)}二、函数的嵌套调用function f1(){ //主调函数f2(); //被调函数console.log(
2022-02-18 12:05:35 232
原创 九九乘法表
一、循环嵌套(九九乘法表代码)for(var j=1;j<=9;j++){ //循环的是行数for( var i=1; i<=j; i++){ //循环的是每行的个数document.write(i+““+j+"="+ji+“ ”)}documen.write("")}二、break、continuebreak跳出本层循环,不在执行后面的代码var sum=0;for(var i=0;i<5;i++){if(i==3){break;}sum+=i;
2022-02-17 13:52:30 272
原创 闰年怎么算呢
一、闰年算法口诀:四年一润&&百年不润||四百年在润var year=2022;if((year%40&&year%100!=0)||year%4000){console.log(“闰年”)}else{console.log(“平年”)}二、三目运算符a>b?a:ba=2 b=3 c=4如果2>3成立 输出2,否则输出3.结果就是3如果是三个数比较,用一个中间变量d ,先a和b进行比较,得出结果d,d和c 在进行比较eg:
2022-02-16 13:33:21 1306
原创 运算符和断点调试
一、关系运算符包括 > .>=. <. <= == != ======严格等:类型与数值都相等 == 等于会尝试进行类型转换二、逻辑运算符包括&& || !个人理解&&有一项不符合就会返回false|| 有一项符合条件就会返回true!取反短路与:当首次遇到失败的条件时,后面的与表达式就不再计算了i=-4;k = -5 > i && ++i < -3;短路或:当首
2022-02-15 14:30:56 130
原创 js基础知识点
javascript 笔记一.认识js初始js:js代码必须写在script标签里面内容展示方式document.write(“hello world”)(将小括号的内容展示在大白板)console.log(“你好”) (将小括号的内容展示在后台,自带换行)script 标签可以直接在html 后面引入,也可以通过 src引入 eg: (1)代码执行的顺序是自上而下的(2)代码语句:表达式加分号 eg: console.log(2);(3)一个页面可以出现多对sciscript标
2022-02-14 16:11:17 57
原创 静态页面笔记包括 html和css
HTML/CSS 笔记一.html 简单介绍html 意思是超文本标记语言超文本:可以点击且跳转的文字或 图片 ; 标记语言:描述网页的一种语言网页组成部分:结构 html 样式 css 行为 javascriptxhtml:可扩展性的标记语言,xhtml和html的区别(1) html语言,标签名可以大写,也可以小写,但是xhtml只能小写(2) html单标签,结束可以不加/ xhtml语言必须要加 / (3) html属性值可以单引号也可以双引号,xhtml必须
2022-02-14 14:45:29 571
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人