目录
- 一、HTML篇
- 二、CSS篇
- 1.盒模型介绍
- 2.display的block、inline和inline-block的区别
- 3.介绍下BFC及其应用
- 4.隐藏元素的方法有哪些?
- 5.transition和animation的区别
- 6.css3中有哪些新特性
- 7.CSS优化和提高性能的方法有那些?
- 8.`::before`和`:after`的双冒号和单冒号有什么区别?
- 9.display:inline-block什么时候会显示间隙?
- 10.描述一下box-sizing属性?它的取值有哪些?
- 11.CSS的选择器优先级?
- 12.描述一下position属性?它的取值有哪些?
- 13.描述一下浮动元素?清除浮动的方法有哪些?为什么要清楚浮动?
- 14.如何使元素水平垂直居中?
- 15.谈一下Flex弹性布局?
- 三、JS篇
- 四、VUE篇
一、HTML篇
1.src和href的区别
src和href都是用来引用外部的资源,它们的区别如下:
- src:表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,所以一般将js脚本会放在页面底部。
- href:表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它指向的文件时,就会进行下载资源,不会停止对当前文档的处理。常用在a、link等标签上。
2.对HTML语义化的理解
语义化是根据内容的结构化,选择合适的标签。通俗来讲就是用正确的标签做正确的事情。语义化的优点如下:
- 对机器友好,带有语义的文字表现力丰富,更适合搜索引擎的爬虫爬取有效信息,有利于SEO。除此之外,语义类还支持读屏软件,根据文章可以自动生成目录;
搜索引擎优化,又称为SEO,即Search Engine Optimization,它是一种通过分析搜索引擎的排名规律,了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段,对网站进行有针对性的优化,提高网站在搜索引擎中的自然排名,吸引更多的用户访问网站,提高网站的访问量,提高网站的销售能力和宣传能力,从而提升网站的品牌效应。
- 对开发者友好,使用语义类标签增强了可读性,结构更加清晰,开发者能清晰的看出网页的结构,便于团队的开发与维护。
常见的语义化标签
1.<header></header>头部
2.<navr></nav>导航栏
3.<section></section>区块
4.<main></main>主要区域
5.<article></article>主要内容
6.<aside></aside>侧边栏
7.<footer></footer>底部
3.DOCTYPE的作用
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对CSS代码甚至js脚本的解析。它必须声明在HTML文档的第一行。
4.script标签中defer和async的区别
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。
它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
- script:会阻碍HTML解析,只有下载好并执行完脚本才会继续解析HTML
- async script:解析HTML过程中进行脚本的异步下载,下载成功立即执行,有可能会阻断HTML的解析。
- defer script:完全不会阻碍HTML的解析,解析完成之后再按照顺序执行脚本。
5.HTML5有哪些更新
新增的元素:
(1)新增语义化标签:nav、header、footer、aside、section、article
(2)音频、视频标签:audio、video
(3)数据存储:
localStorage | 没有时间限制的数据存储 |
---|---|
sessionStorage | 针对一个session的数据存储 |
(4)canvas(画布)、Geolocation(地理定位)、websocket(通信协议)
(5)input标签新增属性:placeholde、autocomplete、autofocus、required
移除的元素:
(1)纯表现的元素:basefont、big、center、font、s、strike、tt、u
(2)对可用性产生负面影响的元素:frame、frameset、noframes
6.HTML5的离线储存怎么使用,它的工作原理是什么?
离线存储指的是:在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
在线情况下:浏览器发现html头部有manifest属性,它会请求manifest文件。
- 如果是第一次访问页面,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储
- 如果已经访问过页面并且资源已经进行离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件
- 如果文件没有发生改变,就不做任何操作
- 如果文件改变了,就会重新下载文件中的资源并进行离线存储
离线情况下:浏览器会直接使用离线存储的资源
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容....
</body>
</html>
7.iframe有哪些优点和缺点?
ifame元素会创建包含另外一个文档的内联框架(即行内框架)
优点:
- 用来加载速度较慢的内容(如广告)
- 可以使脚本可以并行下载
- 可以实现跨子域通信
缺点:
- iframe会阻塞主页面的onload事件
- 无法被一些搜索引擎识别
- 会产生很多页面,不容易管理
8.对web标准和W3C的理解
9.从浏览器地址栏输入url到请求返回发生了什么?
- 浏览器地址栏输入URL并回车
- 输入URL后解析出协议、主机、端口、路径等信息
- 根据IP建立TCP链接(三次握手)
总是要问:为什么需要三次握手,两次不行吗?
这是由于TCP的自身特点可靠传输决定的。客户端和服务端要进行可靠传输,那么就需要确认双方的接收和发送能力。第一次握手可以确认客户端的发送能力,第二次握手可以确认服务端的发送能力和接收能力,所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。
- 发送Http请求
- 服务器处理请求并返回HTTP报文
- 浏览器解析并渲染页面
- 断开TCP连接(四次握手)
10.Canvas和SVG的区别
1.SVG
SVG可缩放矢量同行,是基于可扩展标记语言XML描述的2D图形的语言,SVG基于XML意味着SVG DOM中的每个元素都是可用的,可以为某个元素附件Javascript事件处理器。
在SVG中,每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。其特点如下:
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任务过度使用DOM的应用都不快)
- 不适合游戏应用
2.Canvas
Canvas是画布,通过Javascript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制。其特点如下:
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以.png或.jpg格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
二、CSS篇
1.盒模型介绍
- 标准盒模型:只包含content
- IE(替代)盒模型:content+padding+border
通过box-sizing来改变元素的盒模型:
- 标准盒模型(默认值) box-sizing:content-box
- IE盒模型 box-sizing:border-box
2.display的block、inline和inline-block的区别
display属性是CSS中用来指定元素如何显示的一个属性。它可以控制元素的盒子类型、布局方式和可见性等。
- block:会独占一行、多个元素会另起一行,可以设置width、height、margin和padding属性
- inline:元素不会独占一行,设置width、height属性无效,但可以设置水平方向的margin和padding属性,不能设置垂直方向的。
- inline-block:将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。
3.介绍下BFC及其应用
BFC(块级格式化环境):指的是一个独立的布局环境,BFC内部的元素布局与外部互不影响
触发BFC的方式有很多,常见的有:
- 设置浮动
- overflow设置为auto、scroll、hidden
- postion设置为absolute、fixed
常见的BFC应用有:
- 解决浮动元素令父元素高度坍塌的问题
- 解决非浮动元素被浮动元素覆盖问题
- 解决外边距垂直方向重合的问题
4.隐藏元素的方法有哪些?
- dispaly:none 渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
- visibility:hidden 元素在页面中仍占据空间,但是不会响应绑定的监听事件
- opacity:0 将元素的透明度设置为0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
- position:absolute 通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏
- z-index :负值 来使其他元素遮盖住该元素,以此来实现隐藏
5.transition和animation的区别
(1)transition:过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。它类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧。
(2)animation:动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画。它也类似于flash的补间动画,但是它可以设置多个关键帧(用@keyframe定义)完成动画
6.css3中有哪些新特性
-
新增各种css选择器,比如
:not(.input){ background-color: aliceblue; }
所有class不是“input”的节点 -
圆角
border-radius: 8px;
-
多列布局
border-radius: 8px;
-
阴影和反射
-
文字特效
text-shadow
-
文字渲染
text-decoration
-
线性渐变
gradient
-
旋转
transform
-
增加了旋转,缩放,定位,倾斜,动画,多背景
7.CSS优化和提高性能的方法有那些?
1.选择器性能:
(1)关键选择器。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等。
(2)如果规则拥有ID选择器作为关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。
(3)避免使用通配规则,如*{}计算次数惊人,只对需要用到的元素进行选择。
(4)尽量少的去对标签进行选择,而是用class
(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。
(6)了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。
2.渲染性能:
(1)慎重使用高性能属性:浮动、定位。
(2)尽量减少页面重排、重绘。
(3)去除空规则:{}。空规则的产生原因一般来说是为了预留央视。去除这些空规则无疑能减少CSS文档体积。
(4)属性值为0时,不加单位。
(5)属性值为浮动小数 0.**,可以省略小数点之前的0。
(6)不适用@import前缀,它会影响css的加载速度。
(7)选择器优化嵌套,尽量避免层级过深。
(8)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数。
(9)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也能影响解析性能。
3.加载性能:
(1)css压缩:将写好的css进行打包压缩,可以减小文件体积。
(2)css单一样式:当需要下边距和左边距的时候,很多时候会选择使用margin: 100px 0 100px 0
但margin-bottom:100px;maring-left:100px
执行效率会更高。
(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者时等待页面加载完成之后再进行加载。
4.可维护性、健壮性:
(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。
(2)样式与内容分离:将css代码定义到外部css中
8.::before
和:after
的双冒号和单冒号有什么区别?
(1)冒号:
用于CSS3伪类,双冒号::
用于CSS3的伪元素。
(2)::before
就是以一个子元素存在,定以在元素主题内容之前的一个伪元素。并不存在于dom之中,只存在在页面之中。
注意::before
和:after
这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是但冒号写法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before
、::after
9.display:inline-block什么时候会显示间隙?
- 有空格时会有间隙,可以删除空格解决;
- margin正值时,可以让margin使用负值解决;
- 使用font-size时,可通过设置font-size:0、letter-spacing、word-spacing解决
10.描述一下box-sizing属性?它的取值有哪些?
是CSS3新引入的属性,可以理解为一种容器高宽的计算方法。取值有3个,主要是width的包含不同。
- content-box 为默认值,border和padding不计算入width之内
- border-box width包含border和padding
- inherit 继承父元素该属性值,默认为不继承
标准盒模型(content-box)
怪异盒模型(border-box) IE盒模型
11.CSS的选择器优先级?
1.!important 优先级10000
2.内联选择器 优先级1000
3.ID选择器 优先级100
4.类别选择器 优先级10
5.属性选择器 优先级10
6.伪类 优先级10
7.元素选择器 优先级1
8.通配符选择器 优先级0
9.继承选择器 没有优先级
<input type="text" id="demo" class="demo">
1.!important
.demo{
color: red !important;
}
2.内联>外联
3.ID选择器
#demo{
color: red
}
4.类选择器
.demo{
color: red
}
5.属性选择器
[type]{
color: red
}
属性选择器还有很多其他的匹配规则,可以看这里
6.伪类
.demo:hover{
background-color: antiquewhite;
}
7.元素选择器
input{
color: red
}
8.通配符选择器(选择所有)
*{
color: red
}
12.描述一下position属性?它的取值有哪些?
position属性是CSS中用来定位元素的一个属性。它可以控制元素在文档流中的位置,常用的取值有:
取值 | 作用 |
---|---|
static | 默认取值,元素遵循正常的文档流布局,不受top、bottom、left和right属性的影响。 |
relative | 元素相对于其正常位置进行定位。可以使用top、bottom、left和right属性对元素进行微调,但是不会影响其他元素的位置 |
absolute | 元素相对于最近的已定位的祖先元素进行定位,如果祖先元素中没有已定位的元素,则相对于文档的body元素进行定位。可以使用top、bottom、left和right属性对元素进行定位。 |
fixed | 元素相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。 |
sticky | 元素在滚动到特定位置时变为fixed定位,当继续滚动时又恢复为相对定位。这个特定位置可以通过设置top、bottom、left和right属性来指定。 |
13.描述一下浮动元素?清除浮动的方法有哪些?为什么要清楚浮动?
浮动元素是指在文档流中脱离普通流,沿着周围的元素自由移动的元素,可以通过设置CSS属性 float: left/right 来使元素浮动。
清除浮动的方法有以下几种:
1.使用空元素清除浮动
在浮动元素的父元素末尾添加一个空元素,然后对这个空元素设置 clear: both。这样可以清除浮动,使得父元素能够正常包含子元素。
<div id="parent">
<div id="child">
</div>
<!--第一种 空元素位置 -->
<div style="clear: both;"></div>
</div>
2.使用 overflow 属性清除浮动
在浮动元素的父元素上设置 overflow: hidden/scroll/auto 属性,可以使得父元素包含子元素,从而清除浮动。
#parent {
background-color: red;
width: 300px;
margin: 50px auto;
/* 第二种,设立BFC区域 */
overflow: hidden;
}
#child {
background-color: blue;
width: 50px;
height: 50px;
float: right;
}
3.使用 clearfix 清除浮动
在浮动元素的父元素上设置一个类名为 clearfix 的样式,样式代码如下:
#parent {
background-color: red;
width: 300px;
margin: 50px auto;
}
/* 第三种,添加伪元素 */
#parent::after{
content: "";
display: block;
clear: both;
}
#child {
background-color: blue;
width: 50px;
height: 50px;
float: right;
}
这样可以在父元素的末尾添加一个伪元素,使得父元素能够正常包含子元素。
4.使用 flexbox 清除浮动 将浮动元素的父元素设置为 display: flex 或 display: inline-flex,这样可以使用 flexbox 布局,从而清除浮动
14.如何使元素水平垂直居中?
有多种方法可以使元素水平垂直居中,以下是其中两种常用的方法:
-
使用 flexbox 布局。可以在父元素上设置 display: flex 和 justify-content: center、align-items: center 等属性,来使子元素水平垂直居中。
-
使用绝对定位和 transform 属性。可以在子元素上设置 position: absolute 和 top: 50%、left: 50%、transform: translate(-50%, -50%) 等属性,来使子元素水平垂直居中
15.谈一下Flex弹性布局?
三、JS篇
1.什么是闭包?闭包的作用是什么?什么时候使用它?它的原理是什么?
-
闭包是指有权访问另一个函数作用域内变量的函数。
-
它的作用是可以实现私有化变量和方法,避免全局变量污染和命名冲突。也可以实现延迟执行和数据缓存等功能。
-
闭包通常在需要使用一个变量但是又不想将其暴露在全局作用域中的情况下使用。
-
闭包的原理是 JavaScript 中的作用域链。当一个函数被创建时,JavaScript 引擎会将其与其外部环境关联起来,形成一个作用域链。当函数执行时,如果在自己的作用域内找不到变量,就会沿着作用域链向上查找,直到找到为止。如果最终还是找不到,就会抛出 ReferenceError 异常。
-
在 JavaScript中,函数可以嵌套定义,而内部函数可以访问外部函数的变量。如果内部函数被保存在外部函数执行完后的环境中,就形成了闭包。由于内部函数可以访问外部函数的变量,所以在外部函数执行完后,这些变量的值仍然可以被内部函数访问和修改。这就实现了闭包的功能。
function outer() {
var count = 0;
function inner() {
count++;
console.log(count)
}
return inner
}
var closure = outer(); //返回inner函数,形成闭包。
closure();//输出1
closure();//输出2
2.如何判断一个变量是否为数组?
可以使用Array.isArray()
方法来判断一个变量是否为数组。
该方法返回一个布尔值,如果变量是数组,则返回true
,否则返回false
3.什么是事件冒泡和事件捕获?
事件冒泡和事件捕获是描述浏览器处理事件的两种模式。
在事件冒泡模式中,事件首先被派发给最内层的元素,然后沿着DOM树向上传播到父元素,直到到达document对象。
在事件捕获模式中,事件先被派发给document对象,然后沿着DOM树向下传播到目标元素。
<!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>Document</title>
<style>
.parent{
width: 500px;
height: 500px;
margin: 50px auto ;
background-color: red;
overflow: hidden;
}
.child{
width: 100px;
height: 100px;
margin: 100px auto ;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent" id="parent">
<div class="child" id="child">
</div>
</div>
<script type="text/javascript">
let parent = document.getElementById("parent")
let child = document.getElementById("child")
parent.addEventListener('click',()=>{console.log("parent被触发了")},true)
child.addEventListener('click',()=>{console.log("child被触发了")},true)
/*
点击后 先打印 parent 后打印 child 这是事件捕获
不写第三个参数或者将true改成false的话,则先打印 child 后打印 parent 这是事件冒泡
*/
</script>
</body>
</html>
addEventListener() 方法用于向指定元素添加监听事件,它包括三个参数:事件类型、事件处理程序和一个布尔值。布尔值用于指定事件处理程序是在捕获阶段还是在冒泡阶段执行。默认为false,冒泡阶段。
4.什么是this关键字,如何使用它?
this是一个关键字,指向当前函数的执行上下文。
1.在全局作用域中,this指向window对象。
2.在函数中,this的值取决于函数的调用方式。
- 如果函数是作为方法调用,this将指向该方法所属的对象。
- 如果函数是作为普通函数调用,this将指向全局对象(在浏览器中为window对象)
-----------------------------分割线--------------------------------------------------
-----------------------------分割线--------------------------------------------------
function name(){
console.log(this)
}
name() //打印出window对象
5.什么是事件委托?如何使用事件委托?
事件委托是一种js编程模式,它允许我们将事件处理程序绑定到一个父元素上,而不是将事件处理程序分别绑定到每个子元素上。
当事件在子元素上触发时,事件将被冒泡到父元素,并且由父元素上的事件处理程序来处理。然后可以使用事件目标(event.target)
属性来确定哪个子元素触发了事件,并执行相应的操作。
使用事件委托有以下优点:
1.代码更简洁-可以将多个事件处理程序替换为单个处理程序,减少代码量
2.动态绑定-对于新添加的子元素,无需重新绑定事件处理程序。
3.减少内存消耗-将所有事件处理程序绑定到父元素上,而不是每个元素上,可以减少内存消耗。
<!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>Document</title>
</head>
<body>
<ui id="hm">
<li id="01">1</li>
<li id="02">2</li>
<li id="03">3</li>
</ui>
<script type="text/javascript">
let hm = document.getElementById("hm")
hm.addEventListener('click',(event)=>{
console.log(event.target.id)
})
//依次点击列表项,打印每个子项的id
</script>
</body>
</html>
6.说说原型链?如何使用它?
7.描述一下Promise对象?它的作用是什么?
Promise 其实是异步编程的一种解决方案.简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,可以从改对象获取异步操作的消息。
它可以解决回调地狱的问题,也就是异步深层嵌套问题
- catch() 获取异常信息
- finally() 成功与否都会执行(不是正式标准)
Promise基本使用
我们使用new来构建一个Promise对象, Promise的构造函数接收一个参数,是函数,该函数传入两个参数:resolve,reject, 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
var p = new Promise(function(resolve,reject) {
setTimeout(function(){
var flag = false;
if(flag){
resolve("hello")
}else{
reject("出错了")
}
},100)
})
p.then(function(data){
console.log(data)
},function(info){
console.log(info)
})
8.解释一下JavaScript中的事件循环
事件循环是Javascript运行时的一部分,用于管理代码的执行顺序。
Jacascript中的事件循环是基于事件队列的,每个事件都被放入队列中,然后按照它们被触发的顺序依次执行。当队列为空时,事件循环会等待新事件的到来。
console.log('start')
setTimeout(function(){
console.log('timeout')
},0)
Promise.resolve().then(function(){
console.log('promise')
})
console.log('end')
//输出“start”,"end","promise","timeout"
9.什么是原型继承?如何使用原型继承?
原型继承是指在Javascript中使用原型链来实现继承。子对象从其原型对象继承属性和方法。
可以使用Object.create()
方法来创建一个继承来自另一个对象的新对象。
const parent = {
name:'John',
age:35,
sayHello(){
console.log(`Hello,my name is ${this.name} and I'm ${this.age} years old!`)
}
}
const child = Object.create(parent)
child.name="Bob"
child.age = 10
child.sayHello()
//结果为 Hello,my name is Bob and I'm 10 years old!
四、VUE篇
1.什么是Vue?
2.Diff算法
3.Vue的组件通信有哪些方式?
1.props/ $emit(父子间传递常用方式)
父组件A通过props的方式向子组件B传递
B向A通过在B组件中$emit,A组件中v-on的方式实现
//App.vue父组件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
//users子组件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //这个就是父组件中子标签自定义名字
type:Array,
required:true
}
}
}
</script>