本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下
第一种
使用script标签<-- 注意：使用<script><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>内定义的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>。-->
<script type="text/x-template" id="myComponent">//注意 type 和id。
<div>This is a component!</div>
</script>第二种
使用template标签第三种
单文件组件这种方法常用在vue单页应用中。详情看官网：nofollow" href="https://cn.vuejs.org/v2/guide/single-file-components.html">https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中
{{ msg }}
app.vue
logo.png">
@H_404_77@
#app {
font-family: 'Avenir',Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
