vue2.0学习笔记之组件

时间：2022-03-27 21:09:54
【易错点】：  　　　　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>

 

标签：

相关文章