FrontEnd

FrontEnd

一、HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<a href="index.html" target="_blank"></a> target为窗口打开方式,href可以放内部链接(不用http/s)
锚点链接:格式:#id
<a href="#name">点击我跳转到name</a>
<p id="name">
这是要跳转到的地方
</p>
&npsp; 空格
表格:展示数据,不是用来布局的
<table>
<thead>
<tr>
<th>name</th>
<th>gender</th>
</tr>
</thead>

<tbody>
<tr>
<td>zhang</td>
<td>female</td>
</tr>
</tbody>
</table>
合并单元格:rowspan,colspan(从最左侧最上侧写)
列表:用来布局
ul中只能放li,li中可以放任何标签
自定义列表:
<dl>
<!-- 定义项目名-->
<dt>Title</dt>
<!-- 描述项目内容-->
<dd>content1</dd>
<dd>content2</dd>
<dd>content3</dd>
</dl>
单选按钮和复选按钮设置checked="checked"可以默认选中
下拉菜单:selected="selected"可以默认选中
<textarea rows="50" cols="100">
文本域
</textarea>

二 、CSS

2.1 基础

2.1.1 字体相关

字体大小:font-size

  • 必须有单位px

字体粗细:font-weight

  • 100~900 normal:400 bold:700无单位

字体样式(加粗):font-style

  • normal/italic(斜体) 控制字体风格(一般用于将倾斜的字体正过来)

字体类型:font-family

字体颜色:color

2.1.2 文本相关(多指文本的外观)

文本缩进:text-indent

  • 单位为em或者px

文本水平对齐:text-align

  • 不止用于文本

文本修饰:text-decoration

  • underline/none 加上下划线

行高:line-height

2.1.3 背景相关

背景颜色:background-color

背景图:backfround-image

  • url('图片路径')
  • 默认是复制效果

背景图平铺:background-repeat

  • repeat(默认效果)
  • no-repeat
  • repeat-x
  • repeat-y

背景图位置:background-position

  • 格式:水平方向位置 垂直方向位置

  • 两种表示方式(可以混用)

    • 方位名词

      left center right / top center bottom

    • 数字+px

      坐标系:原点在左上角,x轴水平向右,y轴水平向下

  • 注意:背景图只显示在盒子里面

背景图片和img标签的区别:

  • 背景图需要依赖一个标签,否则是看不见的
  • 重要的图片用img,修饰性的图片用background-image

2.1.4 Emmet语法

1
2
3
4
5
6
7
ul>li*3
生成
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1
2
3
4
div+p
生成
<div></div>
<p></p>
1
2
3
4
5
.test
p.test2
生成
<div class="test"></div>
<p class="test2"></p>

2.2 CSS选择器与特性

2.2.1 基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

2.2.2 复合选择器

  • 后代选择器(选择父元素里面的子元素)

    1
    2
    3
    父亲 孩子(儿子、孙子......){
    属性:属性值
    }
  • 子选择器(只能选择某元素的最近一级子元素)

    1
    2
    3
    父亲 > 亲孩子{
    属性:属性值
    }
  • 并集选择器

    1
    2
    3
    4
    div,
    p{
    属性:属性值
    }
  • 交集选择器

    1
    2
    3
    p.box{
    属性:属性值
    }
  • 伪类选择器(向某些选择器添加特殊的效果)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    eg:
    顺序(LVHA)不能变!!!
    a:link 未访问
    a:visited 已经访问
    a:hover 鼠标经过
    a:active 鼠标按下未抬起
    a:last-child

    :focue 用于选取获得焦点的表单元素
    input:focus {
    background-color: red;
    }

2.2.3 结构伪类选择器

作用:根据元素在HTML中的结构关系查找元素

1
2
3
4
5
E:first-child 第一个元素
E:last-child 最后一个元素
E:nth-child(i) 第i个E元素
E:nth-last-child(j) 倒数第j个元素
E:nth-child(2n) 第偶数个元素

2.2.4 伪元素

伪元素:由CSS模拟出的标签效果

1
2
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素

伪元素默认的是行内元素

必须设置content属性才能生效

eg:

1
2
3
4
5
6
7
8
9
10
<style>
.father::before {
content: '你';
}

.father::after {
content: '吗';
}
</style>
<div class="father"></div>

2.3 元素显示模式

