例) <div v-if="errors.length" >
※ifはDOM要素を追加削除

例) <li v-for="error in errors" >

例) <li v-show="error in errors" >
※showはsytleのdisplayによる表示/非表示

v-on　v-on:input/v-on:change/v-on:click
　(省略形)@click v-on:click
v-bind　v-bind:属性名
　(省略形):属性名
v-model　v-on:change/v-bind:valueをまとめる

var vm = new Vue({
  data: {
    キー: 値
  },
  beforeCreate: {
    //(インスタンスが生成されデータが初期化される前)
  }
  created: {
    //(インスタンスが生成されデータが初期化される後)
  }
  beforeMounted: {
    //(インスタンスがDOM要素にマウントされる前)
  }
  mounted: {
    //(インスタンスがDOM要素にマウントされる後)
  }
  beforeUpdate: {
    //(データが更新されDOM要素に適用される前後)
  }
  updated: {
    //(データが更新されDOM要素に適用される後)
  }
  beforeDestroy: {
    //(VUEインスタンスが破棄される前)
  }
  destroyed: {
    //(VUEインスタンスが破棄される後)
  }
  filters:{
    関数名: function(){}
  },
  computed:{
    関数名: function(){}
  },
  methods:{
    関数名: function(event){}
  }
})

//import {OtherFunction} from 'xxxxx'
//import OtherComponent from 'xxxxx'
export default {
  component:{
    OtherComponent
  },
  data: {
    キー: 値
  },
  filters:{
    関数名: function(){}
  },
  computed:{
    関数名: function(){}
  },
  methods:{
    関数名: function(event){}
  }
}

(インスタンスが生成されデータが初期化される前後)
beforeCreate
created
(インスタンスがDOM要素にマウントされる前後)
beforeMounted
mounted
(データが更新されDOM要素に適用される前後)
beforeUpdate
updated
(VUEインスタンスが破棄される前後)
beforeDestroy
destroyed

static/〜　webpackしない
src/assets/〜　webpackする

production　→　config/prod.env.js
development　→　config/dev.env.js
testing　→　test.env.js

prcess.envで制御？

propsで定義した変数は参照・変更ともにwatch/computed以外の関数では使用しない
使用すると、連動しなくなる

オブジェクト(プロパティを持っている)をwatchする場合は
deep:trueに設定する

[vue router]としてのリンク
例) 
<router-link to="/">Home</router-link>

[vue router]で可変する場所(タグ) in App.vue
例) 
<router-view/>

[vue router]でルート設定するファイル
router/index.js

[vue router]ルートフック
A.グローバルフック
　router.beforeEach
B.ルート単位フック
　ルート設定で定義
　beforeEnter:
C.コンポーネント内フック
　beforeRouterEnter: function 〜
　(離れていくときはbeforeRouterLeave)

使うとき
　this.$store.xxxxx
ステート(state:)
ミューテーション(mutations:)
　ステートの更新
　store.commit('関数')
ゲッター(getters:)
　ステートの値を別の値に算出するとき
アクション(actions:)
　非同期処理や外部APIと通信し、ミューテーションを呼び出す
　store.dispatch('関数')

<ChildComponent :属性名="this.変数" @click="子からのイベント受け取りした際の呼び出し関数" ></ChildComponent>
import ChildComponent from './ChildComponent'

Vue.component(コンポーネント名, {
  props:{
    親から受け取る属性名:{
        type: Stringとか,
        default: デフォルト値,
        required: 必須か(boolean),
        validator: バリデーション用関数
    }
  },
  methods:{
    sample(){
        // 親コンポーネントにイベントを渡す
        this.$emit("onClick", "引数");
    }
  }
})

イベントのlisten   $on(eventName)
イベントのtrigger  $emit(eventName)

(exportする外部ファイル)
function_file.js
  function funcA() {}
  export default { funcA }; //これをしないと外部から使用できない
(importする側)
import { funcA } from './function_file'; //exportされているものを使用できるようにする

vue create <project_name>
==========================================
Vue CLI v x.x.x
? Please pick a preset: [Manually select features]
? Check the features needed for your project: [Babel, Router, Linter, Unit]
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) [Yes]
? Pick a linter / formatter config: [Prettier]
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) [Lint on save]
? Pick a unit testing solution: [Jest]
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) [In dedicated config files]
? Save this as apreset for future projects? (y/N) [N]
==========================================

baseURL: urlが絶対パスではない場合に結合
url:     url
method:  get / post / put
params:  urlパラメータ指定
data:    リクエストパラメータ?指定
timeout: タイムアウト
headers: ヘッダ設定
responseType: レスポンスタイプ(blobとか)

index.htmlにアクセスするようにする
ビルドの際にindex.htmlにapp.jsを読み込むソースが入り込む
(多分、index.htmlのapp.jsでルーティング処理されて該当画面の処理に処理が移る)
(Springで言うDispatchServletのようなもの？)

$refs ref指定している部分
$t    (Vue I18n) $t('')
$router (Vue Router)#path #query #push

// filter
const COLUMN = 'column1';
this.list = json_data.filter(v => v[COLUMN].includes(this.searchText));
// sort(asc)
const col = 'column1';
this.list.sort(function(a, b) { if (a[col] > b[col]) { return 1; } else { return -1; } });

<table>
<tr v-for="item in list">
<td>{{item.column1}}</td>
</tr>
</table>