本文主要是介绍使用Vue开发页面（前置知识），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
在了解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
这篇关于使用Vue开发页面（前置知识）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