块级元素:

  • 常见块元素:div,p,h1,ul,ol,li
  • 特征:
    • 独占一行
    • 宽度默认是父元素100%,高度由内容撑开
    • 宽高、内外边距可以控制
    • ps:文字类的元素里面不能使用块级元素,如p,h1

行内元素:

  • 常见行内元素:a, s pan

  • 特征:

    • 一行显示多个
    • 宽度和高度默认由内容撑开
    • 不能设置宽高
    • 行内元素只能容纳行内元素

行内块元素

  • 常见行内块元素:img,input,td
  • 特征:
    • 一行可以显示多个
    • 可以设置宽高
    • 和相邻的行内块元素在同一行,但是会有缝隙
    • 默认宽度就是本身内容的宽度

显示模式的转换

  • display:block:转换为块级元素
  • display:inline:转换为行内元素
  • display:inline-block:转换为行内块元素

HTML嵌套规范注意点:

  • a标签可以嵌套任意元素,除了自身
  • p标签不要嵌套块级元素

CSS三大特性:

  • 层叠性

    样式冲突:后来居上

  • 继承性

    子标签会继承父标签的某些样式 如文本颜色和字号

  • 优先级

    不同选择器具有不同的优先级,优先级高的会覆盖优先级低的选择器样式

    !important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

小技巧:当line-height=盒子的高度,文字会垂直居中

2.4 盒子模型

image-20230303192827891
  • 内容区域

    • 宽度:width(px)

    • 高度:height(px)

  • 边框

    • 边框粗细:border-width

    • 边框样式:border-style

      solid/dashed/dotted

    • 边框颜色:border-color

    • 复合写法:border: 1px,solid,red 无顺序

    • 相邻的边框合并:border-collapse:collapse

  • 内边距:padding

    • padding:上 右 下 左
    • padding:上下 左右
    • padding:上 左右 下
    • 内边距也会影响盒子大小,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子
      • 解决方法1:手动做减法
      • 解决方法2:给div指定属性(成为内减模式):box-sizing: border-box
  • 外边距:margin

    类似内边距

  • 一般在项目开始时会清除标签默认的padding和margin

    1
    2
    3
    4
    * {
    margin: 0;
    padding: 0;
    }
  • 清除内外边距

    1
    2
    3
    4
    *{
    padding:0;
    margin:0;
    }
  • 塌陷现象:相互嵌套的块级元素,子元素的margin-top会作用在父元素上,导致父元素一起往下移动。注意,只针对垂直方向。

    解决方法:

    1. 给父元素设置padding-top
    1. 给父元素设置overflow:hidden 3. 转换为行内块元素
    2. 设置浮动

2.5 浮动

标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则

浮动的作用:

  1. 现有技术的问题:浏览器在解析块级元素或者行内块元素时,若代码换行,会解析出一个小间距
  2. 早期作用:图文环绕
  3. 现在的作用:网页布局

浮动的特点:

  1. 浮动元素在标准流中不占据位置,比标准流高半个级别,可以覆盖元素
  2. 浮动后的元素具备行内块元素特点
  3. 浮动后的元素不能通过text-aligin:center或者margin:0 atuo来居中

CSS书写顺序(浏览器执行效率更高):

  1. 浮动/display
  2. 盒子模型:margin,padding,border,width,height,background-color
  3. 文字的样式

清除浮动:

含义:清除浮动带来的影响

为什么要清除浮动?

  • 由于父级盒子在很多情况下不方便给高度,但是子盒子浮动又不占有位置,最后父盒子高度为0,所以要清除浮动

清除浮动方法一: 额外标签法:

  • 在父元素内容的最后添加应给块级元素,给添加的元素添加clear:both

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    .clear {
    clear: both;
    }
    </style>
    <div class="father">
    <div class="damao">a</div>
    <div class="ermao">a</div>
    <div class="clear"></div>
    </div>

清除浮动方法二: 单伪元素清除法

  • 用伪元素替代额外标签

    1
    2
    3
    4
    5
    .clearfix::after{
    content: '';
    display: block;
    clear: both;
    }

清除浮动方法三: 双伪元素清除法

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
display: table;
content: '';
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom: 1;
}

清除浮动方法四:overflow

  • 给父元素添加overflow:hidden

网页定位第一准则:多个块级元素纵向排列找标准流 多个块级元素横向排列找浮动

网页定位第二准则:先设置盒子大小 之后设置盒子位置

