首页 > 其他 > 详细

vue2.0学习笔记之组件

时间:2017-07-09 20:31:00      阅读:132      评论:0      收藏: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学习笔记之组件

原文:http://www.cnblogs.com/hcxy/p/7142459.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!