第一种使用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="js/vue.js"></script>

    <script>

        //全局注册组件

        Vue.component('my-component',{

            template: '#myComponent'

        })

        new Vue({

            el: '#app'

        })

    </script>

</html>

第二种使用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="js/vue.js"></script>

    <script>

        Vue.component('my-component',{

            template: '#myComponent'

        })

        new Vue({

            el: '#app'

        })

    </script>

</html>

第三种 单文件组件

这种方法常用在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="./assets/logo.png">

    <hello></hello>

  </div>

</template>

<script>

// 导入组件

import Hello from './components/Hello'

export default {

  name: 'app',

  components: {

    Hello

  }

}

</script>

<!-- 样式代码 -->

<style>

#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;

}

</style>

参考文献：

　　　　1、关于vue 自定义组件的写法与用法

　　　　2、手把手教你写 Vue UI 组件库

　　　　3、vue组件编写

vue组件的3种书写形式的更多相关文章

  1. Vue组件的三种调用方式

    最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...

  2. html中创建并调用vue组件的几种方法

    最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...

  3. 注册vue组件的几种方式

    1,全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2,局部注册 var Child = { template: '<div&g ...

  4. [vue]组件最佳实战

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  5. vue组件如何被其他项目引用

    自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...

  6. 自己编写并发布一个Vue组件

    自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

  7. 认识Vue组件

    前言 Vue.js是一套构建用户界面的渐进式框架(官方说明).通俗点来说,Vue.js是一个轻量级的,易上手易使用的,便捷,灵活性强的前端MVVM框架.简洁的API,良好健全的中文文档,使开发者能够较 ...

  8. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  9. 如何封装使用api形式调用的vue组件

    在实际开发中一般有两种封装vue组件的方法:一种就是常用的的通过props父组件传值给子组件的方法: 子组件 父组件: 还有一种就是通过调用api的形式,下面例子是本人在实际项目中封装的一个自定义图标 ...

随机推荐

  1. wps 2016 个人版 重新开始编号

    wps文档重新开始编号,继续编号,自定义编号 首先选中这一行 鼠标右键选中项目符号和编号 单击项目符号和编号,你可以重新开始编号为1,继续前一列表,还可自定义,单击确定按钮就可以实现你想要的结果 效果 ...

  2. Android布局需要知道的基础知识

    eclipse配置环境变量: 1.在 eclipse 中的 Window --> preferences  --> Android(安装了ADT的前提下才能看到Android) --> ...

  3. 远程连接Oracle设置

    1:打开net manager:开始->程序->oracle->配置和移植工具->Net Manager 2:添加服务器名->名子自定义,一般根据项目自定义,自己知道就行 ...

  4. jQueryAjax模拟按键消抖(可设置抖动延迟时间)

    在硬件中,按键等都会有抖动现象,如何消除抖动,不重复触发事件呢,这就要用到消抖机制了. 这是我用jQuery模拟硬件消抖原理,额,可能是吧...又不对的地方,希望有高手指点指点. <!DOCTY ...

  5. C++对象的内存模型

    1. 普通对象模型 对象是如何在内存中布局的? 成员 存放位置 访问范围 非静态数据成员 每一个对象体内 为该对象专有 静态数据成员 程序的静态存储区内,只有一份实体 为该类所有对象共享 成员函数(静 ...

  6. jquery-pjax

    项目介绍: Pjax是jQuery的一个插件,Pjax即pushState + Ajax,是实现无刷新Ajax加载并解决浏览器前进和后退问题的一个开源实现. 在2012年8月28日发布0.9版本. P ...

  7. POJ_2115_扩展欧几里德

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23673   Accepted: 6540 Descr ...

  8. mac 上执行 rm -rf /

    # 很可怕的指令,清空磁盘所有资料,千万不要用 sudo 尝试,吓的小心肝差掉跳出来 rm -rf / 无聊,想执行rm -rf /会怎样,想起没加sudo时对~/download执行提示权限不足,被 ...

  9. Having子句用法

    Having基础用法 集合结果指定条件 注:HAVING子句中能够使用三种要素:常数,聚合函数,GROUP BY子句中指定的列名(聚合建) HAVING子句: 用having就一定要和group by ...

  10. 【转载】Jmeter分布式部署测试-----远程连接多台电脑做压力性能测试

    在使用Jmeter进行接口的性能测试时,由于Jmeter 是JAVA应用,对于CPU和内存的消耗比较大,所以,当需要模拟数以万计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至会引起J ...