3种vue组件的书写形式

发布时间：2020-12-17 02:41:43 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下第一种使用script标签 -- 注意：使用script标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略script标签内定义的内容。--script type="

本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下

第一种

使用script标签

<-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->

<script type="text/x-template" id="myComponent"&gt;//注意 type 和id。
  <div>This is a component!</div>
</script>

第二种

使用template标签

<template id="myComponent"&gt;
  <div>This is a component!</div>
</template>

第三种

单文件组件

这种方法常用在vue单页应用中。详情看官网：

创建.vue后缀的文件,组件Hello.vue，放到components文件夹中

app.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!