Vueと共通

【Nuxt.js】カスタムディレクティブ基礎編:とりあえず使ってみよう!

前置き

Vue.jsのカスタムディレクティブをNuxt.jsで!
ローカルverとグローバルverで、
どちらでも使いやすく簡単な例で紹介。
今回は背景色を変えるだけです。

…とはいえfilterはよく使われますが
実際こちらはなかなか見かけませんね。
カスタムディレクティブの良い使い方があれば
教えていただけると嬉しいです…😀

※併用する場合
同じディレクティブ名にしてしまうと
ローカルに記載された方が優先されます。
名前は分けましょう!


ローカルver

) pages

directivesで命名した物を
v-{{ name }}で記載するだけ!
今回はdiv全体に背景色をつけるため
divにv-bgを指定しております。


グローバルver

directory

pages/
--| index.vue

plugins/
--| bg.js

nuxt.config.js

パターン1

・/pluginsにjsファイルを追加
・nuxt.config.jsのpluginsに記載
・template内にv-{{ name }}を書くだけ!

) file

) pages


パターン2-1

jsで直接値の指定はせず、
使用箇所で好きな値を指定できます。

) file

) pages


パターン2-2

argを使用した場合です。
argはpropsのようなイメージですね。
いくつもデータを渡せます♪
https://jp.vuejs.org/v2/guide/custom-directive.html#ディレクティブフック引数

) file

) pages


modifiersを使ってみる

時間で色を変えてます🌟

-Vueと共通
-,

© 2020 aLiz Nuxt