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. Run time setting设置详解

    Pacing转载自belie 1>     Run time setting设置中的Browser:‘Simulate a new user on each iteration’选项例如:录制了 ...

  2. Windows网络接口API函数

    Windows提供了一套非常轻量级的网络函数,方便进行网络应用开发,整理出来供参考使用. The following functions are used in Windows networking: ...

  3. Spring_day04--课程安排_回顾SSH框架知识点_SSH框架整合思想

    Spring_day04 上节内容回顾 今天内容介绍 回顾SSH框架知识点 Hibernate框架 Struts2框架 Spring框架 SSH框架整合思想 整合struts2和spring框架 Sp ...

  4. m2014_c：C 工具库1：list

    转自:http://www.cnblogs.com/sniperHW/archive/2012/04/02/2429607.html 近来考虑将项目基础框架的开发语言从C++换成C,免不了要编写一大堆 ...

  5. css+jq写的小小的移动端按钮的动画改变（三个很闲变成一个叉号）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. java基础---->java中nio的使用（一）

    JDK 1.4 中引入的新输入输出 (NIO) 库在标准 Java 代码中提供了高速的.面向块的 I/O.今天我们就简单的学习一下nio的知识.我笑,便面如春花,定是能感动人的,任他是谁. nio的简 ...

  7. iOS 按钮文字加划掉线

    UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(, , , )]; NSDictionary *normalTitleAttribu ...

  8. js 中 this 的指向问题

    高程上的大前提: 1.this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象:不过,匿名函数的执行环境具 ...

  9. Oracle的存储过程编程

    是一个可以用编程的方式来操作SQL的集合. | |目录 1什么是存储过程? 2存储过程的优点? 3存储过程的缺点? 4存储过程的用途? 5存储过程注意事项? 6如何写存储过程? 7如何执行存储过程? ...

  10. 【题解】P5151 HKE与他的小朋友

    [题解]P5151 HKE与他的小朋友 实际上,位置的关系可以看做一组递推式,\(f(a_i)=f(a_j),f(a_j)=f(a_t),etc...\)那么我们可以压进一个矩阵里面. 考虑到这个矩阵 ...