2.6 定位

https://www.bilibili.com/video/BV1Kg411T7t9?t=37.1&p=147

定位的作用:可以让元素自由的摆放在任意位置,常用于元素重叠的场景,或者让元素始终固定在屏幕某个位置

2.6.1 相对定位

定义:相对于自己原来的位置进行移动

代码:position: relative

特点:

  1. 占有原来的位置
  2. 显示模式不变
  3. 改变位置参照自己原来的位置

2.6.2 绝对定位

定义:相对于非静态的父元素(也可以是父元素的父元素等)进行移动。也就是先找已经定位的父元素,若没有,以浏览器窗口为参照进行定位

代码:position: absolute

特点:

  1. 脱离标准流,不占位置
  2. 显示模式变成行内块

注意:父标签一般用相对定位,简称子绝夫相

绝对定位的盒子不能使用左右margin 0 auto去居中,那么如何居中呢?

  1. 方法一:

    1
    2
    3
    4
    5
    position: absolute;
    left: 50%;
    margin-left: -元素宽度的一半;
    top: 50%;
    margin-top: -元素高度的一半;
  2. 方法二:

    1
    2
    3
    left: 50%;
    top: 50%;
    tracsform: translate(-50%,-50%);

2.6.3 固定定位

定义:相对于浏览器进行定位移动

代码: position: fixed

特点:

  1. 脱离标准流,不占位置
  2. 改变位置参考浏览器窗口
  3. 具备行内块特点

2.6.4 元素的层级关系

不同布局方式元素的层级关系:

  • 标准流<浮动<定位

不同定位之间的层级关系:

  • 相对、绝对、固定默认层级相同
  • 此时HTML中写在最下面的元素层级更高,会覆盖上面的元素,也就是后来者居上

如何改变层级关系?

1
2
3
4
z-index:1;
/*
默认值为0,值越大越在上层
*/

注意:z-index必须配合定位才能生效

2.7 装饰

2.7.1 垂直对齐方式

属性名:vertical-align

属性值:

  • baseline:默认,基线对齐
  • middle: 中部对齐
  • top: 顶部对齐
  • bottom: 底部对齐

应用场景:

  • 但凡是行内块和文字对齐或者行内块和行内块对齐,要想居中,都要是vertical-align: center

2.7.2 光标类型

也就是光标在元素上的显示模式

1
2
3
cursor: pointer /*小手*/
cursor: text /*工字型*/
cursor: move /*十字光标*/

2.7.3 圆角边框

属性名:border-radius

常见取值:数字+px(圆角半径),百分比

eg:

1
border-redius: 10px 20px 30px 40px; /*左上 右上 右下 左下*/

若想要圆形,设置半径为50%即可

2.7.4 溢出部分显示效果

属性名: overflow

1
2
3
4
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scrool 无论是否溢出都显示滚动条
auto 根据是否溢出自动显示或隐藏滚动条

2.7.5 元素显示和隐藏

场景:让某元素在屏幕中不可见,比如hover之后元素隐藏

常见属性

1
2
visibility: hidden; /*占位隐藏*/
display: none /*不占位隐藏*/

2.7.8 背景图片大小

作用:设置背景图片的大小

语法:background-size:宽度 高度

取值:

1
2
3
4
数字+px 常用
百分比 相对于盒子自身的宽高百分比
contain 将背景图片等比例缩放,不会超出盒子
cover 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白

2.7.9 盒子阴影

属性名:box-shadow

取值

1
2
3
4
5
6
h-shadow 必须,水平偏移量,允许负值
v-shadow 必须,垂直偏移量,允许负值
blur 可选,模糊度
spread 可选,阴影扩大
color 可选,阴影颜色
inset 可选,将阴影改为内部阴影

2.7.10 过渡

作用:让元素的样式慢慢的变化,常常配合hover使用,增强网页交互体验

使用:谁变化谁加过渡属性

属性名:transition

常见取值

1
2
过渡的属性:all(所有能过渡的属性)或者具体的属性名
过渡的时长:数字+s

2.8 css精灵图

精灵图的优点:减少服务器的发送次数,减轻服务器的压力,提高页面加载速度

三、JS

https://www.bilibili.com/video/BV1Y84y1L7Nn?t=107.4

3.1 基础知识、语法

变量

let 变量名

let不允许多次声明一个变量,var可以

