vue2.0学习笔记之组件

【易错点】：

　　　　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>