vue2.0学习笔记之组件

Posted 2020-09-27 亲爱的混蛋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vue2.0学习笔记之组件的主要内容，如果未能解决你的问题，请参考以下文章

vue2.0学习笔记之生命周期

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例