自分向けVue.jsチートシート

超簡潔に自分向けに、Vue.js について纏めました。所謂チートシートです。後日追記予定

基本的な文法

インスタンス作成

基本的なもの

var vm = new Vue({
  // オプション
})

特定要素と紐づくインスタンス

var app = new Vue({
  el: '#app', // id="app"な要素
  data: {
    message: 'Hello Vue!'
  }
})

以下のようにアクセス可能

<div id="app">
  {{ message }}
</div>

算出プロパティ

message変数を逆にするreversedMessageの定義

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})

コンポーネント

my-component要素のコンポーネントの登録

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

以下のように使える

<div id="example">
  <my-component></my-component>
</div>

dataは関数とする

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  }
})

new Vue({
  el: '#example-2'
})

propsオプションで文字列を送信

Vue.component('child', {
  // プロパティを宣言します。
  props: ['message'],
  // 単なるデータのように、プロパティは内部テンプレートで使用することができ、
  // そして this.messageとして、vm の中で利用可能になります。
  template: '<span>{{ message }}</span>'
})

<child message="hello!"></child>

テンプレート構文

テキスト展開

{{msg}}

属性設定

要素のidをdynamicId変数の値とする

<div v-bind:id="dynamicId"></div>

分岐
- 頻繁に何かを切り替える必要があれば v-show
- 条件が実行時に変更することがほとんどない場合は、v-if

seen変数がtrueなら1~、falseなら2~を表示

<div v-if="seen">
  1.Now you see me
</div>
<div v-else>
  2.Now you don't
</div>

繰り返し

items変数の要素を全て列挙

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

keyを与える。処理速度的にkeyを与えることが推奨される

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

イベントハンドリング

クリックでdoSomethingメソッドを実行するリンク

<a v-on:click="doSomething"> ... </a>

上記と同義

<a @click="doSomething"> ... </a>

フォーム入力バインディング

input要素内の文字とp要素内の文字が常に同期

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

vue-router

ルーティング

基本的なもの

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorldWithId from '@/components/HelloWorldWithId'

Vue.use(Router)

export default new Router({
  routes: [
    //静的ルーティング
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //動的ルーティング(1)
    {
      path: '/helloworld/:id',
      name: 'HelloWorldWithId',
      component: HelloWorldWithId
    }
  ]
})

(1)の場合のパラメータ取得方法

const id = this.$route.params.id

遷移

//パラメータなし
this.$router.push(name: 'HelloWorld')
//パラメータあり
this.$router.push({ name: 'HelloWorldWithId', params: { id: 123456 } })

ls -al