カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

Vue.js勉強会資料作成中(その2)

Vue.js勉強会資料作成中(その1) - カメ飼ってる新米エンジニアの覚書き

のその2です。


では、はじめてみましょう!


Vue.jsの始め方(初心者用)

htmlを作成し、CDN読み込んじゃう

<!-- Vue.jsの読み込み -->
<script src="https://unpkg.com/vue"></script>

jsFiddleってやつ

https://jsfiddle.net/chrisvfritz/50wL7mdz/ 今回はこれ使います。 Forkを押して、自由に書き換えましょう Runで実行されます。保存はUpdate。 保存しなくてもRunできます。 URLを覚えておけば、いつでもアクセスできます。

他にも手段があるよ

3.vue-cliってのを使う(nodeを使うよ)

4.npmでインストール(nodeを使うよ)

[参考] https://jp.vuejs.org/v2/guide/installation.html

(ここでデザイナーさんにCDNって何?って言われた)


messageを変更してみよう

new Vue({
  el: '#app',
  data: {
    message: 'ここを変更してみて'
  }
})

変更後、Runをクリック!

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/1/


こんな書き方もできる

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p v-html="message">メッセージ</p>
</div>

v-htmlという属性をつければはじめに書いておいて、 置き換えることもできる。 {{生の文字列}}だが、v-htmlはHTMLとして扱える。

[参考]https://jp.vuejs.org/v2/guide/syntax.html#生の-HTML

[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/2/


v-ifで出し分け

<div id="app">
  <p v-if="message">メッセージ</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: true
  }
})

[参考]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ https://jp.vuejs.org/v2/guide/#条件分岐とループ [こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/3/

message: falseに変更してみましょう

[変更後はこれ] https://jsfiddle.net/pocchi/rtec7eyh/4/


ところでv-ってなに

v- から始まる特別な属性をディレクティブと言います。

単一の JavaScript 式を期待します。 ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を ※DOM に適用すること。

さっきの例だと、 trueで挿入、falseで削除できるってこと ※DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。このDOMを操作することによって、要素の値をダイレクトに操作できます。

[参考・引用]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ http://piyo-js.com/05/dom.html


Vue.js側で値を変化させれば、 それにつられてHTMLも勝手に変わる

つまり、状態を管理しやすい !


v-forでリストを表示する

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
     todos: [
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
    ]
  }
})

[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/5/


何をやっているのか

f:id:pocchi13:20170403233322p:plain todosの中身をtodoの中に上から1つずつ移し替えている


TODOリストを作ってみましょう!


TODOリストのTODOリスト

  • やることを入力する
  • やることリストを見る

    - やることが終わったら消す


TODOリストのTODOリスト

  • やることを入力する
  • やることリストを見る–>すでにできている!
  • やることが終わったら消す [以後の参考・引用] http://notsleeeping.com/archives/131

やることを入力できるようにしよう

<div id="app"><!-- この下から追記 -->
  <input v-model="inputText" type="text" />
  {{inputText}}<!-- この上まで追記 -->
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {/* この下から追記 */
     inputText: null,
     todos: [/* この上まで追記 */
      { text: 'JavaScriptを勉強する' },
      { text: 'Vueを勉強する' },
      { text: '何かすごいものを作る' }
//以下省略

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/1/


フォームに入力すると値が取得できることは確認できた!

次は保存ボタンをつけたい!


<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
     /* --inputTextとtodosは中略-- */
  },/* この下から追記 */
  methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    }
  }
})/* この上まで追記 */

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/6/


どうなっているのか

f:id:pocchi13:20170403233414p:plain

どうなっているのか

f:id:pocchi13:20170403233440p:plain

これで、保存ができる!

後は削除するにはどうしたらいいのか!


<div id="app">
  <input v-model="inputText" type="text" />
  <input type="submit" value="保存" v-on:click="save"/>
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}<!-- この下から変更! -->
      <input type="submit"
      value="削除" 
      v-on:click="remove(todo.index)" />
    </li><!-- この上まで変更! -->
  </ol>
</div>
 methods:{ 
    save: function(){
      this.todos.push({text: this.inputText}); 
    },/* <-コンマをつけて、この下から追記 */
    remove: function(index){
        this.todos.splice(index, 1);
    } /* ここまで追記 */
  }

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/10/


何が起こっている?

f:id:pocchi13:20170403233459p:plain


コンポーネント化してみましょう!

f:id:pocchi13:20170403233515p:plain Sketchでいうシンボルに近い


<div id="app">
  <!-- 中略 -->
  <ol>
      <list-component 
      v-for="todo in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:text="todo.index"
      ></list-component>
  </ol>
</div>

new Vue({の上に追加

Vue.component('list-component', {
  template: '<li>{{text}}
             <input 
              type="submit" 
              value="削除" 
              v-on:click="remove(index)" />
             </li>',
  props:['text','index']
});

[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/12/


削除が動かない!

f:id:pocchi13:20170403233532p:plain メソッドも渡してあげよう! [参考]https://jp.vuejs.org/v2/guide/components.html#カスタムイベントとの-v-on-の使用


<list-component 
      v-for="todo in todos"
      v-bind:key="todo"
      v-bind:text="todo.text"
      v-bind:index="todo.index"
      v-on:remove="remove(todo.index)"
      ></list-component>
Vue.component('list-component', {
  template: `<li>{{text}}
             <input type="submit"
             value="削除"
             v-on:click="$emit('remove')"/></li>`,
  props:['text','index']
});

template: `` で囲まれていることに注意! [こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/15/


動きましたか?