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:[email protected]"></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>&nbsp;
    <button>顾客离开</button>
</div>`

Vue3的绑定事件和事件方法

接下来需要给两个按钮绑定事件,这里绑定的事情跟原生方法不一样,需要写成下面的样子。然后在methods属性里加入两个方法welcomeBtnClickbyeBtnClick

<script>
    Vue.createApp({
        data() {
            return {
                content: '欢迎你的光临,贵宾一位!'
            }
        },
        methods: {
            welcomeBtnClick() {
                alert('111')
            },
            byeBtnClick() {
                alert('2222')
            },
        },
        template: `<div>
                        <div>{{content}}</div>
                        <button v-on:click="welcomeBtnClick">有顾客来</button>&nbsp;
                        <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>&nbsp;
            <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:[email protected]"></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>&nbsp;
                        <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>

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 03. [初识]后台管理系统-来宾欢迎语展示

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们