将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。
组件的类型
组件开发流程：声明、注册、使用
demo 组件使用流程
<div id="app">div>
<script>var myHeader={ //声明一个组件 template:'this is the header area'} var myBody={
template:'this is the body area'} var myFooter={
template:'this is the footer area'} new Vue({
el:'#app',
components:{ //注册组件 myHeader,
myBody,
myFooter
},
template:'' //使用组件 }); script>声明是全局声明，但需要在每一个使用Vue对象中进行注册。
使用组件有2种方式
声明组件时是用了语法糖的
// 原来的写法var myHeader=Vue.extend({
template:'this is the header area'}) // 语法糖var myHeader={
template:'this is the header area'}效果都一样，但使用语法糖明显要简便些
组件声明、注册的另一种方式
// 声明+注册一个组件Vue.component('MyHeader',{
template:'this is the header area'})
Vue.component('MyBody',{
template:'this is the body area'})
Vue.component('MyFooter',{
template:'this is the footer area'}) new Vue({
el:'#app',
template:'' //使用组件});声明、注册都是全局的，在Vue对象中可以直接使用
组件中除了template，还可以有其它部分，比如data。
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
