vue.jsの導入

NO IMAGE

学習メモです。

目次

準備

CDN経由でライブラリをインストール

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

hello world

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
  <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="script.js"></script>
</body>
</html>

script.js

let app = new Vue({
  el: '#app', //Vue.jsを適用する要素
  data: {  //データオブジェクト
    message: 'hello world!'
  }
});

Vueクラス

Vue.jsの核となるクラス。

Vue(options)

options:動作オプション（「オプション名：値」のハッシュ形式で指定）
Vue.jsではアプリで利用する値をデータオブジェクトで用意しておいて、テンプレートから参照することが基本形。
このようなデーター割り当ての仕組みをデータバインディングという。

Mustache構文

テンプレートからデータオブジェクトにアクセスするときに利用

{{...}}

ディレクティブ

属性やスタイルの操作、条件分岐、繰り返し処理など、複雑な機能を組み込む場合に利用。

v-XXXXX属性

文字列をテンプレートに埋め込む v-text

<div id="app">
  <p v-text="message"></p>
</div>

{{…}}構文を無効化する v-pre

<div id="app">
  <p v-pre>{{message}}</p>
</div>

属性値にJS式を埋め込む v-bind

<div id="app">
  <a v-bind:href="url">aaaa</a>
</div>

:以降はディレクティブの引数。

v-bindの省略

<div id="app">
  <a :href="url">aaaa</a>
</div>

ブール属性の値をバインドするにはtrueまたはfalseを利用

index.html

<div id="app">
  <input type="button" value="クリック" v-bind:disabled="flag">
</div>

script.js

let app = new Vue({
  el: '#app',
  data: {
    flag:true
  }
});

算出プロパティ

既存のプロパティを演算した結果を取得するためのゲッター。
computedオプション配下に「プロパティ名：関数,…」で定義する。

new Vue({
  el: '#app',
  data: {
    email: 'AAa@aaa.com'
  },
  computed: {
    localEmail: function () {
      return this.email.split('@')[0].toLowerCase();
    }
  }
});

メソッドを使って書き換えることも可能。この場合呼び出し時にプロパティではなく、メソッドになるので「()」が必要。

new Vue({
  el: '#app',
  data: {
    email: 'AAa@aaa.com'
  },
  methods: {
    localEmail: function () {
      return this.email.split('@')[0].toLowerCase();
    }
  }
});

引数を利用する場合やデータの操作・更新などをする場合にはメソッドを利用。

ライフサイクルフック

Vueインスタンスは、最初に生成された後、要素にマウントされ、データの変化に応じてビューを更新させていき、最終的に破棄される。この生成から破棄までの流れをライフサイクと言う。
Vue.jsには、このライフサイクルの変化に応じて呼び出される、様々なメソッドが用意されている。これらをライフサイクルフックと言う。ライフサイクルフックを利用することで、インスタンスの生成から表示、破棄と、決められたタイミングでアプリ独自の処理を割り込ませることができる。
例：created,mounted,beforeDestroyなど

var app = new Vue({
  el: '#app',
  breforeCreate: function(){
    console.log('beforeCreate...');
  },
  created: function() {
    console.log('created...');
  },
  beforeMount: function() {
    console.log('beforeMount...');
  },
  mounted: function() {
    console.log('mounted...');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate...');
  },
  updated: function() {
    console.log('updated...');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy...');
  },
  destroyed: function() {
    console.log('destroyed...');
  }
});

setTimeout(function() {
  app.$destroy();
}, 3000);

リアクティブデータ

Vueクラスのdataオプションに登録されたデータのこと。
リアクティブデータを管理するVue.jsの仕組みをリアクティブシステムという。

サンプルコード
index.html

<div id="app">
  <p>カウント: ({{counter.current}})</p>
</div>

script.js

let app = new Vue({
  el: '#app',
  data: {
    counter: {
      current: 1
    }
  },
  created: function() {
    let that = this;
    let n = 1;
    this.timer = setInterval(function() {
      that.counter.current = n;
      n += 1;
    }, 3000);
  },
  beforeDestroy: function() {
    clearInterval(this.timer);
  }
});

setIntervalメソッドを経由して、currentプロパティの値を3000msごとに置き換えている。
currentプロパティの変更を検知して、ページ側も変化する（リアクティブである）

ウォッチャーによる明示的な監視

入力値に応じて候補値をリスト表示するオートコンプリート機能の更新タイミングを手動で制御したいときにはウォッチャーを利用する。

watch: {
  prop:function(newValue,oldValue){
    ...処理内容...
  }
}

遅延関数の生成にはLodashのライブラリが有効。

■サンプル
index.html

<div id="app">
  <label>名前：
    <input type="text" v-model="name" />
  </label>
  <p>入力された値：{{upperName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="script.js"></script>

script.js

new Vue({
  el: '#app',
  data: {
    name: '',
    upperName: ''
  },
  created: function() {
    this.delayFunc = _.debounce(this.getUpper, 2000); //2000ms以上処理を呼び出さない時だけ、メソッドを実行
  },
  watch: {
    name: function(newValue, oldValue) {
      this.delayFunc();
    }
  },
  methods: {
    getUpper: function() {
      this.upperName = this.name.toUpperCase();
    }
  }
});