vue2.0学习笔记之组件

Posted 亲爱的混蛋

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模板中的路由简单配置案例

vue2.0组件快速入门

Vue2.0笔记——组件

vue2.0的变化

vue2.0学习之路由