Vue实例中的配置项: data、computed、watch、methods 以及生命周期钩子函数(created,mounted)等
Vue 全局组件
<body>
<div id="app">
<home></home>
</div>
<script src='./vue.js'></script>
<script>
//创建一个全局组件
Vue.component('home', {
template: `
<div>
<h1>一段模板内容</h1>
<span>{{ msg }}</span>
<button @click='add'>渡梵尘</button>
</div>
`,
//一个组件的 data 选项必须是一个函数
data() {
return {
msg: '模板为自己提供的数据'
}
},
methods: {
add() {
this.msg = '点击切换的内容'
}
}
})
//Vue实例
const vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
Vue局部组件
<body>
<div id="app">
<home-a></home-a>
<home-b></home-b>
</div>
<script src="./vue.js"></script>
<script>
var homeA = {
template: `
<div>
<h1>局部组件</h1>
</div>
`
}
var homeB = {
template: `
<div>
<h2>局部组件A中的子组件</h2>
</div>
`
}
const vm = new Vue({
el: '#app',
//对于 components 对象中的每个属性来说,
//其属性名home就是自定义元素的名字,其属性值homeA就是这个组件的选项对象
components: {
'home-a': homeA,
'home-b': homeB
}
})
</script>
</body>
局部组件中的父子组件
<script>
const vm = new Vue({
el: '#app',
components: {
'home-a': {
template: `
<div>
<h1>局部组件</h1>
<home-b></home-b>
</div>
`,
components: {
'home-b': {
template: `
<div>
<h1>局部组件ffffffff</h1>
</div>
`
}
}
}
}
})
</script>