Tweet
Tweet

Slide 1

Slide 1 text

チンパンジーでもわかるVue.js

Slide 2

Slide 2 text

そもそもVue.jsってなんぞや

Slide 3

Slide 3 text

うるせ～～！ 知らね～～！

Slide 4

Slide 4 text

これまでのWebページ .htmlファイルにHTMLを書く ↓ CSSで見た目を整える ↓ JS(またはJQuery)で動きをつけたりサーバとの通信したり

Slide 5

Slide 5 text

Vue.jsだと なんかJSとHTMLがうまい感じにつながってくれる （双方向バインディング）

Slide 6

Slide 6 text

とりあえず手を動かせ index.html チンパンジーでもわかるVue.js <body> <div id="app"> <p>{{ message }}</p> </div> <script src="script.js">

Slide 7

Slide 7 text

script.js const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

Slide 8

Slide 8 text

テキストボックスで双方向バインディングを 感じろ

{{ message }}

Slide 9

Slide 9 text

クリックしたときのアクション
削除

{{ message }}

const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { deleteString: function(){ this.message = ''; } } })

Slide 10

Slide 10 text

HTMLタグの属性に変数使いたくない?
削除

Slide 11

Slide 11 text

data: { message: 'Hello Vue!', maxLength: 20, }

Slide 12

Slide 12 text

ここまでのディレクティブまとめ v‑on:イベント v‑bind:属性 v‑model 実はv‑onとv‑bindを組み合わせているだけ

Slide 13

Slide 13 text

Q.いちいち書くのめんどくさい A.v‑onとv‑bindは短縮記法あるで 削除 削除

Slide 14

Slide 14 text

要素の表示・非表示を操れ methods: { deleteString: function(){ this.message = ''; }, toggleVisible: function(){ this.isVisible = !this.isVisible; } } {{ isVisible ? ' 非表示' : ' 表示'

{{ message }}

Slide 15

Slide 15 text

超便利！配列を展開する
  1. {{ animal }}
data: { message: 'Hello Vue!', maxLength: 20, animals:[' チンパンジー',' ゴリラ',' サル'] }

Slide 16

Slide 16 text

ディレクティブまとめ v‑if trueで要素表示、falseで要素非表示 v‑for 配列の要素 in 配列 で配列の文だけHTMLの要素が展開される

Slide 17

Slide 17 text

まとめ Vue.jsはいいぞ Reactもいいぞ