【易错点】：
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>
时间： 2024-10-13 01:02:43