Используйте Vue, чтобы написать мини-кликционную игру, которая включена в текстовое поле. Нажатие запуска будет генерировать таблицу с 3 рядами и 3 столбцами. Данные таблицы случайным образом расположены от 1 до 9. В настоящее время нажмите от 1 и нажмите на 9 по порядку. При щелчке в правильном порядке будет предложено использование времени. Если заказ неверен, игра будет вызвана.
1. Сначала загрузите исходный код VUE, загрузите адрес http://cn.vuejs.org
2.jquery ориентирован на операции DOM, в то время как VUE ориентирован на операции данных, поэтому лучше не работать DOM при использовании VUE, попытаться показать уникальность VUE (может быть проще понять, если вы использовали AngularJS)
3. Создайте обычный HTML -файл и ссылайтесь на исходный файл VUE в заголовке
<Head> <meta charset = "utf-8"/> <title> </title> <script type = "text/javascript" src = "js/vue.js"> </script> </head>
4. Простая страница
1) Прежде всего, V-модель, двусторонняя привязка данных будет изменяться в соответствии со значением, введенным в вашем текстовом поле.
2) @click связывает событие Click, где @ является аббревиатурой V-On. Конечно, событие привязки может принимать параметры, такие как @click = 'time (item)'.
3) v-for = "(index, item) в списке", массив цикла, индекс-это угловая оценка массива, а элемент-это значение в массиве.
Вы можете проверить документацию Vue для получения дополнительной информации.
<body> <div id = "play"> <pan> Введите номер и нажмите, чтобы запустить, и будет сгенерирована таблица, соответствующая входному номеру. Начните с номера 1 в таблице, нажмите к концу в порядке .... < /span> <br /> <input type = "number" v-model = "num" /> <button @click = 'arr'> start < /button> <br /> <div v-for = "(index, item) в списке"> <шаблон v-if = "Index % num = 0 && (index! style = "float: left;"> <button @click = 'time (item)'> {{item}} </button> </div> </div> </div> </body>5. Операция
1) Во -первых, вам нужно новый экземпляр VUE и EL, свяжите свой DOM и используйте идентификатор в качестве идентификатора здесь
2.)
3) В методах есть два метода, которые генерируют массив на основе значения текстового поля, и генерирует массив с квадратной длиной значения текстового поля и не будет повторяться. Значение массива составляет 1 квадрат значения текстового поля, а значение, добавленное в текстовое поле, составляет 3, тогда сгенерированная длина массива составляет 9, содержание массива составляет 1-9 и не повторяется.
Время вычисляет время начала и время окончания кликов и используйте проверку] NUM для управления порядком кликов.
<cript> new Vue ({el: '#play', data: {num: 2, list: [], starttime: 0, condtime: 0, checknum: 0}, методы: {arr: function () {if (this.num> 20) {alert ('Значение слишком велик, браузер умирает, это лучше не будет, чем 20'); this.num * this.num; Чтобы получить случайное число 1 ~? } else {// Я обнаружил, что существует дублированный элемент и восстанавливает новое случайное число 1) { }}}) </script>6.css код
<style> .ibitton {margin-top: 10px; Полевая левая: 10px; Цвет: #ffff; Граница: 1PX SOLIT #8A6DE9; фоновый цвет: #8A6DE9; размер шрифта: 14px; Заполнение: 6px 12px; граница-радий: 7px; Ширина: 50px; Высота: 40px; } </style>7. Использование VUE для завершения функции в определенных конкретных сценариях намного проще, чем jQuery, но jQuery все еще очень мощный. Используйте разные технологии, чтобы выполнить функции, которые вы хотите быстрее и лучше в соответствии с различными сценариями.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.