【易错点】： 
　　　　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. 传统项目转前端工程化——路由跳转时出现浏览器锁死和白屏【该死的同步ajax】

    [一开始我想到是该死的同步ajax,但我没验证,把他忽略了] 在探索前端工程化vue-cli做spa时,从搜索结果页跳转商品详情页时,因为详情页有很多ajax请求,并且都用的同步请求,就会导致请求时浏 ...

  2. [转]Reporting Service部署之访问权限

    本文转自:https://www.cnblogs.com/lonelyxmas/p/4112638.html 原文:Reporting Service部署之访问权限 SQL Server Report ...

  3. [javaSE] 集合框架（体系概述）

    为什么出现集合类 为了方便对多个对象的操作,对对象进行存储,集合就是存储对象最常用的一种方式 数组和集合的不同 数组是固定长度的,集合是可变长度的 数组可以存储基本数据类型,集合只能存储对象 数组只能 ...

  4. 线程基础的一些理解（一）（java）

     一.多线程的基本概念 线程是指进程中的一个执行场景,也就是执行流程,所以我们首先要聊一聊进程,以及进程和线程的关系 1.什么是进程? 一个进程对应一个应用程序,就像我们在windows系统中启动Wo ...

  5. linux系统编程：自己动手写一个cp命令

    cp命令的基本用法: cp 源文件 目标文件 如果目标文件不存在 就创建, 如果存在就覆盖 实现一个cp命令其实就是读写文件的操作: 对于源文件: 把内容全部读取到缓存中,用到的函数read 对于目标 ...

  6. Django中连接redis

    1. 安装 pip install django-redis 2. settings中配置 CACHES = { "default": { "BACKEND": ...

  7. BZOJ5305: [HAOI2018]苹果树

    传送门 果然只有我这种菜鸡才会用这种菜鸡做法QwQ 对于一类要求期望的题目,有一个无脑的做法: 设概率为 \(f\),期望为 \(g\) 每次合并两个二元组 \(<f_1,g_1>,< ...

  8. @Schedul 中cron的命名规则

    @Schedul注解的定时任务详解 1.springboot集成schedule由于Spring Schedule包含在spring-boot-starter基础模块中了,所有不需要增加额外的依赖. ...

  9. SSM框架下的redis缓存

    基本SSM框架搭建:http://www.cnblogs.com/fuchuanzhipan1209/p/6274358.html 配置文件部分: 第一步:加入jar包 pom.xml <!-- ...

  10. ionic3 下创建ionic1项目

    一 start命令 ionic start sdscapp --type=ionic1 ——添加平台命令 ionic cordova platform add android