<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<box2 :num1="a" :num2="b" :num3="c" :num4="d"></box2>
<box2 v-bind="numObj"></box2>
</div>
<template id="button_counter">
<button @click="count++">点{{count}}次</button>
</template>
<template id="div_box2">
<p>num1:{{num1}}</p>
<p>num2:{{num2}}</p>
<p>num3:{{num3}}</p>
<p>num4:{{num4}}</p>
<div style="background-color: red">div_box2<button-counter></button-counter></div>
</template>
<script src="js/vue.3.2.2.js"></script>
<script>
//注册一个局部组件
const Counter={
data(){
return{
count: 0
}
},
template:'#button_counter'
}
const Box={
props:{
total:Number,
num1:String,
num2:String,
num3:String,
num4:String
},
data(){
return{
myTotal:this.total
}
},
components: {
'button-counter':Counter
},
template:'#div_box2'
}
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
appCount:100,
a:100,
b:200,
c:300,
d:400,
numObj:{
num1:100,
num2:200,
num3:300,
num4:400
}
}
},
components:{
// 'button-counter':Counter,
'box2':Box
}
}).mount('#app');
</script>
</body>
</html>
