?
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>
.group1 {
background-color: rgb(250, 245, 217);
border: 1px rgb(141, 141, 141) solid;
margin-bottom: 20px;
padding-left: 20px;
}
.group2 {
background-color: rgb(216, 216, 216);
border: 1px rgb(149, 149, 149) solid;
margin-bottom: 20px;
padding-left: 20px;
}
button {
width: 200px;
height: 40px;
margin-bottom: 20px;
margin-top: 10px;
font-size: 18px;
}
#box_2 div{
background-color: rgb(206, 231, 231);
height: 70px;
width: 300px;
line-height: 70px;
padding-left: 10px;
}
/* .box1{background-color: rgb(241, 150, 150);} */
</style>
<body>
<div id="box">
<div class="group1">
<!-- 第三步：使用组件,编写组件标签 -->
<group1></group1>
</div>
<hello></hello>
<div class="group2">
<!-- 第三步：使用组件,编写组件标签 -->
<group2></group2>
</div>
</div>
<div id="box_2">
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
// 第一步：创建group1组件
const group1 = Vue.extend({
// el:"#box" // 组件定义时，不要写el
// 组件中写入html,注意，一定要用<DIV>等元素包起来
template: `
<div class='box1'>
<h2>我是组件1 - 商家</h2>
<hr>
<h3>商家名称：{{bName}}</h3>
<h3>商家地址：{{bCity}}</h3>
<hr>
<button @click='show1'>点击我显示商家名称</button>
</div>
`,
data() {
return {
bName: "美食林",
bCity: "邯郸"
}
},
methods: {
show1() {
alert(this.bName)
}
},
});
// 第一步：创建group2组件
const group2 = Vue.extend({
// 组件中写入html,注意，一定要用<DIV>等元素包起来
template: `
<div class='box1'>
<h2>我是组件2 - 会员</h2>
<hr>
<h3>会员名称：{{cName}}</h3>
<h3>会员地址：{{cCity}}</h3>
<hr>
<button @click='show2'>点击我显示会员姓名</button>
</div>
`,
data() {
return {
cName: "张飞",
cCity: "北京"
}
},
methods: {
show2() {
alert(this.cName)
}
},
});
// 第一步：创建hello组件
const hello = Vue.extend({
// 组件中写入html,注意，一定要用<DIV>等元素包起来
template: `
<div>
<h2>您好!我是{{cName}}!</h2>
</div>
`,
data() {
return {
cName: "hello全局组件",
}
},
methods: {
show2() {
alert(this.cName)
}
},
});
// 第二步:全局注册组件
Vue.component('hello', hello)
var box = new Vue({
el: "#box",
data: {
names: "孔明"
},
// 第二步：注册组件
components: {
group1: group1,
group2: group2,
}
})
var box_1 = new Vue({
el: "#box_2"
})
</script>
</html>