变量名只能是数字字母下划线和$符号,且数字不能开头

现在开发中一般不用var

数据类型

  • 基本数据类型

    • number

      NaN代表计算错误

    • string

      通过单引号、双引号、反引号包裹的数据,比较推荐单引号

      其中反引号可以内嵌变量,比如:

      1
      document.write(`大家好,我是${name}`)
    • boolean

    • undefined

      表示没有赋值

      如果检测变量是undefined就说明值没有传递过来

    • null

      表示赋值了,但是为空

      确认一个变量里面存放的是对象,如果还没准备好对象,可以放个null

  • 检测数据类型

    typeof x或者typeof(x)

  • 引用数据类型

    • object
  • 数据类型转换

    使用表单,prompt获取过来的数据默认都是字符串类型的

    • 隐式类型转换
      • +号两边只要有一个字符串,都会把另外一个转为字符串
      • 除了+以外的算术运算符,比如-*/都会把数据转为数字类型
    • 显式类型转换
      • Number(数据)
      • parseInt(数据) 只保留整数
      • parseFloat(数据) 只保留小数

运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
num += 1
num -= 1
num *= 2
num /= 2
num %= 3
--
++
>
<
>=
<=
==
=== 是否值和类型都相同
!== 是否不全等
&&
||
!

NaN不等于任何值,包括本身

尽量不要比较小数,因为小数有精度问题

数组

JS的数组类似Python的列表,可以存取各种数据类型

增:

1
2
arr.push(新增的内容) 增加到末尾,并且返回数组的新长度,可以同时push多个
arr.unshift(新增的内容) 增加到开头,并且返回数组的新长度

删:

1
2
3
arr.pop() 删除最后一个元素 返回值是删除的元素
arr.shift() 删除第一个元素 返回值是删除的元素
arr.splice(操作的小标,删除的个数)

对象

1
2
3
4
5
6
7
let n = {
属性名: 属性值,
方法名: 函数
song: function(){}
}
n.song()
let m = new Object()

增:

对象.新属性名=新值

删:

delete 对象名.属性名

改:

对象.属性=值

查:

对象[属性名]对象.属性名

遍历对象:

1
2
3
4
5
6
7
8
9
let obj = {
name: 'd4wn',
age: 20,
school: 'uestc'
}
for (let k in obj) {
//k为属性名
console.log(obj[k])
}

函数

如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐

匿名函数

1
2
3
4
let fn = function(){}//函数表达式
fn()
注意,函数表达式和具名函数不同,具名函数只要声明了,在哪里调用都行
但是函数表达式有顺序要求

立即执行函数

1
2
3
(function () { console.log(123) })(); //注意,这里必须有分号
(function () { console.log(123) }()); //注意,这里也是必须有分号
(function name() { console.log(123) })()//也可以自己起名字

数学内置对象

1
2
3
4
5
6
7
random() 生成0-1之间的随机数,左闭右开
ceil()
floor()
max()
min()
pow()
abs()

3.2 DOM操作

作用:利用js操作html,也就是操作网页内容

DOM:文档对象模型

什么是DOM树:

  • 将HTML文档以树状结构直观的表示出来,我们称之为文档树
  • 作用:文档树直观的体现了标签与标签之间的关系

在html里面叫做标签,但是js获取后都叫对象

DOM的核心思想:把网页内容当作对象处理

2.1 获取DOM元素

1
2
3
4
5
6
7
8
// 获取匹配的第一个元素
document.querySelector('CSS选择器');
//获取匹配的所有元素
const lis = document.querySelectorAll('CSS选择器');
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
//得到的是一个伪数组,没有push和pop,但是有长度和索引

2.2 操作元素内容

innerText

显示纯文本,不会解析标签

innerHTML

会解析标签

2.3 操作元素属性

操作常见属性:

对象.属性=值

操作CSS样式属性:

通过style属性修改:

这种方式生成的是行内样式表,权重比较高

1
2
3
const box = document.querySelector('.box');
box.style.width = '300px'
//若样式名字中含有间隔号,则用小驼峰命名法,如paddingTop

通过类名(className)操作CSS(适合修改的样式比较多的情况)

只能有一个class,会覆盖之前的类名,所以添加时可以加上之前的类名

1
2
const box = document.querySelector('.box');
box.className = '.boxNew'

通过classList操作类控制CSS(最常用)

