菜单

js底工知识总括,使用vue编写一个点击数字计时小游戏_vue澳门太阳娱乐手机登录

2020年3月14日 - 澳门太阳娱乐手机登录

使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束.

初始化一个项目

1.首先下载vue源码,下载地址

安装一些依赖

2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解)

vue总结

3.建立一个普通的html文件,在头部引用vue的源文件

1.指令

1)首先v-model,数据的双向绑定,根据你文本框输入的值变化而变化.

阻止冒泡

2)@click绑定一个click事件,其中@是v-on的缩写.当然绑定事件可以带参数例如@click=’timev-for=”
in list”,循环数组,index为数组的角标,item为数组中的值.

修饰符

可以看一下vue文档进一步了解.

ref=”wo” 给节点绑定一个标识

  输入数字,点击开始,会生成对应输入数字的表格,从表格中数字1开始点击,按顺序点击到最后....
  开始 



 {{item}}  

创建实例之后,再添加一个数据上去

1)首先要new出一个Vue的实例,el绑定你的dom,这里用id作为标识

2 实例化一个Vue生命周期

2)data这是vue要操作的数据,num文本框的值,list[]根据文本框值,生成的list,startTime点击表格的开始时间,endTime点击表格的结束时间,checkNum当前选中的数字.

实例化一个Vue函数 new Vue({})

3)methods中有两个方法arr用来根据文本框的值,生成一个数组,生成一个文本框值的平方长度,且不会重复的数组,数组的值为1-文本框值的平方,加入文本框的值为3,则生成的数组长度为9,数组的内容为1-9且不重复.

不常用的vue里面的属性

time计算点击的开始时间和结束时间,用check]Num来控制点击的顺序.

localStorage缓存

 new Vue({ el: '#play', data: { num: 2, list: [], startTime: 0, endTime:0, checkNum:0 }, methods: { arr: function{ alert('数值过大,浏览器会死掉,最好不要大于20'); return; } this.checkNum = 0; var arrlength = this.num * this.num; var arr = new Array; var index = 0; for(var i = 1; i <= arrlength; i++) { //生成随机数 var num = Math.random:得到一个0到1之间的随机数 num = Math.ceil; //num*?的取值范围在0~?之间,使用向上取整就可以得到一个1~?的随机 if { var flag = false; // 控制是否存在重复元素 // 遍历生产数组中的元素 for(var j = 0; j < arr.length; j++) { if { flag = true; } else { flag = false; break; } } if { arr[index++] = num; } else { // 发现有重复元素重新产生新的随机数 i--; } } else { arr[index++] = num; } } this.list = arr; }, time: function{ if(this.checkNum+1 != item){ alert; this.checkNum = 0; return; } var date = new Date{ this.startTime = date.getTime(); } if(item == this.num * this.num){ this.endTime = date.getTime(); var useTime = ((this.endTime - this.startTime)/1000).toFixed; alert; this.checkNum = 0; return; } this.checkNum = item; } } })

 .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; }

异步编程之一 Promise

7.在某些特定的场景使用vue来完成一个功能要比jquery简单的多,但是jquery还是很强大的,根据不同的场景运用不同的技术,更快更好的完成自己想要的功能.

数组常见操作

 console.log([1,2,3].filter(function(item){
        if(item>1){
        return item
    }
 }))

  console.log([1,2,3,6].some(function(item){
        if(item>1){
            return item    
        }
  }))

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图