上海人才网站官网入口台州网站建设推广

一、显式关闭标签

1、定义：
               所有的 HTML 标签都必须有一个对应的结束标签。
               自闭合标签也必须使用 / 来关闭。

<template>
     <div>
       <p>这是一个段落</p>
       <img src="image.png" alt="描述" />
     </div>
</template>

2、优点
      一致性：遵循 XML 规则，模板结构更加一致和可预测。
      避免解析错误：显式关闭标签可以避免由于浏览器自动关闭标签而导致的解析错误。
      工具支持：许多工具和编辑器对 XML 规则有更好的支持，有助于提高开发效率和代码质量。

 二、隐式关闭标签（就是没有 "/" 结束标签符号的， Vue 的模板解析器支持任意标签使用 /> 作为标签关闭的标志）

1、定义：
某些标签可以省略结束标签，浏览器会自动关闭这些标签。
例如：<br>、<img>、<hr> 等自闭合标签在 HTML5 中可以不显式关闭。

<template>
     <div>
       <p>这是一个段落
       <img src="image.png" alt="描述">
     </div>
   </template>

注意：

        1、在单文件组件中推荐子组件使用 paseCase的标签名，以此区分原生的html标签(元素)，原生的html标签名不区分大小，但是vue单文件组件在编译中区分大小写。可以用  /> 来关闭一个标签
         2、直接在 DOM 中书写模板，模板的编译需要遵从浏览器中 HTML 的解析行为，这时应该用 kebab-case 形式并显式地关闭这些组件的标签
         3、文件名：使用 kebab-case；
              组件定义：在组件的 name 属性中使用 PascalCase，例如 MyComponent、UserProfile。
              模板中使用组件：在模板中使用 PascalCase 的名称，例如 <MyComponent /> 和 <UserProfile />。