【Vue.js - 1】基礎知識

1. 公式サイト

Vue.js日本公式サイト
https://jp.vuejs.org/

2. リソースサイト

リソース
https://github.com/vuejs/awesome-vue
https://curated.vuejs.org/

UIコンポーネント集
Element
https://element.eleme.io/#/en-US
OnsenUI
https://onsen.io/

3. Vue.jsのインストール

CDNを読み込む

html

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

lodash.min.js（ユーティリティ用ライブラリ）

html

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>

axios.min.js（HTTP 通信用ライブラリ）

html

<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>

4. Vue.jsの基本機能

Vueインスタンスを作成
（変数名は、慣例的にappやvm(viewmodelの略)が使われる）

javascript

var app = new Vue({
  el: '#app'
})

テキストのバインディング {{}}

html

<p>{{ message }}</p>

javascript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

オプションに定義したデータはコンソールからアクセスできる

javascript

console.log(app.message)

繰り返し v-for

html

<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>

javascript

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})

イベント v-on:click

html

<button v-on:click="handleClick">Click</button>

javascript

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function (event) {
      alert(event.target)  [object HTMLButtonElement]
    }
  }
})

フォームの入力と同期 v-model

html

<input v-model="message">
<p>{{ message }}</p>

javascript

var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  }
})

number修飾子を付与→入力値を数値として受け取る

html

<input v-model.number="message">

条件分岐 v-if

html

<button v-on:click="show=!show">切り替え</button>
<p v-if="show">Hello Vue.js!</p>

javascript

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})

トランジション＆アニメーション trantisionタグ

html

<button v-on:click="show=!show">切り替え</button>
<transition>
<p v-if="show">Hello Vue.js!</p>
</transition>

javascript

var app = new Vue({
  el: '#app',
  data: {
    show: true
  }
})
 .v-enter-active, .v-leave-active {
   transition: opacity 1s;
 }
 /* opacity:0から1へのフェードイン＆フェードアウト */
 .v-enter, .v-leave-to {
   opacity: 0;
 }

オプションの構成

javascript

var app = new Vue ( {
  //mountする要素
  el: '#app',
  //アプリケーションで使用するデータ
  data: {
    message: 'Vue.js';
  },
  //算出プロパティ（関数によって算出されたデータ）
  computed: {
    computedMessage: function(){
      return this.message + '!'
    }
  },
  //ライフサイクルフック
  created: function(){
    ///処理
  },
  //アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      //処理
    }
  }
});

ライフサイクルフック

Left align	Left align
beforeCreate	インスタンスが作成され、リアクティブの初期化がされる前
created
beforeMount	インスタントがマウントされる前
mounted	データが変更され、DOMに適用される前
updated
beforeDestroy	Vueインスタンスが破棄される前
destroyed	任意の子孫コンポーネントからエラーが捕捉された時
errorCaptured	その後