03. [初识]后台管理系统-来宾欢迎语展示
为了增加教程的趣味性,接下来的教程我们会有一个大目标,即实现开发美发管理系统,然后根据这个大目标我们不断学习,不断努力。所以这篇文章先来完成来宾欢迎语展示
的需求。
编写页面的基本结构
在项目根目录,新建一个目录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 折优惠" }, },
这个时候我们看一下效果:
好了这个例子我们就写完了,那现在回顾一下,我们通过这个例子都学到了什么。 首先是我们了v-on
这种指令的使用,用来绑定对应的事件。然后我们又学了如何在 Vue 里写一个相应事件的方法。除了这两个知识外,你也能更深一层体验到什么是面向数据编程,而不再是面向DOM
编程。
希望你对本文有所收获,记得手写代码哦。
显示隐藏套餐服务
由于服务的特殊性,老板要求我们能隐藏一些特殊有吸引力的套餐服务,只有 VIP 顾客才可以展示出来。于是我们开始编写代码。
明确需求后,我们需要新生成一个套餐的变量setMeal
,然后还要有一个是否展示的变量isShowMeal
。
data() { return { content: '', setMeal: '真空套餐 帝王套餐 夏日套餐 学生套餐', isShowMeal: false } },
有了这个变量之后,我们还需要有一个能改变isShowMeal
的响应方法showOrHideBtnClick
。用来控制套餐的显示很隐藏。
showOrHideBtnClick() { this.isShowMeal = !this.isShowMeal }
有了变量,有了方法,这时候就可以写模板中的代码了,注意这里涉及一个新的知识点,或者叫做新指令,就是v-if
,它的作用是如果值为真,就显示这个 DOM 元素,如果为假,就不显示这个元素。
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>`
这时候就能通过一个按钮,随时进行菜单的隐藏和显示了。
通过这两个小需求,相信你已经对 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>
码云笔记 » 03. [初识]后台管理系统-来宾欢迎语展示