vue组件的使用
注意点：
声子-->挂子-->用子
- 声子：使用组件需先声明(创建)子组件，子组件中不能存在el属性
- 挂子：在使用的组件(谁使用谁就是当前子组件的父组件)中，进行conpontents中挂载
- 用子：这里使用需要包含在一个闭合标签中(例如：<div>组件名</div>)，用子可以是vue实例的tamplate属性或者el属性
一、局部组件
方式一：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div >
<Vheader></Vheader>
</div>
</body>
<script type="text/javascript" src="../vue02/js/vue.js"></script>
<script type="text/javascript">
// 组件的创建
let Vheader = {
// data必须是一个函数
data:function() {
//必须有个return返回，可以为空对象
return {
text1: "快乐style"
};
},
template: `
<div>
<h2>{{ text1 }}</h2>
</div>
`
};
// 创建vue对象
var app = new Vue({
el: "#app",
data: {},
components: {
Vheader
}
})
</script>
</html>方式二：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div >
<!-- 用子 -->
<Vheader></Vheader>
</div>
</body>
<script type="text/javascript" src="../vue02/js/vue.js"></script>
<script type="text/javascript">
// 组件的创建(声子))
// 子组件2，被子组件使用
let Vheader2 = {
// data必须是一个函数
data:function() {
//必须有个return返回，可以为空对象
return {
text2: "我是Vheader的子组件"
};
},
template: `
<div>
<h3>{{ text2 }}</h3>
</div>
`
};
// 组件的创建(声子))
// 子组件，被vue实例使用
let Vheader = {
// data必须是一个函数
data:function() {
//必须有个return返回，可以为空对象
return {
text1: "快乐style"
};
},
template: `
<div>
<h2>{{ text1 }}</h2>
<Vheader2></Vheader2>
</div>
`,
// 挂子
components: {
Vheader2
}
};
// 创建vue对象
var app = new Vue({
el: "#app",
data: {},
// 挂子
components: {
Vheader
}
})
</script>
</html>二、全局组件
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div >
<Vheader></Vheader>
</div>
</body>
<script type="text/javascript" src="../vue02/js/vue.js"></script>
<script type="text/javascript">
// 组件的创建
Vue.component('Vheader', {
// data必须是一个函数
data:function() {
//必须有个return返回，可以为空对象
return {
text1: "快乐style"
};
},
template: `
<div>
<h2>{{ text1 }}</h2>
</div>
`
});
// 创建vue对象
var app = new Vue({
el: "#app",
data: {},
})
</script>
</html>