デジコン合宿
チンパンジーでもわかるVue.js
View Slide
そもそもVue.jsってなんぞや
うるせ~~!知らね~~!
これまでのWebページ.htmlファイルにHTMLを書く↓CSSで見た目を整える↓JS(またはJQuery)で動きをつけたりサーバとの通信したり
Vue.jsだとなんかJSとHTMLがうまい感じにつながってくれる(双方向バインディング)
とりあえず手を動かせindex.htmlチンパンジーでもわかるVue.js{{ message }}
script.jsconst app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})
テキストボックスで双方向バインディングを感じろ{{ message }}
クリックしたときのアクション削除{{ message }}const app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {deleteString: function(){this.message = '';}}})
HTMLタグの属性に変数使いたくない?削除
data: {message: 'Hello Vue!',maxLength: 20,}
ここまでのディレクティブまとめv‑on:イベントv‑bind:属性v‑model実はv‑onとv‑bindを組み合わせているだけ
Q.いちいち書くのめんどくさいA.v‑onとv‑bindは短縮記法あるで削除削除
要素の表示・非表示を操れmethods: {deleteString: function(){this.message = '';},toggleVisible: function(){this.isVisible = !this.isVisible;}}{{ isVisible ? '非表示' : '表示'{{ message }}
超便利!配列を展開する{{ animal }}data: {message: 'Hello Vue!',maxLength: 20,animals:['チンパンジー','ゴリラ','サル']}
ディレクティブまとめv‑iftrueで要素表示、falseで要素非表示v‑for配列の要素 in配列 で配列の文だけHTMLの要素が展開される
まとめVue.jsはいいぞReactもいいぞ