标签：content ide sid head 分享 第一步 row 就是 rap
vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会影响到其它所有实例。
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.main {
width: 100%;
}
body {
color: #fff;
}
.head {
width: 100%;
height: 70px;
background-color: purple;
text-align: center;
font-size: 20px;
line-height: 70px;
}
.wrap {
width: 100%;
height: 1200px;
}
.wrap .aside {
width: 30%;
height: 1200px;
background-color:green;
float: left; /*侧边栏浮动*/
}
.wrap .content {
width: 70%;
height: 1200px;
background-color: saddlebrown;
float: left; /*内容区浮动*/
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
// 打油诗：先声子再挂子再用子
var Vheader = { // 先声明头部组件
template:`
<header class="head">
我是头部
</header>
`
};
var Vaside = { // 声明侧边栏组件
template:`
<div class="aside">
我是侧边栏
</div>
`
};
var Vcontent = { // 声明内容区组件
template:`
<div class="content">
我是内容区域
</div>
`
};
// 第一步.声明入口组件
/*
1.头部组件
2.侧边栏
3.内容组件
4.脚步组件
以上组件分别挂载到入口组件里面去。
*/
var Vmain = { // 局部组件
template:`
<div class=‘main‘>
<Vheader></Vheader>
<div class="wrap">
<Vaside/>
<Vcontent/>
</div>
</div>
`,
components:{
// 等价于Vheader:Vheader,当两个词一模一样时可以这样简写：
Vheader, // 挂载子组件：头部组件
Vaside, // 挂载子组件：侧边栏组件
Vcontent
}
};
new Vue({
el:"#app", // 注意一个vue里面只有一个el
//第三步.使用子组件
template:"<Vmain></Vmain>",
data: {
},
components:{
//第二步.挂载子组件
Vmain:Vmain
}
});
</script>
</body>
组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
显示效果如下：
打油诗：1.声子 2.挂子 3.用子
标签：content ide sid head 分享 第一步 row 就是 rap
原文地址：https://www.cnblogs.com/xiugeng/p/9699430.html