1
2
3
4
5
6
// 获取匹配的第一个元素
const box = document.querySelector('.box');
box.classList.add('newBox')
box.classList.remove('newBox')
//切换类名,如果有的就删掉,如果没有就加上
box.classList.toggle('newBox')

操作表单元素属性

对象.属性=值

1
2
3
4
5
6
7
8
<input type="text" value="computer">
<script>
// 获取匹配的第一个元素
const box = document.querySelector('input');
//注意:这里只能用value和type
console.log(box.value)
console.log(box.type)
</script>

若表单中添加就有效果,移除就没有效果,则一律用布尔值表示,比如disables,checked,selected

自定义属性

data开头

1
2
3
4
5
6
7
<div data-tmp="123"></div>
//以data开头的都是自定义属性
<script>
// 获取匹配的第一个元素
const box = document.querySelector('div');
console.log(box.dataset.tmp)
</script>

2.4 定时器

1
2
3
4
5
6
function tmp(){
console.log("123")
}
let n = setInterval(tmp,1000);
//每隔1秒调用一次tmp函数
clearInterval(n)//关闭定时器

定时器返回的是定时器编号

2.5 事件监听

2.5.1 基础知识

目标:能给DOM元素添加事件监听

1
元素对象.addEventListener('事件类型',要执行的函数)

拓展:

  • 起初事件监听是事件源.on事件=function(){},但是on方式会被覆盖,addEventListener可绑定多次

事件类型:

  • click
  • mouseenter 鼠标经过
  • mouseleave
  • focus
  • blur
  • Keydown
  • Keyup
  • input
2.5.2 事件对象

也是个对象,含有事件触发时的相关信息,一般命名为event,ev,e

1
2
3
4
const btn = document.querySelector('#btn')
btn.addEventListener('click', function (e) {
console.log(e)
})

事件对象的常见属性

  • type:当前事件类型
  • clientX/clientY:光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY:光标相对于当前元素左上角的位置
  • key:用户按下的键盘键的值
2.5.3 环境对象

this代表当前函数运行时所处的环境

普通函数里面this指向的时Window

其实this指向的是调用者,函数的调用方式不同,this指代的对象也不同

2.5.4 事件流

事件流就是事件完整执行过程中的流动路径

简单来说,捕获阶段能是从父到子,冒泡阶段是从子到父(默认为冒泡,会依次向上调用所有的父级元素的同名事件)

实际工作都是使用事件冒泡为主

如何阻止事件冒泡?

1
e.stopPropagation()

此方法也在捕获阶段也有效,可以阻止事件向父级元素传播

2.5.5 解绑事件
1
元素对象.removeEventListener('事件类型',要移除的函数)

匿名函数无法解绑

2.5.6 事件委托

事件委托是对事件流的一种利用技巧。

比如在一个大的div下面有5个不同的li,我们不必给每个li添加绑定事件,可以给div添加。

1
e.target.style.color = 'red' //其中e.target就是我们点击的那个对象
2.5.7 阻止元素默认行为

比如我们想阻止submit按钮的默认提交操作

1
2
3
4
const form = document.querySelector('form')
from.addEventListener('submit', function(e){
e.preventDefault()
})
2.5.8 其他事件

页面加载事件:一般来说script标签写在代码尾部,因为需要先把所有标签加载完毕才能操作标签,我们采用下面的方法可以让script标签放在顶部也能执行

1
2
3
4
5
6
7
8
// 等待标签加载完毕(包含css和外部页面)
window.addEventListener('load', function () {
// 操作对象
})
// 等待标签加载完毕(不用等待css)
window.addEventListener('DOMContentLoaded', function () {
// 操作对象
})

元素滚动事件:可以检测元素滚动了多少像素

1
2
3
window.addEventListener('scrool', function () {
console.log(window.screenTop)
})

https://www.bilibili.com/video/BV1Y84y1L7Nn?t=432.7&p=121

2.6 本地存储

2.6.1 localStorage

localStorage: 数据永久存储在本地,除非手动删除,同一个浏览器可以共享

注意,localStorage的键和值只能是字符串,

存储数据:

1
localStorage.setItem(key,value)

获取数据:

1
localStorage.getItem(key,value)

删除数据:

1
localStorage.removeItem(key)

修改数据: 重新存储一遍

若要存储复杂数据类型,可用如下的语句和字符串进行转换

1
2
JSON.stringify(qy)
JSON.parse(qy)

