「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も何もないので、実にシンプルな概観です
