Vue.js 私的まとめ | Awaken English Power!

投稿者: Auther | 3 年, 9 ヶ月前 |

Vue.js + Django で簡単なサイトを1日以内に構築するための私的逆引き用まとめ

Vue.jsの使用用header

 <head>
  <meta charset="UTF-8">
  <title>for use Vue.js</title>
  <link rel="stylesheet" href="style.css" >
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 </head>

v-bind ：属性指定（主にstatic fileの呼び出し）

 <body>
  <h2>画像指定</h2>
  <div id="app">
   <img v-bind:src="fileName">v-bindで指定</img>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     fileName:'file_name.jpg'
    }
   })
  </script>
 </body>

v-model ：ユーザー入力データの取り込み（inputボタンとか）


  <h2>入力した文字列を表示する例</h2>
  <div id="app">
   <input v-model="myName" placeholder="お名前">
   <p>私は、{{ myName }} です。</p>
  </div>

<script>
   new Vue({
    el: '#app',
    data: {
     myName:''
    }
   })
</script>

v-on：ユーザーがボタンを押したときに何らかの処理を行う場合

 <h2>increamet by click</h2>
  <div id="app">
   <p>{{ count }}</p> 
   <button v-on:click="関数名">1増やす</button>
  </div>

<script>
   new Vue({
    el: '#app',
    data: {
     count:0
    },
    methods: {
     関数名: function() {
      this.count++;
     }
    }
   })
  </script>

v-for：繰り返し表示

  <h2>オブジェクトの配列データを、リストで表示</h2>
  <div id="app">
   <ul>
    <li v-for="item in objArray">{{ item.name }} ¥{{ item.price }}</li>
   </ul>
  </div>

<script>
   new Vue({
    el: '#app',
    data: {
     objArray: [
      {name: 'いちご', price: 100},
      {name: 'りんご', price: 120},
      {name: 'だんご', price: 150}
     ]
    }
   })
  </script>

v-if：データの表示／非表示

<h2>trueのときだけ表示する例</h2>
  <div id="app">
   <label><input type="checkbox" v-model="プロパティ名（任意）">表示する</label>
   <p v-if="myVisible">チェックボックスはON</p>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     プロパティ名: false
    }
   })
  </script>

データが変わった時に自動的に再計算させる：computed

リアルタイムに値を計算し直して表示できる

  <div id="app">
   <input v-model.number="price" type="number">円
   <p>消費税込みの金額 {{ taxIncluded }}円</p>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     price: 100
    },
    computed: {
     // priceが変わったら、消費税込み金額を算出する
     taxIncluded: function() {
      return this.price * 1.08;
     }
    }
   })
  </script>

データの変化を監視

株価が動いたときなどログとして書き出すことができないだろうか。

  <h2>禁止文字が入力されたらアラートを出す</h2>
  <div id="app">
   <p>禁止文字：「{{ forbiddenText }}」</p>
   <textarea  v-model="inputText"></textarea>
  </div>

  <script>
   new Vue({
    el: '#app',
    data: {
     forbiddenText: 'だめ',
     inputText: '今日は、天気です。'
    },
    watch: {
     // 入力された文字列を監視する
     inputText: function(){
      var pos = this.inputText.indexOf(this.forbiddenText);
      if (pos >= 0) {
       alert(this.forbiddenText + "は、入力できません。");
       // 入力文字列から禁止文字を削除する
       this.inputText = this.inputText.substr(0,pos);
      }
     }
    }
   })
  </script>

v-move：トランジションアニメーション

ソートとシャッフル

  <div id="app">
   <transition-group>
    <li v-for="item in dataArray" v-bind:key="item"> {{item}}</li>
   </transition-group>
   <button v-on:click="sortData">ソートする</button>
   <button v-on:click="shuffleData">シャッフルする</button>
  </div>

  <script>
   new Vue({
    el: "#app",
    data: {
     dataArray:['one','two','three','four','five']
    },
    methods: {
     sortData: function() {
      this.dataArray.sort(function(a,b) {
       if (a < b) return -1;
       if (a > b) return 1;
       return 0;
      });
     },
     shuffleData: function() {
      var buffer = [];
      var len = this.dataArray.length;
      for (var i=len; len>0; len--) {
       var r = Math.floor(Math.random() * len);
       buffer.push(this.dataArray[r]);
       this.dataArray.splice(r, 1);
      }
      this.dataArray = buffer;
     },
    }
   })
  </script>

  <style>
   /* 移動トランジションにかかる秒数 */
   .v-move {
    transition: 0.5s;
   }
  </style>

コンポーネント：処理をまとめる

 <h2>配列からコンポーネントを作って表示する例</h2>
  <div id="app">
   <my-component v-for="(item, index) in myArray" v-bind:my-name="item" ></my-component>
  </div>

  <script>
   var MyComponent = {
    template: '<p class="my-comp">I am {{ myName }}.</p>',
    props: {
     myName: String
    },
    created: function () { // インスタンスが作成された後に実行
     if (this.myName == null) {
      this.myName = "who are you?";
     }
    }
   }
 
   new Vue({
    el: '#app',
    data: {
     myArray:['A','B','C','D','E']
    },
    components: {
     'my-component': MyComponent
    }
   })
  </script>

JSONの表示

JSONデータを読み込んで、コンポーネントで並べる

1.HTMLインスタンス


  <div id="app">
   <transition-group>
    <div v-for="item in dataArray" v-bind:key="item.title">
     <my-product v-bind:object="item"></my-product>
    </div>
   </transition-group>
   <button v-on:click="sortData">データのソート</button>
   <button v-on:click="shuffleData">データのシャッフル</button>
   <p><input type="file" v-on:change="loadData">
  </div>

2．Vueインスタンス

methods: {
     sortData: function() {
      this.dataArray.sort(function(a,b) {
       return (a.title < b.title ? -1 : 1);
       return 0;
      });
     },
     shuffleData: function() {
      var buffer = [];
      var len = this.dataArray.length;
      for (var i=len; len>0; len--) {
       var r = Math.floor(Math.random() * len);
       buffer.push(this.dataArray[r]);
       this.dataArray.splice(r, 1);
      }
      this.dataArray = buffer;
     },
     loadData: function(e) {
      file = e.target.files[0]
      if (file) {
       var reader = new FileReader()
       var vm = this;
       reader.onload = function(e){
        vm.dataArray = JSON.parse(e.target.result);
       }
       reader.readAsText(file)
      }

３.つなぐ

<script>
   var MyComponent = {
    props: ["object"],
    template:`
    <div style="width:300px;backgroundColor:#ffddaa;">
     <p style="backgroundColor:#ffa95e;">{{object.title}}</p>
     <p>解説：{{object.body}}</p>
    </div>`
   }
   new Vue({
    el: "#app",
    data: {
     dataArray: [
      ～省略～
     ]
    },
    components: {
     'my-product': MyComponent
    },
    methods:　～同上～
     }
    }
   }); 
  </script>

タグ:
vuejs