Nuxt.js による静的サイト制作
● 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=パラメータ名」
● vue.js で エスケープしない記法 「v-html=パラメータ名」
<span v-html="rawHtml"></span>
↑
この span のコンテンツは rawHtml プロパティの値に置き換えられ、プレーンな HTML として解釈されます。
vue.js の wysiwygエディタ
● vue-html-editor
http://haixing-hu.github.io/vue-html-editor/
jQueryのsummer note の vue.js移植版
● toast-ui.vue-editor
添付ファイル1
){kind=link}
vue.js レンダリング前 のテンプレートや変数を見せないようにする
・cssを作成する
[v-cloak] {
display: none;
}
・見せたくない要素に v-cloak をつける
<div v-cloak>
これだけでレンダリング前は非表示にして、レンダリング後に自動的に表示されるようになります。
transition-groupでリストにtransitionアニメーションをつける
● 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 のデータを削除した時にアニメーションがつけられます。 簡単ですね。
拡張は色々できます。
Vue.js で 数字に3桁ごとにカンマをつけるフィルター「number_format」を作成する
● 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 }}