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

第一种使用script标签

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

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

    <script type="text/x-template" id="myComponent">//注意 type 和id。
      <div>This is a component!</div>
    </script>
  </body>
  <script src="/UploadFiles/2021-04-02/vue.js">

第二种使用template标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <template id="myComponent">
      <div>This is a component!</div>
    </template>
  </body>
  <script src="/UploadFiles/2021-04-02/vue.js">

第三种 单文件组件

这种方法常用在vue单页应用中。详情看官网:https://cn.vuejs.org/v2/guide/single-file-components.html

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

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: '欢迎!'
  }
 }
}
</script>

app.vue

<!-- 展示模板 -->
<template>
 <div id="app">
  <img src="/UploadFiles/2021-04-02/logo.png">

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

标签:
vue,组件,书写形式

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“3种vue组件的书写形式”

暂无“3种vue组件的书写形式”评论...