Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsで遊んでみよう

 Vue.jsで遊んでみよう

2017/6/22 v-osakaの登壇資料です。
かなり超初心者向けの内容です。

ショウノシオリ

June 22, 2017
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

Transcript

  1. アジェンダ ▷ 0. Vue.js とは? ▷ 1. 準備をしよう ◦ インストール

    ▷ 2. 「Hello Vue!」を表示する ◦ 基本的なVueの記法 ▷ 3. ボタンを押してメッセージを変えよう ◦ methodsで関数を登録 ◦ @click で関数を呼び出す ▷ 4. フォーム値をリアルタイムで出力してみよう ◦ 双方向バインディング v-model ▷ 5. 最初にアラートを出してみよう ◦ created ◦ ライフサイクルダイアグラム
  2. $(()=>{ var app = new Vue({ el : ‘#app’, data

    : { message: ‘Hello Vue!’ } }); }); ▷ 動かし方:new Vue({...}) と書く ▷ 適用範囲:el で指定 ◦ el がないと動かない ◦ 今回は id で指定したが、クラス指定でも動く ▷ データの記述場所:data 「Hello Vue!」を表示する(JS側)
  3. <div id=”app”> <p>{{ message }}</p> </div> ▷ {{ message }}

    でデータバインディングができる ▷ el の指定を忘れないこと 「Hello Vue!」を表示する(HTML側)
  4. data : { message: ‘Hello Vue!’ }, methods : {

    changeMessage(){ this.message = ‘How are you?’; } } ▷ 関数を登録:methods ◦ this.message で登録した data にアクセスできる ◦ changeMessage 関数を呼び出すと this.message を違うメッ セージで代入 ボタンを押してメッセージを変えよう(JS側)
  5. <div id=”app”> <p>{{ message }}</p> <button @click=”changeMessage”>click Here!!</button> </div> ▷

    @click でイベントが発動する ◦ ボタンが押されると methods の changeMessage が実行される ▷ @click は v-on:click の略 ボタンを押してメッセージを変えよう(HTML側)
  6. ▷ JS側で v-model の登録を忘れずに ◦ data で登録 ◦ 初期値が必要(今回は空の ‘’

    で) ◦ 登録していないと {{ comment }} がテキストとして認識される フォーム値をリアルタイムで出力してみよう (JS側) data : { message: ‘Hello Vue!’, comment: ‘’ },
  7. ▷ ブラウザを最初に読み込んだ時にアラート表示を実行 ▷ Vue 生成時に呼ぶ:created ◦ created が呼ばれた時にはまだ data の中身は読み込まれない

    最初にアラートを出してみよう(JS側) methods : { changeMessage(){ this.message = ‘How are you?’; } }, created(){ alert(‘Vue.jsをはじめよう!’); }
  8. ライフサイクルダイアグラム ▷ https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグ ラム ◦ observe data:データがあるのか等のチェックはするが、まだデー タは埋め込まれない ◦ createdの時点にはまだ

    data が入らない ◦ 赤字:イベント ◦ 実践:否が応でも進む方向 ◦ 点線:場合によって待ったりする方向 ◦ mountされる:データがはめ込まれる ◦ destroy:コンポーネントとかを読み終わったら。
  9. Qiita記事 ▷ Vue.js をちょっと使ってみる  http://qiita.com/shosho/items/38273d099a41acd341c2 ▷ Vueにデバッグ関数を追加  http://qiita.com/shosho/items/7960293de6c6663a5a37 ▷ Vue.js

    の「ライフサイクルダイアグラム」の見方  http://qiita.com/shosho/items/8a6692e773eb8175498a ▷ Vue.js のデータバインディングとレンダリング  http://qiita.com/shosho/items/d2889b2e806d6a756d70 ▷ Vue.js の v-if をつけるとき  http://qiita.com/shosho/items/7fa3235ff9cc2dc7b6db