属性:独立,完成一个整体的逻辑,可以复用。
vue只有一个html
组件分为全局组件和局部组件
全局组件:就是在整个vue项目中可以使用。
template 可视区域
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
//可以使用多次 复用
<cp></cp>
<cp></cp>
<cp></cp>
</div>
<script>
//创建vue应用
let vm = Vue.createApp({})
//全局组件开发 template 可视区域
//现在有2个组件,cp app 在app中播放cp中的东西
const cp={
data(){
return{
mn:'梦华录'
}
},
template:`<p>{{mn}}</p>`
}
const app={
data(){
return{
}
}
}
//注册组件
vm.component('cp',cp)
//挂载到html结构里
vm.mount('#app')
</script>
</body>
</html>
需要提前完成template。
接下来是给template拎出来赋一个id,在原来的地方使用id用。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
<cp></cp>
</div>
<template id = "cp">
<p>{{mn}} <button @click="fun">反馈</button></p>
</template>
<script>
//创建vue应用
let vm = Vue.createApp({})
//全局组件开发 template 可视区域
//现在有2个组件,cp app 在app中播放cp中的东西
const cp={
data(){
return{
mn:'梦华录'
}
},
methods:{
fun(){
alert("影片真好看!")
}
},
template:'#cp'
}
const app={
data(){
return{
}
}
}
//注册组件
vm.component('cp',cp)
//挂载到html结构里
vm.mount('#app')
</script>
</body>
</html>