- 博客(87)
- 收藏
- 关注
RSS订阅原创 vue--样式绑定--样式切换方法
可以通过 :class='变量名'来动态改变标签的样式名，变量值可以是字符串、数组、对象;也i可以通过:style="obj"改变行内样式或html标签属性改变
2024-04-17 18:04:33
658
1
原创 HTML-基础知识-排版标签,语义化标签，块级元素行内元素，文本标签（二）
行内元素中可以写行内元素，但不能写块级元素。标签默认效果不重要，语义最重要。块级元素中能写块级元素行内元素。h1-h6不能互相嵌套。p标签中不能写块元素。
2023-12-27 15:42:30
626
原创 HTML-基础知识-基本结构，注释，文档说明，字符编码（一）
html lang="en"> lang属性声明当前网页用了什么语言。en：英语 zh：中文 zh-CN：简体中文 zh-TW：繁体中文。 告诉浏览器所写网页的编码，UTF-8 万国码。DOCTYPE html> 告诉浏览器所写的网页是按照h5来写的。2.超文本标签属性名和属性值不区分大小写。3.超文本标签属性值重复，听取第一个。10.html标签学习文档。ctrl+/ 按钮。6.html文档说明。8.html设置语言。
2023-12-27 10:20:06
735
原创 css--媒体查询--media
媒体查询（Media Query）是CSS3新语法，@media 可以针对不同的屏幕尺寸设置不同的样式。用 @media 开头 注意@符号mediatype 媒体类型关键字 and not onlymedia feature 媒体特性 必须有小括号包含。all 所有print 打印screen 电脑屏幕 平板 手机作用：将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。and “且”not “非”only “特定”widthmin-widthmax-widthrem单位是跟着html来走的，有了r
2022-06-20 16:10:04
364
1
原创 css--rem适配布局
rem是单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。em的基准是相对于html元素的字体大小。使用时,可以通过设置html标签的font-size的值，可以用来控制整个页面的大小
2022-06-20 15:33:58
738
原创 css3--变形transform--移动旋转缩放
作用：改变标签在二维平面上的位置。经常和transition（过渡）一起使用。transition语法transform: translate(100px,100px);transform: translate(50%,50%)transform: translateX(100px)transform: translateY(100px)1.translalt属性移动过程中不会影响其他元素。2.x,y的值用百分比是基于自生的宽高来对比的。3.行内元素不能使用translatetransform: rotat
2022-06-17 16:09:50
998
原创 CSS3--滤镜filter\calc函数\css3过渡transition
filter:blur(5px); filter: blur(10px);1.谁做过渡给谁加 2.要过渡所有属性可以用 all3.运动曲线 默认是ease 可以不写4.何时开始是问是否需要延迟，延迟多久5.和时间有关系的两个属性值必须要有单位s6.多个过渡 transition:width 0.5s,height o.5s;...
2022-06-15 17:58:39
211
转载 HTML5--html新增语义化标签
：定义页面独立的内容区域（可以嵌套使用，可以表示插件）。：定义文档中的节（section，区段）。:定义导航链接的部分。:定义页面的侧边栏内容。:定义日期或时间。:定义了文档的头部区域。：定义 section 或 document 的页脚。：被用来对标题元素进行分组。：定义文档作者/所有者的联系信息。————————————————版权声明：本文为CSDN博主「Ass...
2022-06-15 13:58:39
618
原创 css--margin负值的应用--细线边框和细线边框高亮显示
直接浮动两个盒子之间会出现粗线解决这个问题用一个压一个的原理，使用margin负值。 边框高亮显示 1.使用相对定位2.再已经设置过相对定位的时候使用z-index
2022-06-15 10:05:45
205
原创 css--溢出文本省略号显示--单行、多行
1.强制一行内显示文本 white-space: nowrap2.溢出部分隐藏 overflow : hidden;3.文字溢出用省略号显示 text-overflow : ellipsis 2.多行文本溢出 这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览...
2022-06-15 09:18:23
96
原创 css--vertical-align属性--图片文字居中对齐、图片底部空白缝隙
vertical-align 属性设置元素的垂直对齐方式。从上面的例子中我们可以看到，当图片的 vertical-align 的值是 baseline 时图片和图片之间有缝隙，这是为了给文字留位置，就算没有文字因为基线对齐是默认值，缝隙也存在。解决方法：1.给图片添加 vertical-align 除默认值以外的值。 2.将图片转换为块级元素...
2022-06-15 09:07:06
1466
原创 css--transition和animation
1.transition(过渡)格式：transition:要过渡的属性 花费时间 运动曲线 何时开始（后两个属性可以不写）实例：<html><head><style> div{width:100px;height:100px;background:blue;transition:width 2s;}div:hover{width:300px;}</style></head><body>&
2022-02-28 14:13:27
658
原创 CSS--精灵图--background-position
1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，通过background-position来改变图片位置。所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器
2022-02-23 10:00:37
910
原创 CSS--box+float常见网页布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-02-19 17:36:00
117
原创 windows快捷键
Alt+Tab 切换窗口window+d 显示隐藏桌面window+r 打开‘运行’窗口 cmd/mspaint/calcwindow+e 打开文件资源alt+f4 关闭当前窗口
2022-02-05 16:27:27
187
原创 vue--可复用技术--混入mixin
mixin 混入是非常灵活的技术用来分发Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项混入定义var mixin = { data:function(){return {info:"this is a mixin"}}, created(){console.log("this is mixin created");}, methods:{foo(){return "th...
2021-11-27 22:14:44
93
原创 vue--组件机制--动态组件component
动态渲染一个组件。<component v-bind:is="currentTabComponent"></component> 默认情况下，当组件在切换的时候都会重新创建组件，但是有些时候我们希望组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。<keep-alive> <component v-bind:is="currentT...
2021-11-27 21:40:14
1141
原创 vue--组件机制--插槽slot
普通插槽插槽允许我们在调用子组件的时候为子组件传递模板。子组件 <navigation-link><a v-bind:href="url" class="nav-link" > <slot>default</slot> </a>父组件<navigation-link url="/profile"> Your Profile </navigation-link> 当组件渲染的时候，<s...
2021-11-27 21:30:42
456
原创 vue--组件机制--组件传值
概述 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。组件注册的时候需要为该组件指定各种参数。组件定义 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外...
2021-11-27 19:46:00
1143
原创 js实现vue双向数据绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue双向数据绑定.
2021-11-19 09:27:32
206
原创 vue--计算属性computed\监听属性watch
computed 我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性<div>{{total}}</div> computed: { total() { return this.a + this.b } }1. 在双大括号中直接使用表达式获取结果<div id="example"> {{ message.split('').reverse().jo...
2021-11-18 17:20:28
220
原创 vue--表单输入绑定
概述 用v-model指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 你应该通过 JavaScript 在组件的 data 选项中声明初始值。1....
2021-11-18 17:08:30
438
原创 vue--事件--事件绑定,事件修饰符,
事件绑定 可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。<button v-on:click="greet">Greet</button>methods: { greet: function (event) { if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 ...
2021-11-18 17:01:43
564
原创 vue--element+axios
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>element使用.
2021-11-18 10:02:57
172
原创 vue--模板语法--插值、指令、条件渲染、列表渲染、class绑定、style绑定
1.插值文本 <span>Message: {{ msg }}</span>原始html <span v-html="rawHtml"></span>属性 <div v-bind:id="dynamicId"></div>事件 <a v-on:click="doSomething">...</a>Javascript表达式 <div>{{ number + 1 }...
2021-11-18 10:01:03
238
原创 ES6--Generator\async
Generator Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。Generator函数有两个特征： 1.function关键字与函数名之间有个星号； 2.函数内部使用yield表达式fu...
2021-11-17 09:33:52
104
原创 ES6--Promise--promise-ajax应用，promise-ajax函数封装
1.Async Async函数是generator函数的语法糖，在generator函数的基础上添加了一些更加方便用户操作的新特性。Async函数的执行和普通函数一致，只需要一行代码即可，因为他具有内置的执行。...
2021-11-17 09:14:06
642
原创 ES6--Symbol--魔术字符串学习
一、Symbol介绍ES6 引入的一种新的原始数据类型Symbol，表示独一无二的值。Symbol函数可以接受参数，表示对于这个唯一值的描述。let s = Symbol()typeof s ; //’symbol’变量s表示独一无二的值；实例：let sy1 = Symbol('sy1');let sy2 = Symbol('sy2');console.log(sy1, sy2);console.log(sy1 == sy2);结果：二、方法1.Symbol...
2021-11-16 14:23:27
950
原创 ES6--类--class,继承
1.class JavaScript 语言中，生成实例对象的传统方法是通过构造函数。 ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已。所以ES6 的类，完全可以看作构造函数的另一种写法。 语法糖：具有特殊功能的代码写法，内部封装了一些方法...
2021-11-16 11:00:32
74
原创 防抖，节流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖</ti.
2021-11-15 20:09:04
491
原创 ES6--set,map
Set1.初始化 Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。var set = new Set();2.Set APISet.prototype.size 返回Set实例的成员总数。Set.prototype.add(value) 添加某个值，返回Set结构本身Set.p...
2021-11-15 20:07:06
56
原创 ES5--迭代器--Iterator
迭代器 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员） Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。Iterator 的遍历过程是这...
2021-11-15 20:00:12
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人