Vueのイベントトリガをデバックコンソールで直接設定・発火させる
vm.$on('test', function (msg) { console.log(msg) })
vm.$emit('test', 'hi')
//=> hi一回だけしか実行しないONCEというのもあります
vm.$once('testOnce', function (msg) { console.log(1) })
vm.$emit('testOnce', 'hi')
//=> 1
vm.$emit('testOnce', 'hi')
// *なにもでない*コンポネントで作成した子要素をアレコレしたい場合は
別途工夫が必要です。
私は昔から一つの物事に集中すると何も見えなくなるタイプの人間です。
たとえば、CIV4にハマったときにはPCの前から動かず半日、飯も喰わずにプレイするような有様。
最終的に大学の単位を落としまくり酷い目にあいました。
その事件以降、これを自分の欠点と理解し極力ゲームは避けていました。
そして、余った時間資源を生産活動*1にブチ込むようにすると、それなりに成果が見られるように成りました。
さてそんな中、弊社休憩ブースにバケモノゲームが入荷されます。
ゼルダの伝説ブレス・オブ・ザ・ワイルドです。
末恐ろしい事に「見てるだけで楽しい」という大傑作。
私の中でホコリを被っていた「ゲームやりたい」という感覚が数年ぶりに蘇ります。
たまたま営業から早く帰ってきた日に社員さんに煽られる形で、同ゲームへの進出と相成りました。
当初は実務への悪影響を心配していたのですが……実際には
など、明らかに好影響が見えるように成りました。
今にして思えば、これまでの仕事だけモードというのはADHD特有の「成り行き上の仕事一筋」だったのかなと思います。
shuzo-kino.hateblo.jp
「仕事一筋」と「成り行き上の仕事一筋」は異なる
*1:学業だの経営だの
取引速度が高速を超える
アンドロイドが酒を飲む
住んでいる惑星が金を借りる
そういった不条理極まりない話を「そこを突っ込むのは止めよう」というカンタンなセリフのみで華麗にかわされてズンズンお話が進んでいきます。
伏線もしっかり回収&のちのエピソードでもしっかりフォロー
とても質の高い作品で、一気に読みきっちゃいました
特に終盤の展開がすごい（語彙喪失
gopherJs-vueでコンポネントを活用刷る場合、NewComponentをつかいます
<!DOCTYPE html> <html> <body> <div id="app"> <my-el></my-el> </div> <script type="text/javascript" src="basic.js"></script> </body> </html>
package main import ( "github.com/gopherjs/gopherjs/js" "github.com/oskca/gopherjs-vue" ) type Model struct { *js.Object // this is needed for bidirectional data bindings Result string `js:"result"` Picked string `js:"picked"` } func New() interface{} { //コンポネントを生成する m := &Model{ Object: js.Global.Get("Object").New(), } m.Result = "as string" m.Picked = "One" return m } type controller struct { //テンプレートをつかうので、 //初期化時は空っぽの構造体をおく。 *js.Object } func main() { vue.NewComponent(New, template).Register("my-el") vm := vue.New("#app", new(controller)) js.Global.Set("vm", vm) } const ( template = ` <div> <input v-model="result" /> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <div> <span>Picked: {{ picked }}</span> <div>Result:{{result}}</div> </div> </div> ` )
結果はこんな感じ
東京ビッグサイトで実施されているワイヤレスジャパン２０１７に行ってきました。
BLEでつなぐタイプのトイレ利用状態チェッカーです。
子機が３０００円台と相当リーズナブルなシステム。
子機その１、扉につける磁石タイプ。
ボタン電池駆動で２年保つそうです。
子機その２，フットマット。
列が並んでるか監視刷る時に使える？
ルータはLTEとBLEを中継する機能をもちます。
部屋に一個。
結果はブラウザで確認することもできますし、
必要であればライトが付くだけの仕様にもできるとのこと。
www.mirado.jp
鏡とサイネージが融合した、めずらしいシステムです。
内部にWinPCが入っており、スマホのサブディスプレイとして使ったりする用途も考えられているそう。
技術的には、Linuxもいけるとの事でした。
「Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る」第二回として、
追記・確認が可能なTODOリストをつくってみました。
……何？ MarkDownエディタ？ ……ちゃんとできたらアップロードします何卒何卒……
とりあえず、文字だけ並ぶやつ
package main import ( "github.com/gopherjs/gopherjs/js" "github.com/oskca/gopherjs-vue" ) type BookData struct { *js.Object Title string `js:"title"` Content string `js:"content"` } type Model struct { *js.Object // this is needed for bidirectional data bindings Result string `js:"result"` Flag bool `js:"flag"` BookDatas []*BookData `js:"bookdatas"` InputTitle string `js:"input_title"` InputContent string `js:"input_content"` } // this would be recognized as Inc in html func (m *Model) Button() { m.Flag = !(m.Flag) } func NewBook(title string, content string) *BookData { t := &BookData{ Object: js.Global.Get("Object").New(), } t.Title = title t.Content = content return t } func (m *Model) AddNewBook() { // append利用は公式で非推奨 // 配列Pushがよい vm := vue.GetVM(m) bookdatas := vm.Get("bookdatas") vue.Push(bookdatas, NewBook(m.InputTitle, m.InputContent)) } func main() { m := &Model{ Object: js.Global.Get("Object").New(), } m.Result = "as string" m.Flag = true m.InputTitle = "" m.InputContent = "" m.BookDatas = []*BookData{ NewBook("first book", "Good Day"), NewBook("second book", "Nice one!"), } vue.New("#app", m) }
<!DOCTYPE html> <html> <body> <div id="app" v-cloak> <div>str: {{ result }} </div> <span v-bind:title="result" v-if="flag"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> <div> <button v-on:click="Button">Button</button> </div> <div> Title:<input v-model="input_title" /> Content:<input v-model="input_content" /> </div> <div> <ul v-for="book in bookdatas"> <li>{{book.title}} - {{book.content}}</li> </ul> <button v-on:click="AddNewBook">Add New Book</button> </div> </div> <script type="text/javascript" src="basic.js"></script> </body> </html>
CSSも何もないので、実にシンプルな概観です