【易错点】： 
　　　　1.   组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。
　　　　2.   组件名称采用横杠间隔命名时，第一个字母大写会报错。
 
写法一：全局组件
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">
　　　　<Demo></Demo>

    </div>

</body>

<script src="vue.js"></script>

<script>

    Vue.component("Demo",{

        template:"<h3>全局组件</h3>"

    })

    new Vue({

        el:"#app"

    })

</script>

</html>

写法二：全局组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">
　　　　<my-temp></my-temp>

    </div>

    <template id="DemoTemp">

        <h3>全局组件</h3>

    </template>

</body>

<script src="vue.js"></script>

<script>

    var Home = {

        template:"#DemoTemp"

    };

    Vue.component("my-temp",Home)

    new Vue({

        el:"#app"

    })

</script>

</html>

写法三：局部组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <my-temp></my-temp>

</div>

<template id="DemoTemp">

    <h3>局部组件</h3>

</template>

</body>

<script src="vue.js"></script>

<script>

    var Home = {

        template:"#DemoTemp"

    };

//    Vue.component("my-temp",Home)

    new Vue({

        el:"#app",

        components:{

            "my-temp":Home

        }

    })

</script>

</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. Html.DropDownListFor练习

    今天练习Html.DropDownListFor(). 在网页开发过程中,这个DropDownList功能定会少不了.让用户能显式选择需求的选项.先来看看下面实时操作,Category这个字段是一个外 ...

  2. WPF备忘录（5）怎样修改模板中的控件

    首先,想问大家一个问题,你们如果要给一个Button添加背景图片会怎么做?(呵呵,这个问题又点小白哈) 是这样吗? <Button Height="57" Horizonta ...

  3. 深入理解Java线程池：ThreadPoolExecutor

    线程池介绍 在web开发中,服务器需要接受并处理请求,所以会为一个请求来分配一个线程来进行处理.如果每次请求都新创建一个线程的话实现起来非常简便,但是存在一个问题: 如果并发的请求数量非常多,但每个线 ...

  4. Mysql系统知识梳理

    1 数据库分类 MySQL Oracle redis 2 MySQL 存储引擎有哪些 ENGINE=InnoDB 提供事务安全表,支持外键. MyISAM Memory数据存入内存中,如果内存出现异常 ...

  5. java - 线程等待与唤醒

    Java多线程系列--“基础篇”05之 线程等待与唤醒 概要 本章,会对线程等待/唤醒方法进行介绍.涉及到的内容包括:1. wait(), notify(), notifyAll()等方法介绍2. w ...

  6. linux系统编程：open常用参数详解

    open用于打开一个文件,通过设置不同的flag,可以让进程只读,只写,可读/可写等操作 一.对一个不存在或者存在的文件(test.txt),进行写入操作 /*==================== ...

  7. Java 并发：Executor ExecutorService ThreadPoolExecutor

    Executor Executor仅仅是一个简单的接口,其定义如下 public interface Executor { void execute(Runnable command); } 作为一个 ...

  8. ERP、CRM、CMS

    ERP: 全称:Enterprise Resource Planning 解释:企业资源计划. ERP 是一种主要面向制造行业进行物质资源.资金资源和信息资源集成一体化管理的企业信息管理系统.ERP ...

  9. cf900D. Unusual Sequences(容斥 莫比乌斯反演)

    题意 题目链接 Sol 首先若y % x不为0则答案为0 否则,问题可以转化为,有多少个数列满足和为y/x,且整个序列的gcd=1 考虑容斥,设\(g[i]\)表示满足和为\(i\)的序列的方案数,显 ...

  10. FineReport8.0如何连接FineIndex取数分析

    1. 描述 在3.7及之前版本,FineReport连接都是通过安装多维数据集插件,然后通过多维数据库的方式连接FineBI(3.4-3.6对应711,3.7对应8.0),从4.0版本开始,FineR ...