https://www.bilibili.com/video/BV1Y84y1L7Nn?t=1213.3&p=132

四、VUE

https://www.bilibili.com/video/BV1HV4y1a7n4?t=9.0

前置知识

  • Vue是一套用于构建用户界面的渐进式JS框架
  • 特点
    • 采用组件化模式,提高代码复用率,且让代码更好维护。 一个组件就是一个.vue模式
    • 声明式编码,让编码人员无需直接操作DOM,提高开发效率

快速开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D4wn</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
Hello,{{ ss }}
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
ss: 'world'
}
})
</script>
</body>
</html>

在两层花括号内部必须要是JS表达式

Vue容器和Vue实例是一一对应的

https://www.bilibili.com/video/BV1HV4y1a7n4?t=76.7&p=6

1.Vue核心

1.1_模板语法

Vue语法分为两种:插值语法(双大括号)和指令(v-开头)

v-bind:x="hello" v-bind可以给标签属性动态的绑定值,此时hello就是JS表达式

1.2_数据绑定

单向数据绑定:v-bind:href="xxx"或者:href="xxx"

双向数据绑定:v-model:value="xxx"或者v-model="xxx"

双向是指数据不仅能从data流向页面,还能从页面流向data

注意:双向数据绑定v-model只能应用在表单类元素上(输入类元素)

1.3_el与data的两种写法

el的另一种写法

1
2
3
4
5
6
const x = new Vue({
data: {
ss: 'world'
}
})
x.$mount("#root")

data的另一种写法:函数式

1
2
3
4
5
6
7
8
new Vue({
el: '#root',
data: function () {
return{
ss:"world"
}
}
})

1.4_理解MVVM

M:模型Model 对应data中的数据

V:视图View 模板

VM:视图模型ViewModel Vue实例对象

1.5_事件处理

v-on:click=func

可以简写为@click

默认事件形参:event

隐含属性对象:$event

.prevent:阻止事件的默认行为

.stop阻止事件冒泡

.once 事件只触发一次

如何捕获键盘事件?

常见的键盘别名:

  • enter
  • delete
  • esc
  • space
  • tab 这个要用keydown
  • up
  • down
  • left
  • right
  • caps-lock
  • 其他的按照按键原始的key值去绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div id="root">
<input type="text" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {},
methods: {
showInfo() {
console.log("123")
alert("hello")
}
}
})
</script>
</body>

1.6_计算属性与监视

只要data中的数据发生变化,Vue一定会重新解析模板

优势:与methods相比,内部有缓存机制,效率更高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D4wn</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <script src="vue.js"></script>-->
</head>
<body>
<div id="root">
<input type="text" v-model="msg1">
<input type="text" v-model="msg2">
<p>{{ fullName }}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
msg1: "hello",
msg2: "world"
},
methods: {},
computed: {
fullName: {
//当有人读取fullName的时候 get就会调用
get() {
return this.msg1 + "->" + this.msg2;
},
//当有人想修改fullName的时候,set就会调用
set(){

}
}
}
})
</script>
</body>
</html>

当只有get没有ser的时候可以简写

1
2
3
4
5
computed: {
fullName() {
return this.msg1 + "->" + this.msg2;
}
}

如何实现监视?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D4wn</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- <script src="vue.js"></script>-->
</head>
<body>
<div id="root">
<p>作业写完了没?{{ info }}</p>
<button @click="flag=!flag">按钮</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
flag: true
},
methods: {},
computed: {
info() {
return this.flag ? "写完了" : "没写完";
}
},
watch:{
flag:{
handler(newValue,oldValue){
console.log(newValue)
console.log(oldValue)
}
}
}
})
</script>
</body>
</html>

后序链接:https://www.bilibili.com/video/BV1Zy4y1K7SH?t=163.5&p=23

六、Less

参考资料:https://www.bilibili.com/video/BV1fS4y127nt?t=0.6

6.1 变量

1
2
3
4
@bgCorlor: red;
#wrap {
background-corlor: @bgCorlor;
}

6.2 嵌套

&: 代表上一层选择器的名字, 可以理解为C里面的define

七、Axios

https://www.bilibili.com/video/BV1wr4y1K7tq?t=16.5


FrontEnd
https://d4wnnn.github.io/2022/10/04/Dev/FrontEnd/
作者
D4wn
发布于
2022年10月4日
许可协议