第一种使用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. 5.30dao-service-controller层，mybatis自动生成。(获取根据id主键获取指定详细数据)

    获取权限详细数据:(参考)                    1.controller:1.注入Servcie调用方法findConsumerById(参数是id);               ...

  2. 详细解读css中的浮动以及清除浮动的方法

    对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...

  3. 手动触发dom节点事件代码

    在爬代码过程中,碰到一个稀奇古怪的问题.需要手工修改select的值,然后手动触发select的change事件,但使用网络上查到的通过trigger.onchange()事件触发都不执行,没办法,只 ...

  4. Java_Web之分层架构

    当我们把业务处理的代码与JSP代码混在一起,不易于阅读,不易于代码维护,这就需要分层. 分层模式 1.分层模式是最常见的一种架构模式 2.分层模式是很多架构模式的基础 分层 将解决方案的组件分隔到不同 ...

  5. 调试程序时找不到DLL的解决办法

    最近调试程序的经常弹出找不到DLL.只好一个个把DLL拷贝到程序目录下(我是拷贝到源文件目录,也有人说是Debug目录). 其实可以这么设置: 项目属性->配置属性->调试->工作目 ...

  6. 数据清理，预处理 pandas dataframe 操作技巧 总结

    dsoft2 = data1.loc[(data1['程'] == "轻") | (data1['程'] == "中")]设置x下标plt.xticks(np. ...

  7. golang入门-defer

    package main import "fmt" func main() { i := 5 tmap := make(map[string]int, 5) tmap[" ...

  8. vfs:结构体对象

    VFS结构体 super_block 存储一个已安装的文件系统的控制信息,代表一个已安装的文件系统:每次一个实际的文件系统被安装时, 内核会从磁盘的特定位置读取一些控制信息来填充内存中的超级块对象.一 ...

  9. UVA489 - Hangman Judge【紫书例题4.2】

    题意:就是给出一个字符串,让你去一个一个猜测,相同字母算一次,如果是之前猜过的也算错,如果你在错7次前猜对就算你赢,文章中是LRJ的例题代码. #include<stdio.h> #inc ...

  10. 在LinuxMint19上安装搜狗拼音输入法

    写在前面 由于Linux mint是基于Ubuntu的深度改造,所以按照网上针对Ubuntu的安装方法基本都是有用的.LinuxMint自身就携带了IBUS和fcitx两个框架.然而并非每次都能正常使 ...