为了增加教程的趣味性，接下来的教程我们会有一个大目标，即实现开发美发管理系统，然后根据这个大目标我们不断学习，不断努力。所以这篇文章先来完成来宾欢迎语展示的需求。
编写页面的基本结构
在项目根目录，新建一个目录Demo3.html，然后复制Demo1.html里边的代码。
复制后，你可以修改一下<title>，加上青青大宝剑城，然后修改代码，增加content变量。具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>青青大宝剑城</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data(){
return{
content:'欢迎你的光临，贵宾一位！'
}
},
template: '<div>{{content}}</div>'
}).mount("#app")
</script>
</html>
接下来我们要作的事情是写两个按钮，当顾客来的时候，我们显示欢迎你的光临，贵宾一位！，当顾客离开的时候，我们显示欢迎下次光临，真空套餐下次 8 折优惠。现在来写两个按钮，修改template代码部分。
template: `<div>
<div>{{content}}</div>
<button>有顾客来</button>
<button>顾客离开</button>
</div>`
Vue3 的绑定事件和事件方法
接下来需要给两个按钮绑定事件，这里绑定的事情跟原生方法不一样，需要写成下面的样子。然后在methods属性里加入两个方法welcomeBtnClick和byeBtnClick。
<script>
Vue.createApp({
data() {
return {
content: '欢迎你的光临，贵宾一位！'
}
},
methods: {
welcomeBtnClick() {
alert('111')
},
byeBtnClick() {
alert('2222')
},
},
template: `<div>
<div>{{content}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
</div>`
}).mount("#app")
</script>
写完这部就可以在浏览器测试一下，你写的代码是否好用。正常后，你需要修改响应事件的方法。
methods: {
welcomeBtnClick() {
this.content = "欢迎你的光临，贵宾一位！"
},
byeBtnClick() {
this.content = "欢迎下次光临，真空套餐下次 8 折优惠"
},
},
这个时候我们看一下效果：
![03. [初识]后台管理系统 1](/d/file/webqianduan/jnu5qrvft4kjnu5qrvft4k.gif "03. [初识]后台管理系统 1")
通过这两个小需求，相信你已经对 Vue 的编写方法有了最基本的了解，下篇文章我们来为我们的大宝剑城，加入一些佳丽。希望小伙伴们继续关注。
为了方便学习，给出整个文件代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>青青大宝剑城</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: '',
setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐',
isShowMeal: false
}
},
methods: {
welcomeBtnClick() {
this.content = "欢迎你的光临，贵宾一位！"
},
byeBtnClick() {
this.content = "欢迎下次光临，真空套餐下次 8 折优惠"
},
showOrHideBtnClick() {
this.isShowMeal = !this.isShowMeal
}
},
template: `<div>
<div>{{content}}</div>
<button v-on:click="welcomeBtnClick">有顾客来</button>
<button v-on:click="byeBtnClick">顾客离开</button>
<div>
<div v-if="isShowMeal" >{{setMeal}}</div>
<button v-on:click="showOrHideBtnClick">显示/隐藏套餐</button>
</div>
</div>`
}).mount("#app")
</script>
</html>