はじめてのvue.js

v1のやつがわかりやすかったのでこれで勉強した

今日はepisode 5の途中までやった。vue2.5でやったけど普通に動いた。

勉強中リポジトリ

// 送る側 'new Vue(), data:'
 <textarea v-model="message"></textarea>


   new Vue({
     el: '#app',
     data: {
            message: "heeelo"
     },
   })

// 受ける側  'v-model'
<input type="text" v-model="message"></input>

// 値があったら表示 'v-show'
 <button type="submit" v-show="message">

// 値があったら隠す (display:none)  'v-show'

 <span class="error" v-show="!message" >Put in your message! </span>

// 値があったら要素ごと消す  'v-if'
 <span class="error" v-if="!message" >Put in your message! </span>

// submitで発火 'submit action' 'v-on' '@submit'

  <form action="dontgo.html" v-on:@submit.prevent="handleit">
  <form action="dontgo.html" @submit.prevent="handleit">

// onclickで発火 'onclick function' '@click'

 <button type="submit" @click="doSomething">

   new Vue({
     el: '#app',
     methods: {
                  handleit:  function () {
                          alert("aaa");
                    },
                  doSomething: function () {
                          alert("bb");
                    }
               }
   })

// カウントアップ 'event function'

     <button type="submit" @click="doSomething">
            count = {{ count }}
     </button>

   new Vue({
     el: '#app',
     data: {
            count: 0
     },
     methods: {
                  doSomething: function () {
                         this.count += 1;
                    }
               }
   })

// カウントアップinline 'inline calicuration'

 <button type="submit" @click="count += 1">
        count = {{ count }}
 </button>

   new Vue({
     el: '#app',
     data: {
            count: 0
     },
     methods: {
                  doSomething: function () {
                         this.count += 1;
                    }
               }
   })


// componentの作り方 'Vue.component' 'カスタムタグ'

     <counter>     </counter>
     <counter>     </counter>
     <counter>     </counter>


   Vue.component("counter", {
          template: '#counter-template',
          //template: '<h1>counter-template</h1>'

          data: function () {                  <-- Vue.componentの中では function を使う。そうするとcomponentｋがclassのinstanceみたいに各自違う値を持ち続けられる。
                      return { count: 0 };      <-- 返す値に変数名を当てたobjectで返す
                }
  });

   new Vue({
     el: '#app'             <--   new Vue()の中なら data: {count:0} で簡単に返せるが、全component共通の値になってしまう
   })

// componentのattrをtemplate側で拾う方法 'subject'

         <my-counter subject="likes">     </my-counter>
         <my-counter subject="dislikes">     </my-counter>


       <div id="counter-template">
          <div>
             Here is in template<br>
             <button> {{ subject }} </button> <br>
          </div>

       </div>

   Vue.component("my-counter", {
          template: '#counter-template',
          props: ['subject'],
  });

//// Vue.componentを new Vue() の中に移植すると
// （globalコンポーネントである必要がない場合）

   new Vue({
     el: '#app',
     components: {
          inside_counter: {                      <----- new Vueの中だとハイフンが使えないのでアンダースコア
              template: '#counter-template',
              props: ['subject'],
              data: function () {
                          return { count: 0,      who: "inside_counter"};
              }
          }
     }
   })


// inline if文 'inline computed'

    skill: {{ points <= 100 ? 'beginner' : 'intermediate' }}

   new Vue({
     el: '#app',
     data: {
            points: 200
     },
   })

///// 外部関数化したif文で変数表示 'computed'
//  methodsとの違いがわからない・・

 <h1> skill: {{ skill }} </h1>


   new Vue({
     el: '#app',
     data: {
            points: 200
     },
     computed: {
         skill: function() {
                if (this.points <= 100) {
                    return 'Beginner';
                }
                return "Advanced";
         }
     }
   })

///// リアルタイムにif文  'computed'
// methodsはイベントで、こっちは値と値の関係性を整備する漢字科・・

<h1> skill: {{ skill }} </h1>
<input type="text" v-model="points"></input>


   new Vue({
     el: '#app',
     data: {
            points: 200
     },
     computed: {
         skill: function() {
                if (this.points <= 100) {
                    return 'Beginner';
                }
                return "Advanced";
         }
     }
   })