- 博客(147)
- 收藏
- 关注
原创 Vue(12)——路由的基本使用
作用:修改地址栏路径时,切换显示匹配的组件基本步骤(固定)发现了#/表示当前的Vue实例已经被路由所管理。完成前面固定的五个步骤,还剩下两个核心步骤新建一个名为views的文件夹,创建了三个我需要的组件接下来在main.js文件中配置规则第二步配置路由出口,找到app.vue。
2024-09-17 16:48:50 321
原创 Vue(11)——插槽
作用:让组件内部的一些结构支持自定义插槽基本语法:组件内需要定制的结构部分,改用<slot></slot>占位使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot。
2024-09-17 12:51:34 160
原创 Vue(10)——自定义指令
我是内容</div>通过binding.value可以拿到指令值指令值修改会触发update函数color:{},<template><div><h1 v-color="color1">自定义指令</h1><h1 v-color="color2">自定义指令</h1>color:{},},data(){return{
2024-09-11 23:43:18 406
原创 Vue(9)——.sync修饰符、ref和$refs、$nextTick
作用:可以实现子组件与父组件数据的双向绑定,简化代码。特点:prop属性名,可以自定义,非固定位value场景:封装弹框类的基础组件,visible属性true显示,false隐藏本质:就是 :属性名和@update:属性名合写。
2024-09-11 16:59:30 563
原创 Vue(8)——v-model原理
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value和input事件的合写。作用:提供数据的双向绑定。区别是v-model是双向绑定,数据和视图都会随之改变。而为视图随着数据变,视图改变不影响数据。这是需要input让数据随视图改变。$event用于在模版上,获取事件的形参。
2024-09-10 23:45:57 334
原创 Vue(7)——工程化开发
每次创建新的组件实例,都会执行一次data函数,得到一个对象。在src文件夹下创建components文件夹放入组件,组件命名需遵循大驼峰命名法,否则会报错。组件化开发:一个页面可以拆分一个个组件,每个组件有自己独立的结构,样式,行为。组件通信指组件之间的数据传递。组件的数据时独立的,无法直接访问其他组件的数据。作用: 为组件的prop指定验证要求,不符合要求,控制台就会有错误提示。全局样式(默认):会影响所有的组件,很容易造成多个组件之间的问题。data函数执行了3次,每个组件实例,维护独立的对象。
2024-09-10 22:46:23 1231
原创 Vue(2)——Vue指令
v-if='表达式' true为显示,false为隐藏 渲染隐藏。作用:给列表项添加的唯一标识。语法:v-bind:属性名="表达式"(src,title)v-show='表达式' true为显示,false为隐藏。v-for="(item,index) in 数组"原理:基于条件判断,是否创建或移除元素节点。实现点击+号数字加1,点击-号数字减1。简写:v-bind:src可以简写成。语法:key属性 = "唯一标识"作用:动态的设置html的标签属性。语法:v-model = '变量'
2024-08-26 23:26:56 675
原创 AJAX(4)——XMLHttpRequest
定义:XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用于操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用关系:axios内部采用XMLHttpRequest与服务器交互使用XMLHttpRequest。
2024-08-24 21:59:22 519
原创 JavaScript(30)——解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法还可以交换两个值:必须使用let,且声明时要带分号可以按需导入赋值。
2024-08-22 22:41:39 309
原创 JavaScript(28)——正则表达式
定义正则表达式语法:const 变量名 = /表达式/判断是否有符合规则的字符串:test()方法 用来查看正则表达式与指定的字符串是否匹配语法:regObj.test(被检测的字符串) //返回布尔值regObj.exec(字符串) //返回的是数组。
2024-08-21 20:34:38 492
原创 JavaScript(27)——本地存储、数组map和join
为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了解决方案。
2024-08-21 16:29:35 358
原创 JavaScript(26)——location、navigator、histroy
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分常用属性:herf属性获取完整的URL地址,可以对其赋值用于地址的跳转hash属性获取地址中的哈希值,符号#后面的部分search属性获取地址中携带的参数,符号?后面的部分reload方法用来刷新当前页面,传入参数true时表示强制刷新。
2024-08-21 13:06:49 278
原创 JavaScript(22)——页面尺寸事件
document.documentElement.clientHeight 高。document.documentElement.clientWidth 宽。包含边框(只读):获取的是自己定位的父级元素的左上距离。
2024-08-20 17:13:48 214
原创 JavaScript(21)——页面加载和页面滚动事件
有时候需要等页面资源全部处理完之后做一些事情。页面加载事件就是加载外部资源(如图片,外联CSS和JavaScript)加载完毕时触发的事件由于代码是从上往下执行,所以点击按钮并不会触发弹窗。事件名:load注:不光可以监听整个页面加载完毕,也可以针对某个资源绑定load事件。事件名:DOMContentLoaded//执行的操作})
2024-08-20 16:50:10 328
原创 Node.js(9)——托管静态资源
通过express.static(),我们可以非常方便的创建一个静态资源服务器,例如,通过以下代码就可以将sql目录下的图片、css、JavaScript文件对外开放访问了。注意:Express在指定的静态目录中查找文件,并对外提供资源的访问路径。存放静态文件的目录名不会出现在URL中。
2024-08-05 21:52:58 263
原创 Node.js(8)——Express的基本使用
通过app.get()方法,可以监听客户端GET请求,具体语法:app.get('请求URL',function(req,res){处理函数})语法:app.post('请求URL',function(req,res){处理函数})
2024-08-05 14:34:07 484
原创 Node.js(7)——Express
express是基于Node.js平台,快速、开放、极简的Web开发框架。本质就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。什么是express?
2024-08-04 23:42:30 425
原创 Node.js(6)——npm软件包管理
npm是Node.js标准的软件包管理器。示例:初始状态下npm文件夹下只有server.js,下载软件包前看是否有package.json项目清单这个文件。没有就在集成终端运行npm init -y,自动生成。接着在下载软件包时npm i dayjs 出现错误。
2024-08-03 01:01:42 510
原创 Node.js(5)——包
将lib下的arr.js和str.js两个函数工具包导入index.js集中起来,在向外导出,并在server使用。注意:导入软件包时,引入的默认是index.js模块文件/main属性指定的模块文件。要求:根目录中,必须有package.json文件(记录包的清单信息)包的概念:将模块,代码,其他资料聚合成一个文件夹。项目包:主要用于编写项目和业务逻辑。软件包:封装根据和方法进行使用。
2024-08-02 14:17:18 691
原创 Node.js(4)——模块化
什么是模块化?ComminJS模块是为Node.js打包JavaScript代码的原始方式。Node.js还支持浏览器和其他JavaScript运行时使用的ECMAScript标准。在Node.js中,每个文件都被视为一个单独的模块。
2024-08-02 13:21:35 441
原创 Node.js(2)——压缩前端html
需求:把回车符(\r)和换行符(\n)去掉后,写入到新的html文件中。最后写入到其他html文件。观察到换行符已经去掉。此时已经写入到新的文件中。
2024-08-01 16:54:27 479
原创 Node.js(1)——fs模块和path模块
模块:类似插件,封装了方法/属性fs模块:封装了与本机文件系统进行交互的方法/属性语法:const fs = require('fs') //加载fs模块对象fs.writeFile('文件路径','写入内容',err =>{//写入后的回调函数})fs.readFile('文件路径',(err,data) => {//读取后的回调函数//data是文件内容的Buffer数据流})但是读的结果怎么不对,原因是只需在读取时转换为字符串类型(data.toString())
2024-08-01 16:29:07 327
原创 JavaScript(20)——事件委托
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素上,从而触发父元素事件。事件委托是利用事件流的特征解决一些开发需求的知识技巧。真正触发的元素:e.target.tagName。优点:减少注册次数,提高程序性能。原理:利用事件冒泡的特点。
2024-07-30 22:53:07 290
原创 JavaScript(18)——事件类型,事件对象
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置。offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置。事件对象也是对象,这个对象包含事件触发时的关键信息。就是事件对象,一般命名为event。mouseenter:鼠标经过。mouseleave:鼠标离开。Keydown:键盘按下触发。type:获取当前的时间类型。input:用户输入事件。Keyup:键盘抬起触发。在事件绑定的的回调函数的。key:用户按下键盘的值。click:鼠标点击。focus:获得焦点。
2024-07-29 23:53:03 258
原创 AJAX(3)——请求方法
语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参。method:请求的方法,GET可以省略(不区分大小写)HTTP协议:规定了浏览器发送及服务器返回内容的。HTTP响应状态码:用来表明请求是否成功完成。请求报文:浏览器按照HTTP协议要求的。请求方法:对服务器资源,要执行的操作。//对服务器返回的数据做后续处理。method:'请求方法'url:'目标资源地址'服务器按照HTTP协议要求的。当数据需要在服务器上保存。URL:请求的URL网址。
2024-07-28 23:53:53 266
原创 AJAX(2)——URL
什么是URL?,缩写:URL,或称,俗称网页地址,简称网址,是因特网上标准的资源的地址。概念:URL就是统一资源定位符。简称网址,用于访问网络上的资源。组成:协议+域名+资源路径http协议:超文本传输协议,规定浏览器和服务器之间传输数据的域名:标记服务器在互联网中的方位资源路径:标记资源在服务器下的具体位置。
2024-07-28 17:59:43 406
原创 AJAX(1)——axios库的使用
AJAX是异步的JavaScript和XML。简单来说,就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它。传入配置对象,再用.then回调函数接收结果,并做后续处理。概念:AJAX是浏览器与服务器进行数据通信的技术。页面的情况下与服务器通信,交换数据或更新页面。先使用axios库,与服务器进行数据通信。url:'目标资源地址'的特性,也就是说它可以在。
2024-07-27 23:50:25 257
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人