一、Vue组件使用的三大步
1、定义组件
2、注册组件
3、使用组件
二、定义组件
1、Vue.extend({})与new Vue({})基本相似，Vue.extend不适用el，data要写返回函数
2、template用来写html结构，注意要加div包裹起来
3、简写
const s = {
template:`
<div>
<h2>{{content}}</h2>
</div>
`,
data() {
return {
content:'Hello World'
}
},
}4、name: 名称，只在Vue开发者工具中起作用，在开发者工具组显示名称
三、注册组件
1、局部注册
new Vue({
...,
compents:{
组件使用名: 组件定义名,
}
})2、全局组件
Vue.component('使用组件名称', 组件定义名)四、使用组件
在模板容器中 <使用组件名称></使用组件名称>，或 <使用组件名称/>
注意：<使用组件名称/>，这种格式只有在脚手架中起作用
五、组件名称的格式
1、单词 首字母小写 或 首字母大学
2、多词 xx-xx 或 大驼峰(在Vue脚手架中不报错)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非单文件组件</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<!-- 使用组件 -->
<school></school>
<hr>
<student></student>
<hr>
<stest></stest>
</div>
<script type="text/javascript">
//创建组件
const school = Vue.extend({
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data() {
return {
name:'常州工学院',
address: '常州'
}
},
})
//创建组件
const student = Vue.extend({
template:`
<div>
<h2>学生名称：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
name:'jojo',
age: 18
}
},
})
// 简写 创建组件
const s = {
template:`
<div>
<h2>{{content}}</h2>
</div>
`,
data() {
return {
content:'Hello World'
}
},
}
// 全局注册组件
Vue.component('stest', s)
new Vue({
el:'#container',
// 注册组件
components:{
school:school,
student:student,
}
})
</script>
</body>
</html>六、组件嵌套
app组件，vue组件之下，其他组件之上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件嵌套</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<divid="container">
</div>
<script type="text/javascript">
// 创建学生组件, student组件嵌套在school组件里,注意要先写student组件
const student = {
template:`
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
name:'jojo',
age:18
}
},
}
// 创建 school 组件
const school = {
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name:'常州工学院',
address:'常州'
}
},
//注册student组件
components:{
student:student
},
}
// 创建info组件
const showinfo = {
template:`
<h2>{{msg}}</h2>
`,
data() {
return {
msg:'Hello World!'
}
},
}
//创建 app 组件，vue之下， 万人之上
const app={
template:`
<div>
<school></school>
<showinfo></showinfo>
</div>
`,
components:{
school:school,
showinfo:showinfo
}
}
new Vue({
el:'#container',
template:`
<app></app>
`,
components:{
app:app
}
})
</script>
</body>
</html>
