Vue学习-猜大小游戏

时间:2022-06-26
本文章向大家介绍Vue学习-猜大小游戏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天看了一会儿Vue文档,写一个猜大小的小游戏,大概这个丑样:

长这样

需求

  1. 按下开始之后出现输入框
  2. 输入数字自动与一个1-100之间的数字比较
  3. 数字一致后,出现「重新开始」按钮,输入框灰显
  4. 每次输入非重复内容都会被记录

Html

头部导入一下Vue.js代码

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>猜大小</title>
</head>

body

主体部分包含

  • 一个 标签的标题
  • 一个交互信息
  • 开始/重新开始按钮
  • 游戏记录
<div id="guess">
    <h1>猜大小游戏</h1>
    {{info}}
    <br>
    <input v-model="num1" v-show="input_status" :disabled="isdisabled">
    <button @click="playGame" v-show="hidden_status">
        {{message}}
    </button>
    <ul>
        <li v-for="info_ in info_list">
            第{{info_.id}}次猜数字,输入了<span>「{{info_.num}}」</span>,提示:{{info_.text}}
        </li>
    </ul>
</div>
<script src="index.js"></script>
  • {{info}}{{xxx}}的部分会被js中的内容渲染
  • v-model="num1"表示输入框关联一下num1
  • v-show决定元素是否显示
  • :xxxv-bind:的简写
  • :disabled表示的是可编辑状态由变量isdisabled决定
  • @xxxv-on的简写
  • @click="playGame"表示,鼠标点击操作会触发playGame函数
  • v-for是循环增加无序标签li,答应游戏日志

Css

看页面就知道,css瞎写的

html, body {
    margin: 5px;
    padding: 0;
}

JavaScript

  • data中的部分都可以在html部分使用{{xxx}}渲染出来
  • watch是一个监听,每次输入框发生改变都会去调用changed_num()函数
  • created是在首次运行的时候执行的,会给一个给定的1-100内的数字
  • methods存放的全部的函数
  • changed_num,主要的游戏结果的判断,并会把日志加入到info_list,然后被展示到无序序列里面,有几种状态:
    • 正确
    • 输入为空
    • 输入大于100
    • 输入的数字比要猜的数字大
    • 输入的数字比要猜的数字小
    • 输入非整数
  • 通过内容的遍历(this.num1 == item.num),只有没有输入过的数字的信息,才会被打印到日志中
  • 重新开始游戏
  • 把几个状态都重新刷新一下,并生成一个新的数字
var item = 0;
var guess_num = new Vue({
        el: "#guess",
        data: {
            num: '',
            num1: '',
            info: "请按「开始游戏」开始猜数字游戏",
            hidden_status: true,
            input_status: false,
            message: '开始',
            isdisabled: false,
            info_list: []
        },
        watch: {
            num1: function (newNum1, oldNum1) {
                this.info = '开始比较';
                guess_num.changed_num()
            }
        },
        created: function () {
            this.num = Math.floor(Math.random() * 100 + 1);
        },
        methods: {
            changed_num: function () {
                var regNeg = /[0-9]*/;
                let flag = true;
                if (this.num1 == this.num) {
                    this.info = '你猜对了!';
                    this.hidden_status = true;
                    this.isdisabled = true;
                } else if (this.num1 == '') {
                    flag = false;
                    this.info = '请输入一个小于100整数';
                } else if (this.num1 > 100) {
                    this.info = '请输入一个小于100的值';
                } else if (this.num1 > this.num) {
                    this.info = '你输入的数字比要猜的数字大';
                } else if (!regNeg.test(self.num1)) {
                    this.info = '请输入一个整数数字';
                } else {
                    this.info = '你输入的数字比要猜的数字小';
                }
                this.info_list.forEach(item => {
                    if (this.num1 == item.num) {
                        flag = false
                    }
                });
                if (flag) {
                    item++;
                    this.info_list.push({id: item, num: this.num1, text: this.info});
                }

            },
            playGame: function () {
                this.message = "重新开始";
                this.hidden_status = false;
                this.input_status = true;
                this.isdisabled = false;
                this.num1 = '';
                item = 0;
                self.info = '请输入数字';
                this.info_list = [];
                this.num = Math.floor(Math.random() * 100 + 1);
            }
        },
    })
;