Last active
September 1, 2017 10:33
-
-
Save yuu-ito/1e254f30419a2515afc6 to your computer and use it in GitHub Desktop.
vue.js( http://vuejs.org/ ) を試してみた。functionと打つ時間を計測するだけ。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>タイピングてすと：function</h1> | |
| function + enter で計測 | |
| <div id="main_typing"> | |
| <div> | |
| <input | |
| type="text" | |
| v-on="keyup:pressed($event), | |
| keyup:entered($event)|key enter" | |
| v-text="type_word" > | |
| </div> | |
| <input type="hidden" v-text="type_word"> | |
| <input type="hidden" v-text="start"> | |
| <input type="hidden" v-text="end"> | |
| <input type="hidden" v-text="type_time"> | |
| result : <div v-text="result"> </div> | |
| history : <div v-repeat="histories">{{res}}</div> | |
| </div> | |
| <script type="text/javascript" src="./typing.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(Vue){ | |
| var app = new Vue({ | |
| el:'#main_typing', | |
| data:{ type_word:"", | |
| start:"", | |
| end:"", | |
| type_time:"", | |
| histories:[ ] | |
| }, | |
| methods:{ | |
| entered:function(e){ | |
| console.log("Entered!: "+e.target.value); | |
| if(this.$data.type_word == "function"){ | |
| this.$data.end= (new Date()).getTime(); | |
| this.$data.type_time = this.$data.end - this.$data.start; | |
| var res_time = this.$data.type_time/1000; | |
| this.result = "you finished in " + res_time + " sec."; | |
| this.$data.histories.push({res:res_time}); | |
| } | |
| e.target.value=""; | |
| }, | |
| pressed:function(e){ | |
| console.log("Pressed!: "+e.target.value); | |
| this.$data.end= ""; | |
| this.$data.type_word = e.target.value; | |
| var d_time = new Date(); | |
| if(this.$data.type_word =="f"){this.$data.start=d_time.getTime()} | |
| }, | |
| }, | |
| }); | |
| var data = app.$data; | |
| })(Vue); |
computed properties についてはまだ良くわからず。
http://vuejs.org/guide/computed.html
http://vuejs.org/guide/transitions.html
this.$data は this でかけるかも、とのこと。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
demo が見れる
http://bl.ocks.org/yuu-ito/1e254f30419a2515afc6
苦戦したところ
2)input hiddenしてるとこは確認用にdivにしていたけど
動き確認したあとに消したら、動かなくなった（あとからそれはそうかとなった。
なのでhiddenに。実際はどう保持させるべきだったか。