Loading

摘要: 个人实践项目 HTML+CSS个人项目展示 项目地址 demo JavaScript个人项目展示 项目地址 demo 个人开源项目:Win10_LTSC_2021_FixPacks 项目地址 个人docker项目:jupyter_notebook_pro 项目地址 demo 密码:20010223 阅读全文
posted @ 2022-09-16 09:32 brokyz 阅读(88) 评论(0) 推荐(0) 编辑
摘要: Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/re 阅读全文
posted @ 2022-10-08 22:51 brokyz 阅读(49) 评论(0) 推荐(0) 编辑
摘要: 概述 在 Vue 中一个项目中往往需要被拆分成多个组件,但是每个组件之间都会有相互访问数据的需求。这时就涉及到组件之间的通讯了。 使用 props 进行组件间的通讯 父向子通讯 这里让 App 组件向 School 组件传入一组数据,使用 props 进行数据接收。 App.vue <templat 阅读全文
posted @ 2022-10-03 13:49 brokyz 阅读(75) 评论(0) 推荐(0) 编辑
摘要: Vue 路由 基本使用 安装 npm i vue-router@3 配置 在 src 目录下生成 router/index.js 用于存放 router 的配置。 router/index.js // 引入 vue-router import VueRouter from "vue-router" 阅读全文
posted @ 2022-10-03 13:31 brokyz 阅读(180) 评论(0) 推荐(0) 编辑
摘要: 概述 Vue 为我们优化了 CSS 动画在 Vue 中的使用,帮助我们在使用动画的时候更加的得心应手。 使用 CSS 动画完成 Vue 动画 <template> <div id="app"> <button @click="isShow = !isShow">进入/离开</button> <tra 阅读全文
posted @ 2022-10-03 13:29 brokyz 阅读(172) 评论(0) 推荐(0) 编辑
摘要: 概述 Vue 的插件就是一个 js 文件,里面允许我们完成一些特定的功能。 使用 创建一个插件 plugins.js export default { install(Vue) { // 全局过滤器 Vue.filter("mySlice", function (value) { return va 阅读全文
posted @ 2022-10-03 13:28 brokyz 阅读(131) 评论(0) 推荐(0) 编辑
摘要: 概述 在 Vue 中我们的很多组件的配置都会有共用的数据,方法,钩子等等,我们可以把这些共用的部分提取到一个 js 文件中,并导入到需要使用的组件中,通过 mixins 配置项进行使用。 我们需要创建一个 js 文件,名字随意,这里我们叫做 mixin.js export const mixin { 阅读全文
posted @ 2022-10-03 13:27 brokyz 阅读(316) 评论(0) 推荐(0) 编辑
摘要: Vue 插槽 概述 插槽就是组件内的一个预留区域,它允许使用者向组件内的预留区域来添加自己想要的内容。 比如我们已经写好了一个组件,然后以后可能会在指定区域插入广告,这时就可以先用插槽进行占位。如果使用者向插槽中传递广告时,这时广告才会显示出来。 插槽大概分为三种:默认插槽、具名插槽、作用域插槽。 阅读全文
posted @ 2022-10-03 13:25 brokyz 阅读(301) 评论(0) 推荐(0) 编辑
摘要: Vue 生命周期 概述 在使用 Vue 时,我们需要执行一些 JS 代码。比如我们需要在页面中添加一个定时器来固定间隔更新时间。这时我们可能会想到直接在,Vue 实例外书写 JS 代码。这种方法能完成操作,但是 Vue 并不建议这样写。Vue 建议尽量在 Vue 实例中完成所有的操作。这时我们就需要 阅读全文
posted @ 2022-10-03 13:24 brokyz 阅读(102) 评论(0) 推荐(0) 编辑
摘要: 非单文件组件(过渡) 非单文件组件就是指并非一个组件占用一个文件,而是一个人间中有多个组件。我们只将其作为学习的过度,实际开发中不适用这种方式。 demo: <body> <div id="app"> <h1>大哥</h1> <hr> <!-- 3. 使用组件 --> <xuexiao></xuex 阅读全文
posted @ 2022-10-03 13:23 brokyz 阅读(104) 评论(0) 推荐(0) 编辑
摘要: 概述 vue 中不不仅仅有官方提供的指令,用户还可以根据自己的需要进行自定义指令。 比如当我们需要一个常用的操作将文字改为蓝色,如果我们需要修改大量标签时,就可以使用自定义指令。免去修改每一个标签的麻烦。 私有自定义指令 我们可以在 directives 节点下声明私有自定义属性。 在自定义指令的函 阅读全文
posted @ 2022-10-03 13:21 brokyz 阅读(338) 评论(0) 推荐(0) 编辑
摘要: ref 概述 我们在使用 Vue 时,有时会需要拿到 DOM 元素进行操作。这时 Vue 不推荐我们进行使用原生 JS 获取 DOM 元素。而是为我们提供了 ref 方便我们去获取组件中的 DOM 元素。 使用 ref 在使用时,我们只要给标签加上 ref 属性并指定属性名,就可以在 Vue 中通过 阅读全文
posted @ 2022-10-03 13:19 brokyz 阅读(242) 评论(0) 推荐(0) 编辑
摘要: 概述 过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,示例代码如下: <p>{{ message | formatA | form 阅读全文
posted @ 2022-10-03 13:17 brokyz 阅读(62) 评论(0) 推荐(0) 编辑
摘要: 概述 watch 监听器允许开发者动态监视数据的变化,从而针对数据的变化做出特定的操作。 通俗的来理解可以理解为设定了一个函数,当指定的数据发生变化之后,vue 就会帮我们自动去触发这个函数,这就是 watch 监听器。 在 watch 监听器中,函数可以接收两个参数 newVal、oldVal。这 阅读全文
posted @ 2022-10-03 13:16 brokyz 阅读(550) 评论(0) 推荐(0) 编辑
摘要: props 概述 我们的组件进行展示数据时,里面并不是都是写死的。我们需要在使用组件时,向组件内部传值,并展现我们需要的值。 数组形式接收 props TestProps.vue <template> <div> <h2>name: {{name}}</h2> <h2>sex: {{sex}}</h 阅读全文
posted @ 2022-10-03 13:13 brokyz 阅读(312) 评论(0) 推荐(0) 编辑
摘要: 概述 计算属性指的是通过一系列运算之后,最终得到一个属性值。 间的的理解,当我们拥有一些数据时,我们需要将这些数据整合到一起,这时候计算属性就会完成这个操作,整合到一起的数据会变成实例的一个新属性值。当用户改变某个数据时,计算属性也会动态的调成整合后的数据。 这个动态计算出来的属性值可以被模板结构或 阅读全文
posted @ 2022-10-03 13:12 brokyz 阅读(627) 评论(0) 推荐(0) 编辑
摘要: 概述 指令是 vue 为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可分为如下 6 大类: 内容渲染指令。 属性绑定指令。 事件绑定指令。 双向绑定指令。 条件渲染指令。 列表渲染指令。 内容渲染指令 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容 阅读全文
posted @ 2022-10-03 13:10 brokyz 阅读(142) 评论(0) 推荐(0) 编辑
摘要: MVVM M:模型(Model):对应 data 中的数据。 V:视图(View):模板(页面)。 VM:试图模型(ViewModel):Vue实例对象。 一个简单 vue demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 阅读全文
posted @ 2022-10-03 13:09 brokyz 阅读(59) 评论(0) 推荐(0) 编辑
摘要: 概述 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 阅读全文
posted @ 2022-10-03 10:39 brokyz 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 构造函数和原型 ES5创建对象的方法 在ES6之前,如果想创建对象有三种方式: 通过字面量{}创建对象 利用new Object创建对象 使用构造函数创建对象 // 1. 通过字面量{}创建对象 var obj = { uname: 'brokyz', agr: 18, sex: 'male', s 阅读全文
posted @ 2022-08-05 19:10 brokyz 阅读(35) 评论(0) 推荐(0) 编辑
摘要: 元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用 offset 系列相关属性可以动态的得到该原告诉的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset 系列常用属性: Untitled offs 阅读全文
posted @ 2022-08-05 19:09 brokyz 阅读(196) 评论(0) 推荐(0) 编辑
摘要: ES6简介 ES的全程是EMCAScript,它是由EMCA国际标准化组织,指定的一项脚本语言标准化规范 ES6就是JavaScript的一个发行版本, 于2015.06发行, 全称为ECMAScript. 一般来说JS我们刚开始学习的基础版本为ES5, ES6再ES5的基础上新增了一些新特性. E 阅读全文
posted @ 2022-08-05 18:46 brokyz 阅读(127) 评论(0) 推荐(0) 编辑
摘要: 了解 Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步JavaScript和XML)。 通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。 为什么学习 Ajax 之前所学的技术,只能 阅读全文
posted @ 2022-08-05 18:44 brokyz 阅读(42) 评论(0) 推荐(0) 编辑
摘要: 概述 jQuery 是一个快速、简洁的 JavaScript 库,其设计宗旨为”write less, do more“,提倡我们使用更少的代码去做更多的事情。 jQuery 对我们常见的 JavaScript 原生代码进行了封装,优化了 DOM 操作、事件处理、动画设计和 Ajax交互。 jQue 阅读全文
posted @ 2022-08-05 08:34 brokyz 阅读(289) 评论(0) 推荐(0) 编辑
摘要: demo HTML部分 slideshow: 整个轮播图的框架 prev: 上一页按钮 next: 下一页按钮 promo: 轮播图促销图片 circle: 促销图片对应的按钮 promo_now: 当前促销图片对应的按钮 <body> <div class="slideshow"> <a src= 阅读全文
posted @ 2022-07-18 22:24 brokyz 阅读(47) 评论(0) 推荐(0) 编辑
摘要: 整体概览 | 实例 | 描述 | | | | | [Pp]ython | 匹配 “Python” 或 “python”。 | | rub[ye] | 匹配 “ruby” 或 “rube”。 | | [abcdef] | 匹配中括号内的任意一个字母。 | | [0-9] | 匹配任何数字。类似于 [0 阅读全文
posted @ 2022-07-04 15:34 brokyz 阅读(58) 评论(0) 推荐(0) 编辑
摘要: 行内元素水平居中 text-align: center; <style> .parent { background-color: aliceblue; text-align: center; } .child { background-color: orange; } </style> <body> 阅读全文
posted @ 2022-07-03 14:24 brokyz 阅读(175) 评论(0) 推荐(0) 编辑
摘要: 什么是 BOM BOM (Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM 缺乏标准,JavaScript 语法的标准化组织是 ECM 阅读全文
posted @ 2022-06-30 23:19 brokyz 阅读(135) 评论(0) 推荐(0) 编辑
摘要: 永久更换 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 下面是常用国内源 阿里云 http://mirrors.aliyun.com/pypi/simple/ 豆瓣 http://pypi.douba 阅读全文
posted @ 2022-06-30 07:49 brokyz 阅读(146) 评论(0) 推荐(0) 编辑
摘要: 简介 由于 jupyter notebook 的界面不是很好看,所以抽时间折腾了修改了一下。 效果图 更改方法 修改 jupyter notebook 以下位置的样式文件: python根目录/lib/site-packages/notebook/static/custom/custom.css 将 阅读全文
posted @ 2022-06-30 07:40 brokyz 阅读(220) 评论(0) 推荐(0) 编辑
摘要: 简介 研究了很久的 windows 平台的终端方案,最终得出了 FluentTerminal 配合 oh-my-posh 的一套终端方案。 效果展示 FluentTerminal 一款美观的终端工具,个人感觉比 Windows Terminal 更加美观。 下载方式: 直接去微软自带的应用商店里面去 阅读全文
posted @ 2022-06-29 19:50 brokyz 阅读(447) 评论(0) 推荐(0) 编辑
摘要: 注册事件 给元素添加事件,称为注册事件或者绑定事件。 注册事件有两种方式:传统方式和方法监听注册方式。 传统注册方式 使用 on 开头的事件 onclick <button onclick="alert('hi')"></button> btn.onclock = function(){} 特点:注 阅读全文
posted @ 2022-06-29 18:47 brokyz 阅读(65) 评论(0) 推荐(0) 编辑
摘要: CSS3 新增选择器 属性选择器 属性选择器可以根据元素特定的属性来选择元素。这样就可以不借助于类或者id选择器。 利用属性选择器可以不用借助类和id选择器。 input[value] { } 以上选择器只选择具有 value 属性的 input。 属性选择器还可以选择 属性=值 的某些元素 inp 阅读全文
posted @ 2022-06-29 17:53 brokyz 阅读(68) 评论(0) 推荐(0) 编辑
摘要: 什么是DOM? 文档对象模型(Document Object Model),是 W3C 组织推荐的处理可拓展标记语言(HTML或者XML)的编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些接口可以改变网页的内容、结构和样式。 DOM 树 文档:一个页面就是一个文档,DOM 中使用 do 阅读全文
posted @ 2022-06-21 17:21 brokyz 阅读(908) 评论(0) 推荐(0) 编辑
摘要: 注释 在 JavaScript 中有2种注释: 单行注释:// 默认快捷键 ctrl + / 多行注释:/* 默认快捷键 shift + alt + a */ 输入输出语句 | 方法 | 说明 | 归属 | | | | | | alert(msg) | 浏览器弹出警示框 | 浏览器 | | cons 阅读全文
posted @ 2022-06-15 15:49 brokyz 阅读(100) 评论(0) 推荐(0) 编辑
摘要: HTML5 新增的语义化标签 1. <header> 头部标签 2. <nav> 导航标签 3. <article> 内容标签 4. <section> 定义文档某个区域 5. <aside> 侧边栏标签 6. <footer> 尾部标签 注意: 这些语义化标准主要是针对搜索引擎的 这些新标签页面中 阅读全文
posted @ 2022-06-10 16:24 brokyz 阅读(24) 评论(0) 推荐(0) 编辑
摘要: 精灵图 什么是精灵图 在网页中,往往会用到许多图像来修饰网页元素,将这些所需要的元素都放到一张图中,这就是精灵图。 为什么需要精灵图 如果网页中所使用的图修饰较多,那么就会导致网页频繁请求服务器,造成服务器压力过大,倒是页面的加载速度变慢。 ==为了有效降低服务器接收和发送请求的次数,提高页面加载速 阅读全文
posted @ 2022-06-09 17:51 brokyz 阅读(55) 评论(0) 推荐(0) 编辑
摘要: vertical-align CSS的vertical-align属性的使用场景:经常设置图片或者表单(行内块元素)和文字垂直对齐。 只针对==行内元素或行内块元素起效== 语法: vertical-align: baseline | top | middle | bottom | 值 | 描述 | 阅读全文
posted @ 2022-06-09 15:01 brokyz 阅读(1520) 评论(0) 推荐(0) 编辑
摘要: 鼠标样式 cursor 可以给元素添加cursor属性来控制经过其的鼠标样式。 { cursor: pointer; } | 属性 | 描述 | | | | | default | 小白 默认 | | pointer | 小手 | | move | 移动十字架 | | text | 文本 | | n 阅读全文
posted @ 2022-06-09 14:34 brokyz 阅读(45) 评论(0) 推荐(0) 编辑
摘要: 在网页布局中有许多的小图标,这些图标都是由字体图标来进行实现的。 字体图标的产生 在早期这些字体图标也使用精灵图进行实现,但是精灵图也有其自身缺点: 图片文件还是比较大的。 图片本身放大和缩小会失真。 一旦图片制作完毕想要变更非常复杂。 此时,字体图标的技术就完美的解决了以上的问题 字体图标可以为前 阅读全文
posted @ 2022-06-09 13:53 brokyz 阅读(122) 评论(0) 推荐(0) 编辑