组件定义:实现应用中局部功能代码和资源的集合。
分类:非单文件组件,单文件组件
vue使用组件的三大步骤
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
注意区别模块化,简单说模块就是一个js文件,而组件是代码集合(html/css/js)。
下面我们简单写一些组件
<body>
<div id="root"></div> // 写一个容器 交给vue管理
<script type="text/javascript">
const hello = Vue.extend({ // 定义一个hello组件
template: ` <div>
<h3>hello 小贵</h3>
</div>`,
})
const student = Vue.extend({ // 定义一个student组件 下面嵌套进school组件
template: `<div>
<h2>学生姓名:{{sName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>`,
data() {
return {
sName: '小贵',
age: 22,
}
},
})
const school = Vue.extend({ // 定义一个school组件
template: ` <div>
<h2>学习名称:{{schoolName}}</h2>
<h2>学习名称:{{address}}</h2>
<student></student>
</div>`,
data() {
return {
schoolName: '门头沟学院',
address: '北京'
}
},
components: { //基本组件嵌套
student //学生组件嵌套进学校组件
}
})
// Vue.component('school',school) //全局注册
const app = Vue.extend({ //这个app组件作为所有组件的管理者 所有组件写在这里
template: ` <div> //其他组件以组件标签写给他
<school></school>
<hello></hello> //放两个注意给一个根节点包住他们
</div>
`,
components: {
school, //注册组件
hello
}
})
const vm = new Vue({
el: '#root',
// components: { //局部注册
// school: school,
// student: student,
// hello:hello
// }
template: `
<app></app> //最后把app这个组件写在这里,这样所有的内容我们都交给vue管理了
`,
components: {
app: app
}
})
</script>
</body>