当前位置：首页 > news >正文

使用Vue开发页面（前置知识）

news 来源：原创 2024/9/29 3:29:46

前言

在了解Vue开发之前，需要有基本的页面知识。
页面主要有三部分组成：

组件 HTML
样式 CSS
交互 JS

本文将以最快，最简单，最通俗的方式讲解

HTML

一个基本的HTML文件有以下格式

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>页面标题</title>
</head>
<body>内容
</body>
</html>

其中的组件都是由标签来定义
下面是一些常见的标签

标签	描述
< h1> ~ < h6>	定义标题，h1为一级标题
< div>	定义块状元素
< span>	定义行内元素
< img>	定义图片，通过src指定路径
< a>	定义超链接，通过src指定跳转路径
< button>	用来定义一个按钮，通过onclick属性指定对应的点击事件
< input>	输入框，通过type属性指定输入框类型

对于以上详细信息，请前往菜鸟教程，本文旨在快速入门，其他不做过多讲解

CSS

引入方式

CSS的页面的样式文件，可以写在HTML内，也可以单独作为一个.css结尾的文件
如果作为单独文件，需要在HTML文件的在< head>中使用link标签引入css文件
如果写在HTML文件内，需要在末尾在< style>标签中定义CSS样式

CSS选择器

元素选择器
p 选择器会选择所有的< p>元素。
类选择器
使用元素的class属性来选择元素。类选择器以点号（.）开始。例如，.test {}会选择所有class="test"的元素。
ID选择器
使用元素的id属性来选择元素。ID选择器以井号开始。每个ID在一个HTML文档中应该是唯一的。例如，#unique{} 会选择id="unique"的元素。

常见的CSS配置项

文本

属性	描述
color	设置文本颜色
font-size	设置文本字号
text-align	对齐元素中的文本。值：left right center
vertical-align	设置元素的垂直对齐方式。值：top middle bottom

设置行内元素文本自动换行：word-wrap:break-word

元素

属性	描述
width	宽度
height	高度
line-height	行高
color	字体颜色
font-size	字体大小

背景

属性	描述
background-color	设置背景颜色
background-image	设置背景图像
background-size	设置背景图片的大小

盒子模型（Box Model）

一个盒子的组成包含：Margin外边距，Border边框，Padding内边距，Content内容。
Border有三个属性：像素值，实虚线，边框颜色
margin设置外边距，分别是上右下左
padding设置内边距
boxShadow：设置元素阴影效果
border-radius：设置元素的外边框圆角

flex布局

想要使用这种布局，需要在父元素中声明display:flaxable，之后其中的元素就是flex布局
flex布局有以下属性：

属性	描述	值
flex-direction	设置盒子的排序方式	row（默认值）：水平方向，column：垂直方向
flex-wrap	设置盒子是否换行	nowrap（默认）：不换行。wrap：换行，第一行在上方。

justify-content属性：水平对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：竖直对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐

JS

对象的操作

//新建对象
let obj = {}//访问对象
obj//给对象添加属性
obj.name = "张三"
obj['name'] = '张三'//访问对象属性
obj.name
obj['name']
let { name } = obj//删除属性
delete obj.name//遍历对象for in
let jsObj = { 1:'a',2: 'b', 3: 'c'}for (const key in jsObj) {console.log(key + "==" + jsObj[key]); // 1==a 2==b 3==c
}

数组的操作

//创建
let array = []
let array1 = new Array()//添加元素
array[0] = '数组的第一个元素'
array.push('数组的最后一个元素')//访问
console.log(array[0])
array.length//访问数组长度//删除元素
array.pop()  //删除数组最后一个元素
array.shift()  //删除数组第一个元素
array.splice(int index,int deleteCount)  //删除数组中从index开始的deleteCount个元素//截取数组
let arrM = array.slice(int start,int end)  //截取数组中从start到end的元素 注意：左闭右开//合并数组
arr1,arr2
let arr3 = arr1.concat(arr2)//字符串变数组
let str = 'abc，defg'
let arr = str.split('') //每一个字符都转换为数组中的一个元素
let arr = str.split('，') //以逗号为分隔符，将字符串分割成数组//数组变字符串
let arr = ['a','b','c']
let str = arr.join('') //将字符串转换为数组，中间添加空//对数组进行排序
let arr = [1,2,3,4,5]
arr.sort() //升序，默认按照unicode编码排序
//如果要改为通过阿拉伯数组排序方式需要写为
arr.sort(function(a,b){return a-b})
arr.sort((a,b) => a-b)
//倒序
arr.reverse()
arr.reverse((a,b) => b-a)//获取数组下标
let arr = [1,2,3,4,5]
arr.indexOf(2) //返回2的下标，如果没有返回-1