1、使用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>
　这种方式可以将以template定义的组件放在当前页面中，也可以以单独的文件形式存在，然后再使用的页面中使用import引入即可。

2、使用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类型为 text/x-template; 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>

Vue组件的定义方式的更多相关文章

  1. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  2. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  3. avalon1.5+中组件的定义方式

    avalon在1.5之后引入新的组件定义和使用方式,其总的宗旨是为了使定义和使用组件更加简单 组件库的概念 首先,需要注意的是,引入了组件库的概念(也可以理解为namespace),之后定义的组件必须 ...

  4. Vue组件的定义、注册和调用

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...

  5. vue 组件间传值方式

    /* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 <v-header :title="title"></v-header> 2.在子组件里 ...

  6. vue 组件的定义

    1.什么是组件? 组件的出现,就是为了拆分vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 2.组件化和模块化的不同? 模块化: ...

  7. vue组件常用声明方式

    一.前言 这是自己重新写的一个,感觉以前的太写了很多不必要的方式 实际当中基本不会用的 所以自己写了一个常用的组件什么方式 更加的通俗易懂 二.代码如下 <!DOCTYPE html> & ...

  8. vue组件的调用方式

    vue中一般都会把公共内容作为一个组件去布局,但是如何引用自定义的组件呢?下面就是vue调用自定义组件的方式,主要代码如下: <template> <div> <span ...

  9. Vue学习笔记【23】——Vue组件（组件的定义）

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

随机推荐

  1. DWZ（二）：经常使用组件了解

           上篇博客中我们大致明确了DWZ框架.以及它的一些优势,接下来的这篇博客是具体介绍了DWZ框架中一些经常使用组件的使用.        经常使用组件列表:        Ajax 链接扩展 ...

  2. 微软ASP.NET网站部署指南（8）：部署Code-Only更新

    1.  综述 初始化部署以后,你须要继续维护和更新你的网站.本章节将向你展示一个不包含数据库改变的部署升级流程.(下一章节将展示数据库改变的部署升级流程.) 提醒:假设依据本章节所做的操作出现错误信息 ...

  3. LoadRunner压力测试心得总结

    一.虚拟用户迭代一次的时间对整个压力场景的影响. 1.虚拟用户迭代一次的时间大于等于压力场景的上行周期. 此种情况,在压力场景的上行周期中,所有虚拟用户根据压力场景设置的策略全部依次运行.压力场景的上 ...

  4. url 模式录制脚本web_concurrent_start和web_concurrent_end

    LoadRunner函数中文翻译系列之三--Concurrent Groupweb_concurrent_start 语法: int web_concurrent_start ( [char * Co ...

  5. Linq------错误： Unable to determine the principal end of an association between the types

    [Table("bma_stores")] public class Store { //加上即可 [Required] public virtual Product Produc ...

  6. iOS开发之-- textview 光标起始位置偏移

    使用textview的时候,会发生光标偏移的情况,其实是因为iOS7里导航栏,状态栏等有个边缘延伸的效果在. 把边缘延伸关掉就好了.代码如下 //取消iOS7的边缘延伸效果(例如导航栏,状态栏等等) ...

  7. iOS 7 SDK: 如何使用后台获取（Background Fetch）

    本文转载至 http://www.cocoachina.com/applenews/devnews/2013/1114/7350.html 本文主要教你如何使用iOS 7 SDK多任务处理API--B ...

  8. iOS开发经验总结（一）

    本文转载至 :http://dreamahui.iteye.com/blog/1878650 软件开发方面 1.  在每个页面的入口和出口(一般是viewDidLoad和dealloc)打上日志,可以 ...

  9. Spring源码从开始到放弃(一)

    参考<Spring技术内幕>分析. github上面有spring的源码(https://github.com/spring-projects/spring-framework) spri ...

  10. XE10 塔建 Android 开发环境 （已测试通过)

    XE10 塔建 Android 开发环境 1. E:\DevCSS\Android\adt-bundle-windows-x86-20131030\adt-bundle-windows-x86-201 ...