● pluck

よくある結果セットから、特定のカラムだけ取り出して配列にします。

new Vue({
  el: '#app',
  data: {
    key: 'name',
    users: [
      {id: 1, name: 'sato', age: 33},
      {id: 2, name: 'suzuki', age: 26},
      {id: 3, name: 'yamada', age: 40},
    ]
  },
  filters: {
    pluck(users, key) {
      return users.map(user => user[key])
    }
  }
})

引用 : https://iwb.jp/vuejs-custom-filter-sample-list/

また、そのままカンマ区切りで出力する場合は次のように .join(', ') します。
　

{{ props.row.tantos | pluck('name').join(', ') }}

● yarn のインストール

npm install -g yarn

● nuxt.js サイトの新規作成

プロジェクト名を mysite としています。

yarn create nuxt-app mysite

● サイトの起動

cd mysite
yarn dev

http://localhost:3000/
でサイトにアクセスできるようになります。

● ページの追加

pages ディレクトリの中に works ディレクトリを作成して 1001.vue を次の内容で保存します。

<template>
  <div>
アイウエオ
  </div>
</template>

http://localhost:3000/works/1001
でアクセスできるようになります。

● 静的サイトを htmlに書き出し

yarn generate

dist/ ディレクトリが作成されてそこに書き出されます。

● vue.js で　エスケープしない記法 「v-html=メソッド名()」

<div v-html="my_calc(props.row.sum_no)"></div>

　　↑

props.row.sum_no を my_calc メソッドを通した結果を エスケープせずに表示します

● vue.js で　エスケープしない記法 「v-html=パラメータ名」

<span v-html="rawHtml"></span>

　　↑

この span のコンテンツは rawHtml プロパティの値に置き換えられ、プレーンな HTML として解釈されます。

● vue-html-editor

http://haixing-hu.github.io/vue-html-editor/

jQueryのsummer note の vue.js移植版

● toast-ui.vue-editor

https://github.com/nhnent/toast-ui.vue-editor

・cssを作成する

[v-cloak] {
  display: none;
}

・見せたくない要素に v-cloak をつける

<div v-cloak>

これだけでレンダリング前は非表示にして、レンダリング後に自動的に表示されるようになります。

● transition-groupでリストでデータを作成、削除した時に、transitionアニメーションをつける

・アニメーションさせたいリスト全体を<transition-group>タグで囲います

<transition-group>
    <div v-for="v,i in data_loop" :key="v.id">
        (% v.tanto_name %)
    </div>
</transition-group>

　↓ これはレンダリングするとこのようになります

<span>
<div>担当者A</div>
<div>担当者B</div>
<div>担当者C</div>
</span>

transition-group タグが span タグ に変わります

任意のタグにするには

<transition-group>

　↓

<transition-group tag="div">

とします。（div タグになります）

・アニメーション用のCSSを用意する

.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
}

以上で vue.js のデータを削除した時にアニメーションがつけられます。 簡単ですね。

拡張は色々できます。

公式ドキュメント参照
https://jp.vuejs.org/v2/guide/transitions.html

● Vue.js でフィルターを作成する

数字に3桁ごとにカンマをつけるフィルター「number_format」を作成する

Vue.filter('number_format', function (value) {
    if (! value) { return false; }
    return value.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
});

● Vue.js で使用する

よくあるテンプレートのフィルターと同じ書き方で使えます。

{{ props.row.price_with_shipping_no|number_format }}
{{ 123456789 | number_format }}