● 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 }}