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

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

デジコン合宿

Bba644df249daf33957e3c26462bf8cb?s=128

Fukuda Naoto

August 29, 2018
Tweet

Transcript

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

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

  3. うるせ~~! 知らね~~!

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

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

  6. とりあえず手を動かせ index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>

    チンパンジーでもわかるVue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script src="script.js"></script> </body> </html>
  7. script.js const app = new Vue({ el: '#app', data: {

    message: 'Hello Vue!' } })
  8. テキストボックスで双方向バインディングを 感じろ <div id="app"> <input v-model="message" /> <p>{{ message }}</p>

    </div>
  9. クリックしたときのアクション <div id="app"> <input v-model="message" /> <button v-on:click="deleteString"> 削除</button> <p>{{

    message }}</p> </div> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { deleteString: function(){ this.message = ''; } } })
  10. HTMLタグの属性に変数使いたくない? <div id="app"> <input v-model="message" v-bind:maxlength="maxLength"/> <button v-on:click="deleteString"> 削除</button> <progress

    v-bind:max="maxLength" v-bind:value="message.length <p>{{ message }}</p> </div
  11. data: { message: 'Hello Vue!', maxLength: 20, }

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

  13. Q.いちいち書くのめんどくさい A.v‑onとv‑bindは短縮記法あるで <button v-on:click="deleteString"> 削除</button> <progress v-bind:max="maxLength" v-bind:value="message.length" <button @click="deleteString">

    削除</button> <progress :max="maxLength" :value="message.length"></progress>
  14. 要素の表示・非表示を操れ methods: { deleteString: function(){ this.message = ''; }, toggleVisible:

    function(){ this.isVisible = !this.isVisible; } } <button @click="toggleVisible">{{ isVisible ? ' 非表示' : ' 表示' <p v-if="isVisible">{{ message }}</p>
  15. 超便利!配列を展開する <ol> <li v-for='animal in animals'>{{ animal }}</li> </ol> data:

    { message: 'Hello Vue!', maxLength: 20, animals:[' チンパンジー',' ゴリラ',' サル'] }
  16. ディレクティブまとめ v‑if trueで要素表示、falseで要素非表示 v‑for 配列の要素 in 配列 で配列の文だけHTMLの要素が展開される

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