组件图示
Demo实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的创建</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//局部入口组件的声明
var App={
data(){
return{
}
},
template:`
<div>我是入口组件</div>
`
}
new Vue({
el:"#app",
data(){
return{
}
},
//挂载子组件
components:{
App
},
//父组件直接可以使用
template:`
<App></App>
`
});
</script>
</body>
</html>结果展示
局部组件 即：声明，挂载，使用
组件开发流程图示
Demo演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的使用</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//全局组件
//第一个参数是组件的名字，第二个参数是options
Vue.component('Vbtn',{
template:`
<button type="">按钮</button>
`
});
var Vheader = {
template:`
<div>
我是头部组件
<Vbtn />
</div>
`
};
var Vaside = {
template:`
<div>
我是Vue
<Vbtn />
</div>
`
};
var Vcontent = {
template:`
<div>
我是GeorgeDage
<Vbtn />
</div>
`
};
//1.声明
var App={
template:`
<div>
<Vheader />
<Vaside />
<Vcontent />
</div>
`,
components:{
Vheader,
Vaside,
Vcontent
}
};
new Vue({
el:"#app",
data(){
return{
}
},
//2.挂载
components:{
App
},
//3.使用
template:`
<App></App>
`
});
</script>
</body>
</html>结果展示：
