使用 vue 编写一个点击数字计时小游戏, 列入你在文本框中输入 3, 点击开始会生成一个 3 行 3 列的表格, 表格数据为 1-9 随机排列, 这时候从 1 开始点击, 按顺序点到 9, 当按正确顺序点击完毕, 会提示所用的时间, 如果顺序没有按对, 会提示游戏结束.
1. 首先下载 vue 源码, 下载地址
2.jquery 是在面向 dom 操作, 而 vue 是面向数据操作的, 所以使用 vue 最好不要去操作 dom, 尽量发挥出 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-model, 数据的双向绑定, 根据你文本框输入的值变化而变化.
2)@click 绑定一个 click 事件, 其中 @是 v-on 的缩写. 当然绑定事件可以带参数例如 @click='time(item)'.
3)v-for="(index, item) in list", 循环数组, index 为数组的角标, item 为数组中的值.
可以看一下 vue 文档进一步了解.
- <body>
- <div id="play">
- <span>
- 输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....
- </span>
- <br />
- <input type="number" v-model="num" />
- <button @click='arr'>
- 开始
- </button>
- <br />
- <div v-for="(index, item) in list">
- <template v-if="index % num == 0 && index!=0">
- <br>
- <br>
- <br>
- </template>
- <div style="float: left;">
- <button class="ibutton" @click='time(item)'>
- {{item}}
- </button>
- </div>
- </div>
- </div>
- </body>
5.vue 操作
1) 首先要 new 出一个 Vue 的实例, el 绑定你的 dom, 这里用 id 作为标识
2)data 这是 vue 要操作的数据, num 文本框的值 (默认为 2),list[] 根据文本框值, 生成的 list,startTime 点击表格的开始时间, endTime 点击表格的结束时间, checkNum 当前选中的数字.
3)methods 中有两个方法 arr 用来根据文本框的值, 生成一个数组, 生成一个文本框值的平方长度, 且不会重复的数组, 数组的值为 1 - 文本框值的平方, 加入文本框的值为 3, 则生成的数组长度为 9, 数组的内容为 1-9 且不重复.
time 计算点击的开始时间和结束时间, 用 check]Num 来控制点击的顺序.
- ne "><script>
- new Vue({
- el: '#play',
- data: {
- num: 2,
- list: [],
- startTime: 0,
- endTime:0,
- checkNum:0
- },
- methods: {
- arr: function() {
- if(this.num > 20){
- alert('数值过大,浏览器会死掉,最好不要大于20');
- return;
- }
- this.checkNum = 0;
- var arrlength = this.num * this.num;
- var arr = new Array(arrlength);
- var index = 0;
- for(var i = 1; i <= arrlength; i++) {
- //生成随机数
- var num = Math.random(); //Math.random():得到一个0到1之间的随机数
- num = Math.ceil(num * arrlength); //num*?的取值范围在0~?之间,使用向上取整就可以得到一个1~?的随机
- if(arr[0] != 0) {
- var flag = false; // 控制是否存在重复元素
- // 遍历生产数组中的元素
- for(var j = 0; j < arr.length; j++) {
- if(num != arr[j]) {
- flag = true;
- } else {
- flag = false;
- break;
- }
- }
- if(flag == true) {
- arr[index++] = num;
- } else {
- // 发现有重复元素重新产生新的随机数
- i--;
- }
- } else {
- arr[index++] = num;
- }
- }
- this.list = arr;
- },
- time: function(item){
- if(this.checkNum+1 != item){
- alert('game over');
- this.checkNum = 0;
- return;
- }
- var date = new Date();
- if(item == 1){
- this.startTime = date.getTime();
- }
- if(item == this.num * this.num){
- this.endTime = date.getTime();
- var useTime = ((this.endTime - this.startTime)/1000).toFixed(2);
- alert('使用了'+useTime+'秒');
- this.checkNum = 0;
- return;
- }
- this.checkNum = item;
- }
- }
- })
- </script>"
6.CSS 代码
.ib">
- .ib "><style>
- .ibutton{
- margin-top: 10px;
- margin-left: 10px;
- color: #fff;
- border: 1px solid #8a6de9;
- background-color: #8a6de9;
- font-size: 14px;
- padding: 6px 12px;
- border-radius: 7px;
- width: 50px;
- height: 40px;
- }
- </style>
- "
7. 在某些特定的场景使用 vue 来完成一个功能要比 jquery 简单的多, 但是 jquery 还是很强大的, 根据不同的场景运用不同的技术, 更快更好的完成自己想要的功能.
来源: http://www.jb51.net/article/91603.htm