【易错点】： 
　　　　1.   组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。
　　　　2.   组件名称采用横杠间隔命名时，第一个字母大写会报错。
 
写法一：全局组件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
    　　　　<Demo></Demo>
  9.     </div>
  10. </body>
  11. <script src="vue.js"></script>
  12. <script>
  13.     Vue.component("Demo",{
  14.         template:"<h3>全局组件</h3>"
  15.     })
  16.     new Vue({
  17.         el:"#app"
  18.     })
  19. </script>
  20. </html>

写法二：全局组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="app">
    　　　　<my-temp></my-temp>
  9.     </div>
  10.     <template id="DemoTemp">
  11.         <h3>全局组件</h3>
  12.     </template>
  13. </body>
  14. <script src="vue.js"></script>
  15. <script>
  16.     var Home = {
  17.         template:"#DemoTemp"
  18.     };
  19.     Vue.component("my-temp",Home)
  20.     new Vue({
  21.         el:"#app"
  22.     })
  23. </script>
  24. </html>

写法三：局部组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <my-temp></my-temp>
  10. </div>
  11. <template id="DemoTemp">
  12.     <h3>局部组件</h3>
  13. </template>
  14. </body>
  15. <script src="vue.js"></script>
  16. <script>
  17.     var Home = {
  18.         template:"#DemoTemp"
  19.     };
  20. //    Vue.component("my-temp",Home)
  21.     new Vue({
  22.         el:"#app",
  23.         components:{
  24.             "my-temp":Home
  25.         }
  26.     })
  27. </script>
  28. </html>

vue2.0学习笔记之组件的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套+动画

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

  2. vue2.0学习笔记之路由（二）路由嵌套

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

  3. Vue2.0学习笔记一 ：各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  4. vue2.0学习笔记（第八讲）（vue-cli的使用）

    vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...

  5. Vue2.0学习笔记

    环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...

  6. Vue2.0学习笔记：Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  7. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  8. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  9. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

随机推荐

  1. H5+App开发框架汇总

    MUI:http://dcloudio.github.io/mui/(使用H5+app模式,号称是最接近原生,但是目前在手机和电脑浏览器无法使用) app-framework:http://app-f ...

  2. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  3. SQL Server T—SQL 表连接

    一  笛卡尔积 select  *  from  表1,表2 将两表的记录遍历显示 二表的横向连接 1   使用外键关系作为条件 select  *  from   表1,表2  where   表1 ...

  4. ETCD 简介 + 使用

    etcd简介 etcd是一个高可用的分布式键值(key-value)数据库.etcd内部采用raft协议作为一致性算法,etcd基于Go语言实现. etcd是一个服务发现系统,具备以下的特点: 简单: ...

  5. Linux命令行介绍

    一.Linux命令行结尾的提示符有“#”和“$”两种不同的符号,代码如下所示: [root@localhost ~]# ls anaconda-ks.cfg Desktop Documents min ...

  6. python内置函数每日一学 -- abs()

    abs(x) 官方文档解释: Return the absolute value of a number. The argument may be an integer or a floating p ...

  7. HTML标签参考（一）

    hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...

  8. BZOJ5289: [Hnoi2018]排列

    传送门 第一步转化,令 \(q[p[i]]=i\),那么题目变成: 有一些 \(q[a[i]]<q[i]\) 的限制,\(q\) 必须为排列,求 \(max(\sum_{i=1}^{n}w[i] ...

  9. 洛谷P3586 [POI2015]LOG(贪心 权值线段树)

    题意 题目链接 Sol 显然整个序列的形态对询问没什么影响 设权值\(>=s\)的有\(k\)个. 我们可以让这些数每次都被选择 那么剩下的数,假设值为\(a_i\)次,则可以\(a_i\)次被 ...

  10. js-JavaScript实现数字的千位分隔符

    function thousandSeparator(num) { return num && (num .toString().indexOf('.') != -1 ? num.to ...