![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 56
96岁对抗java
喜欢上层框架原理、更喜欢底层原理的研究, 同样感兴趣的小伙伴有问题交流, 欢迎评论区或者私信进行讨论。
展开
-
container布局容器 [ElementUI]
使用el-container组件创建布局容器。原创 2022-07-18 08:18:51 · 1969 阅读 · 0 评论 -
Layout(栅格)布局组件的使用 [ElementUI]
在ElementUI中布局组件将页面划分为了多个行(row),每个行中最多有24栏(也就时24列)原创 2022-07-18 08:18:04 · 2016 阅读 · 1 评论 -
ElementUI文字链接组件的使用 [ElementUI]
type类型underline是否有下划线布尔值默认为true,也就是默认是有下划线的,和HTML中超链接是默认是一样的。原创 2022-07-18 08:17:08 · 2126 阅读 · 0 评论 -
按钮组件的使用 [ElementUI]
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bucRkww5-1658103335255)(C\Users\赚钱养敏敏\Pictures\n8v2rg8y2s(1)].png)在ElementUI中组建的属性都是使用直接将属性名=属性值方式写在对应的组件标签上的。在ElementUI中所有组件都是以"el-组件名"的形式进行命名的。eg(图解下图中我们就举例了两个按钮组)...原创 2022-07-18 08:16:05 · 1158 阅读 · 0 评论 -
ElementUI概述 [ElementUI]
在我们复制ElementUI组件库中的组件源码的时候我们会发现有一个&last-child,这个是一个伪类选择器。表格中的一列就是//设置Vue核心对象的挂载位置,这里就是表示挂载到我们的id属性为app的标签上。container布局容器用于布局的组件容器,方便快捷的搭建页面的基本内容。Layout布局通过组件的基础的24分栏,迅速简便的创建布局。引入Element的CSS和JS文件。...原创 2022-07-18 08:15:11 · 7053 阅读 · 0 评论 -
JSON概述
JSON经常在数据从服务器发送到网页中的时候使用。原创 2022-07-16 10:49:30 · 253 阅读 · 0 评论 -
Axios之请求,响应拦截器 [前后端交互][Axios框架]
我们给axios对象绑定请求拦截器之后,只要是使用axios发送请求的时候都会被请求拦截器先拦截。原创 2022-07-16 10:48:38 · 394 阅读 · 0 评论 -
Axios基本使用 [前后端交互][Axios框架]
Axios是Ajax的一个框架axios功能强大的网络请求库axios必须要先导入才可以使用axios为一个js库,使用前必须先导包。原创 2022-07-16 10:47:32 · 1118 阅读 · 0 评论 -
闭包 [前端][Vue框架]
代码】闭包[前端][Vue框架]原创 2022-07-16 10:43:16 · 431 阅读 · 0 评论 -
Vue中的ref获取DOM结点 [前端][Vue框架]
refs.ref属性值就相当于原生JS中的document.getElementById(),也就相当于JQuery中的选择器。原创 2022-07-16 10:42:21 · 771 阅读 · 0 评论 -
父组件中修改子组件属性时的问题 [前端][Vue框架]
nextTick()中的回调中来,this.$nextTick()中的回调是会在DOM元素更新之后自动调用的,这个时候我们DOM更新之后去获取对应的DOM元素就是正确的,那么我们修改对应的属性获取调用对应的方法肯定就是正确的**所以我们的解决办法就是将我们的获取子组件对应。这个时候打印出的结果就应该是一个。的方式获取到子组件对应的。元素之后进行一个打印。元素的操作放到我们的。...原创 2022-07-16 10:40:33 · 1116 阅读 · 0 评论 -
路由导航守卫 [前端][Vue框架]
②在beforeRouteEnter守卫的回调函数中不能获取组件实例,,也就是在beforeRouterEnter守卫回调函数中不能使用this获取到vue实例。next是拦截对象,如果调用next()则会正常跳转到to.path所指的路径中(也就是条跳转到to所指的页面中)③next({path页面path})和②其实是一样的,可以说②就是③的一种简化书写方式。①next(false)表示不跳转页面,与不调用next的功能是一致的。to代表的是跳转的目标页面。...原创 2022-07-16 10:30:13 · 290 阅读 · 0 评论 -
Vue中的this.$nextTick方法的使用 [前端][Vue框架]
所以如果我们要在Dom渲染后的时机去做一些事,我们就需要使用到this.$nextTick(callback)原创 2022-07-16 10:29:13 · 416 阅读 · 0 评论 -
JavaWeb技术栈中要学习的技术汇总 [JavaWeb]
mysql , jdbc , maven , mybatisHTML , CSS , JavaScript , Ajax , Vue , ElementUITomcat , HTTP , ServletRequest , ResponseJSPCookie , SessionFilter , Listener原创 2022-06-06 23:59:18 · 272 阅读 · 0 评论 -
Web核心介绍以及HTTP简介 [JavaWeb][HTTP]
易于维护升级 , 服务器端升级后 , 客户端无需任何布置就可以使用到新的版本负责存储数据定义通信规则负责解析HTTP协议 , 解析请求数据 , 并发送响应数据HyperTextTransferProtocol , 超文本传输协议 ,规定了浏览器和服务器之间的数据传输的规则多次请求之间不能共享数据 —> 这个就是因为HTTP协议是无状态的协议 , 对于事务处理没有记忆能力,每次请求都是独立的速度快我们的HTTP请求数据肯定是浏览器向服务器端请求,然后我们的服务器将对应的浏览器请求的数据以HTTP响应数据格式响原创 2022-06-06 23:58:02 · 118 阅读 · 1 评论 -
JavaWeb概述 [JavaWeb]
web : world wide web(www) , 即全球广域网 , 也称之为万维网Javaweb : 是用java技术解决web互联网领域的技术栈①我们肯定是从浏览器中访问我们的网页,当用户点击网页中的某个功能的按键的时候,就会发送请求到web服务器②我们通过web服务器去和我们的java程序交互 , 让我们的java程序去数据库中访问我们需要的数据 , 访问到之后并返回给Java程序中③我们的java程序在拿到了数据之后进行一个处理 , 处理完成后交给我们的界面程序(前端程序) , 让界面程序对应的原创 2022-06-06 23:56:48 · 196 阅读 · 0 评论 -
vue-cli项目结构 [web前端][Vue框架]
hello ----> 项目名 —build —config —> 配置文件 —node_modules —> 项目依赖的组件, 之后下载的一些其他组件也是在此目录中, 由npm进行管理, 从远程仓库中下载 —src —> 用于书写vue的源代码[重点] —assets —> 用来存放静态资源[重点] —components —> 用来书写vue组件[重点] —router —> 用来配置项目中的路由[重点] —App.vue —>原创 2022-06-06 23:54:50 · 106 阅读 · 0 评论 -
Vue-cli概述 [Web前端][Vue框架]
vue-cli是官方提供的一个vue脚手架, 用于快速生成一个vue的项目模板vue-cli中的宗旨就是: “一切皆组件”原创 2022-06-06 23:53:58 · 149 阅读 · 0 评论 -
嵌套路由的使用 [web前端][Vue框架]
补充:嵌套路由就是通过向一个路由对象的routes属性中的对象中的children属性中再写一个对象而实现的, 这个对象就可routes属性中的数组中的对象是一样的, 这个对象我们就称之为外层路由的子路由...原创 2022-06-06 23:52:41 · 361 阅读 · 0 评论 -
路由传递参数的两种方式 [web前端][Vue框架]
前面的时候我们经常会看到导航栏中的输入地址后面加了一个? , 后面就是一些参数, 那么这里我们就来讲解我们如果通过路由来传递参数小结:我们的组件和Vue一样都是有声明周期的, 那么也就有相应的声明周期钩子函数, 我们在组件中created声明周期钩子函数中可以获取到路由传递过来的参数...原创 2022-06-06 23:50:47 · 690 阅读 · 0 评论 -
router-link和默认路由的使用[web前端][vue框架]
用来替换我们在切换路由时使用a标签切换路由的方式就是可以自动给路由路径中加入#, 不需要我们手动加入小结:router-link标签使用的时候要在vue核心对象作用范围中, 而a标签使用的时候可以不用再vue核心对象作用范围内我们使用router-link标签的时候to属性中填写我们要访问的路由路径, 在to属性中填写的访问的路由路径前面不需要加#router-link标签中的tag属性用来设置最终我们的router-link标签会渲染为何种形式默认情况之下会渲染为a标签(也就是渲染为超链接)原创 2022-06-02 00:49:55 · 744 阅读 · 0 评论 -
路由的安装和使用[web前端][vue框架]
小结:一旦我们引入路由js文件之后, 我们就可以创建VueRouter对象了(也就是创建路由对象)我们通过在Vue核心兑现中的router属性中指明属性值为路由对象名来注册路由注意: 对于路由对象名和组件对象名作为属性值的时候都不加""(双引号) – 目前是这样的我们的VueRouter路由对象中有一个routes属性, 这个routes属性是一个数组类型的, 在这个数组中我们要放入一个个的对象, 放入的对象的path属性用来配置路由的路径, 对象的component属性用来绑定对应的组件(原创 2022-06-02 00:49:06 · 147 阅读 · 0 评论 -
在子组件中传递事件并在子组件中调用该事件[web前端][vue框架]
小结:我们在login组件中的template中的html代码中给其中的按钮添加了一个点击事件, 一点点击这个按钮之后就会执行login子组件中的change1()方法在change1()方法中我们又通过this.$emit(“事件名”)来让这个组件触发了对应的事件我们的emit(“事件名”)就是用来触发对应的事件的一个方法, 我们的this在当前的场景中就是子组件, 所以就是使用子组件触发对应的事件我们将对应执行的事件和我们的Vue中的事件方法相互绑定, 那么一点组件触发了该事件之后就会执原创 2022-06-02 00:48:14 · 215 阅读 · 0 评论 -
组件中定义数据和事件的基本使用[web前端][vue框架]
小结:在组件中使用data函数方式定义组件的数据, 在template中的html代码中通过使用插值表达式就可以取出对应的数据小结:组件中定义事件和直接在Vue中定义事件基本一致, 直接在组件内部对应的template中的html代码上加入@事件名 = 函数名方式即可我们在Vue核心对象中是将事件定义在了HTML标签的@事件名属性( @事件名就相当于v-on:事件名 )中,然后将触发时间之后的方法定义到Vue核心对象的methods属性中注意: 对于组件对象内部对应的template属性原创 2022-06-02 00:46:58 · 119 阅读 · 0 评论 -
组件中props属性的使用[web前端][vue框架]
小结:使用组件时可以在组件上定义多个属性以及对应数据在组件的内部可以使用props属性声明多个定义在组件上的属性, 之后可以在组件中通过{{属性名}}方式获取组件中的属性值这里有一个关于prop大小写的问题: (camelCase VS kebab-case)HTML中的attribute(属性名)是大小写不敏感的, 所以浏览器会把所有大写字符解释为小写字符, 这意味着当你使用DOM中的模板时camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名e原创 2022-06-02 00:45:38 · 1784 阅读 · 0 评论 -
Vue组件 [vue框架][web前端]
Vue组件组件作用:用来减少Vue实例对象中代码量, 日后在使用Vue开发过程中, 可以根据不同的业务功能将页面中划分不同的多个组件, 然后由多个组件去完成整个页面的布局, 便于日后使用vue进行开发时页面管理, 方便开发人员维护组件使用:(一)全局组件注册:说明: 全局组件注册给vue实例, 之后可以在任意vue实例的使用范围内使用该组件<!DOCTYPE html><html> <head> <meta charset="utf-8"&g原创 2022-05-29 18:05:22 · 204 阅读 · 0 评论 -
el挂载点[vue框架][web前端]
el挂载点(Vue简单基础)el是用来设置Vue实例挂载(或者说是管理)的元素的Vue实例的作用范围是什么呐?Vue会管理el选中的元素以及其内部的后代元素如果我们在el命中的元素之外使用插值表达式尝试取出模型数据值的时候是取不出来数据的, 因为我们的Vue作用范围就是在其el命中当元素之中我们的el其实就是在设置我们Vue的作用范围, 我们的le选中的元素也就是我们的Vue的作用范围, 其实此时我们就可以说是已经是将我们的Vue绑定到了我们的此时的元素上, 我们此时在这个元素的标签体内部原创 2022-05-29 18:03:23 · 309 阅读 · 0 评论 -
Vue生命周期 [vue框架][web前端]
Vue生命周期生命周期的八个阶段, 每触发一个声明周期事件, 会自动执行一个生命周期方法(声明周期钩子函数)八个Vue生命周期状态:状态阶段(周期)beforeCreate创建前created创建后beforeMount载入前mounted载入后(挂载完成)beforeUpdate更新前update更新后beforeDestroy销毁前destroyed销毁后这里我们主要讲一个状态: 挂载完成(mounted)因为原创 2022-05-29 18:02:33 · 106 阅读 · 0 评论 -
Vue常用指令 [vue框架][web前端]
Vue常用指令Vue常用指令:指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义v-bind为HTML标签绑定属性值, 如设置href,css样式等eg:<body> <div id = "app"> <a v-bind:href = "url"></a> </div> <script src = "js/vue.js"> </script原创 2022-05-29 18:01:39 · 121 阅读 · 0 评论 -
Vue快速入门[vue框架][web前端]
Vue快速入门新建HTML页面, 引入vue.js文件<script src = "js/vue.js"></script>我们的文件在js文件夹下, 名为vue.js在JS代码区域,创建Vue核心对象,进行数据绑定new Vue({ el:"#app", data(){ return{ username:"" } }});这里我们就是new了一个Vue核心对象原创 2022-05-29 18:00:40 · 101 阅读 · 0 评论 -
Vue概述 [前端][Vue框架]
Vue概述Vue是一套前端框架,免除了原生javaScript中的DOM操作,简化了书写前端框架: 一套完整的解决方案前端组件: 针对某个方面进行的封装注意: 我们的前端框架和我们的前端组件并不是一个意思, 我们的前端框架的范围是要大于我们的前端组件的Vue基于MVVM(Model- view - viewmodel)的思想,实现数据的双向绑定,将变成的关注点放到了数据上我们以前的时候是MVC思想, 只能实现模型到视图的单向展示我们可以发现我们通过MVC的思想只能是实现模型影原创 2022-05-29 17:59:35 · 605 阅读 · 0 评论 -
事件[JavaScript][web前端]
事件(JavaScript)事件监听机制:概念 :某些组件被执行了某些操作之后触发某些代码事件: 某些操作. 如: 单机, 双击, 键盘按下, 鼠标移动事件源: 组件(也就是标签) 如: 按钮, 文本输入框监听器: 就是时间触发之后执行的代码(就是一个方法)注册监听: 将时间, 事件源, 监听器结合到一起, 当事件源触发了某个事件之后, 则触发某个监听器代码所以其实事件源是由我们的语言给定的, 语言中有哪些组件, 那么这些组件就是一个个的时间源, 具体的每个事件源可以触发哪些事件也由我们的原创 2022-05-29 17:56:56 · 113 阅读 · 0 评论 -
DOM概述 [JavaScript][web前端]
DOM概述功能: 控制HTML文档中的内容JS中认为网页中的每个标签都是一个对象, 对象中包含属性, CSS样式, 标签体中的内容JS中要操作标签, 那么首先就是获得网页中对应的标签对象(也就是获取对应的HTML文档中的一个个标签对应的对象) , JS提供了一个document对象 , 这个document对象就是表示当前的html文件, 也即是表示当前的文档流中的所有内容 —> 我们可以通过这个document对象获取所有的html文档流中的对象我们将这类html文档中的标签对象统称为:原创 2022-05-25 13:10:29 · 111 阅读 · 0 评论 -
History对象 [JavaScript][web前端]
History对象History对象是历史记录对象, 但是要注意: 这里指的是当前地址栏中的历史记录, 而不是整个浏览器的历史记录所以我们只是可以通过这个History对象回到当前窗口中访问过的上一个页面, 而不可以跳转到客户访问过的其他窗口中的网页我们之前已经说过了我们的BOM中最大的就是window对象 ,所以我们的其他BOM对象其实都是相对于当前窗口来讲的创建:(获取)window.history由于我们的window对象是全局对象, 所以可以省略, 也就是我们的window引原创 2022-05-25 13:09:36 · 210 阅读 · 0 评论 -
Location对象 [JavaScript][web前端]
Location对象Location对象就是我们的地址栏对象创建(获取对象)window.location我们的window是可以省略的, 所以我们可以直接调用location从而获取location对象方法:reload()重新加载当前文档(其实也就是刷新当前的页面) — > 浏览器的刷新按钮其实就是执行的这个功能属性:href设置或者返回完整的URL我们可以通过设置URL的操作让我们的浏览器跳转到对应的页面中...原创 2022-05-25 13:08:35 · 257 阅读 · 0 评论 -
window之定时器有关方法 [JavaScript][web前端]
window之定时器有关方法:与定时器有关的方法我们又称之为计时事件setTimeout()在指定的毫秒数之后调用函数这个方法有两个参数:函数毫秒值这个方法的返回值为定时器id — 这个定时器id用于取消定时器(也就是用于取消计时事件这个定时器id就是这个计时事件的唯一标识clearTimeout()取消setTimeout()方法的计时事件这个方法中要传入一个参数, 就是对应的定时器idsetInterval()按照指定的毫秒数周期调用函数或者JS脚本语原创 2022-05-25 13:07:38 · 183 阅读 · 0 评论 -
window之打开, 关闭窗口方法 [JavaScript][web前端]
window之打开,关闭窗口方法(JavaScript)window之打开,关闭方法:close()关闭浏览器窗口谁调用就关闭谁open()打开一个新的浏览器窗口返回新打开的window对象这个open()方法中可以向参数部分传入一个URL, 就可以跳转到指定URL的网页中eg:var newWindow = open(“http://www.baidu.com”);...原创 2022-05-25 13:06:30 · 267 阅读 · 0 评论 -
window对象之弹出方法 [JavaScript][web前端]
window对象之弹出方法(JavaScript)window: 窗口对象window对象不需要创建可以直接使用,也就是不需要使用window引用来调用, window对象调用方法的格式: window.方法名();但是注意: window引用可以省略, 也就是直接使用方法名即可也就是格式可以简化为: 方法名();方法:(与弹出有关的方法)alert()显示带有一段信息和一个确认按钮的警告框confirm()显示带有一段信息以及确认按钮和取消按钮的对话框, 如果用户原创 2022-05-20 01:14:40 · 232 阅读 · 0 评论 -
BOM概述 [JavaScript][web前端]
BOM概述(JavaScript)概念: Browser Object Model(浏览器对象模型) , 也就是将浏览器中的各个组成部分封装成对象组成:window窗口对象window对象是是最大的对象, 我们可以从window对象中通过属性获取所有的下面的几个对象, 窗口部分还包含了浏览器中的body部分, 也就是DOM对象部分因为body部分也就是文档部分, 文档部分比较重要, 所以将其单独划分为了一类, 也就时DOM对象Navigator浏览器对象Scree原创 2022-05-20 01:13:19 · 80 阅读 · 0 评论 -
Global对象 [JavaScript][web前端]
Global对象很多人都是不知道这个Global对象的,因为Global对象是一个全局对象,Global对象中封装的方法不需要对象引用就直接可以调用特点:全局对象,这个Global中封装的方法不需要对象直接可以调用格式: 方法名();方法:encodeURI()将字符串进行URI编码decodeURI()对URI编码进行一个解码,解码为一个对应实际内容的字符串encodeURIComponent将字符串进行URI编码此方法中可编码的字符要比encodeURI原创 2022-05-20 01:12:28 · 193 阅读 · 0 评论