Vue.jsで組み込みおよびカスタムディレクティブを使用する方法

投稿日: 2022-04-20 2022-10-15
タグ: Development, javascript, Vue.js

著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

フロントエンドフレームワークとして、Vue.jsはReactとAngularの混合物と考えることができます。 VueはReactのprop主導のアプローチを採用していますが、Angularによって普及したディレクティブも使用しています。このコンテキストでは、ディレクティブは、開発者がHTMLテンプレート内で使用できるコードまたはロジックの再利用可能なチャンクです。これらを使用すると、要素を条件付きでレンダリングしたり、イベントを要素に接続したり、Vueコードに依存する動的属性を作成したりするなど、さまざまな方法でHTMLを操作できます。

このチュートリアルでは、次のような最も一般的な組み込みのVueディレクティブのいくつかを試してみます。 v-if, v-show, v-on, v-bind, v-model、と v-html. これらの最初のセクションでは、チュートリアルで、VueシングルファイルコンポーネントプレイグラウンドなどのオンラインVueプレイグラウンドで実行できる例を紹介します。これに加えて、新しいVueプロジェクトを作成して、追加機能のためにHTML要素に追加できるカスタムディレクティブを試してみます。

前提条件

このチュートリアルの最初のセクションでは、 VueシングルファイルコンポーネントプレイグラウンドなどのオンラインVueプレイグラウンドを使用して、ブラウザでフォローできます。
カスタムディレクティブの作成セクションでプロジェクトを作成するには、Node.jsバージョンが必要です。 10.6.0 以上がコンピュータにインストールされています。これをmacOSまたはUbuntu18.04にインストールするには、macOSで Node.jsをインストールしてローカル開発環境を作成する方法、またはNode.jsをインストールする方法のPPAを使用してインストールするセクションの手順に従います。 Ubuntu18.04で。
また、マシンにVueCLIがインストールされている必要があります。
最後に、このチュートリアルは、JavaScript、HTML、およびCSSの知識を前提としています。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、 CSSを使用してWebサイトを構築する方法シリーズ、およびJavaScriptでコーディングする方法。

を使用して `v-if`, `v-else`、と `v-else-if` 指令

Vue.jsには、開発者がフレームワーク内で作業するときに一般的に使用するいくつかのディレクティブがあらかじめパッケージ化されています。などのディレクティブ v-if, v-show, v-on, v-model, v-bind, v-html、およびその他すべてがすぐに使用できるように提供されています。これらの提供されたディレクティブはすべて、 v-.

The v-if, v-else、と v-else-if ディレクティブを使用すると、条件付きでレンダリングされたHTML要素を作成でき、JavaScriptの if、else if、else条件と同様に機能します。 JavaScriptのようにHTMLまたはコードを返す代わりに、Vueはそのコードブロックを条件付きでレンダリングします。

Vueディレクティブを適用するには、それをHTML要素に追加します。 template Vue単一ファイルコンポーネントのセクション。たとえば、追加したい場合 v-if 段落要素へのディレクティブでは、次の構文を使用します。

<p v-if="condition"></p>

この場合、強調表示されます condition は、段落要素がレンダリングされるかどうかを決定するブール式のプレースホルダーです。

どのように v-if ディレクティブは実際の状況で機能します。ユーザーのウェルカムページ用に次のコードを作成します。

<template>
  <p v-if="user.firstName && user.lastName">
    Welcome, {{ user.firstName }} {{ user.lastName }}!
  </p>
  <p v-else-if="user.username">
    Welcome, {{ user.username }}!
  </p>
  <div v-else>
    <button>Login</button>
    <button>Create Account</button>
  </div>
</template>

<script setup>
	const user = {
    firstName: 'Sammy',
    lastName: 'Shark',
    username: 'sammyDO'
  }
</script>

このコードには、2つを含む多くのHTML要素があります <p> タグと <div> 2つのボタンでタグ付けします。ただし、このコードがブラウザーで実行されると、trueと評価される条件に応じて、これらのコードのチャンクの1つだけがレンダリングされます。 false条件のHTMLは、DOM（Document Object Model）ではレンダリングされません。

今のように、両方 firstName と lastName に値があります <script> タグ、式 user.firstName && user.lastName 評価します true、ブラウザは段落をレンダリングします。これは、ブラウザで次の画像のようになります。

どちらかなら firstName また lastName が定義されていない場合、条件は次のように評価されます false、およびVueはに移動します v-else-if 指令。このディレクティブはに添付されています user.username 式なので、これが次のように評価される場合 true 添付された段落要素をレンダリングします。これを試すには、を削除します firstName あなたの中で <script> 鬼ごっこ：

...
<script setup>
	const user = {
    lastName: 'Shark',
    username: 'sammyDO'
  }
</script>

状態から user.firstName && user.lastName 今評価します false しかし user.username に評価します true、代わりにユーザー名が表示されます。これを次の画像に示します。

最後に、すべての条件が次のように評価された場合 false、制御はに渡されます v-else ディレクティブ。ここでは、ログインまたはアカウントを作成するための2つのボタンが表示されます。これを試すには、を削除してください username のデータ script エレメント：

...
<script setup>
	const user = {
    lastName: 'Shark',
  }
</script>

これで、ブラウザに表示されるデフォルトのボタンが見つかります。

重要なのは、次の要素が必要であることに注意することです。 v-if 直前のディレクティブ v-else-if また v-else 指令。そうしないと動作しません。

例として、次のコードスニペットは無効と見なされ、ブラウザのコンソールでエラーが発生します。

<template>
  <p v-if="user.firstName && user.lastName">
    Welcome, {{ user.firstName }} {{ user.lastName }}!
  </p>
  <p v-else-if="user.username">
    Welcome, {{ user.username }}!
  </p>
  <h1>Some Title</h1>
  <div v-else>
    <button>Login</button>
    <button>Create Account</button>
  </div>
</template>

<script setup>
	const user = {
    firstName: 'Sammy',
    lastName: 'Shark',
    username: 'sammyDO'
  }
</script>

以来 <h1> 段落の後の要素 v-else-if ディレクティブにはディレクティブがありません。このコードはレンダリングに失敗し、次の構文エラーが発生します。

OutputSyntaxError: v-else/v-else-if has no adjacent v-if.

この要約で v-if これで、HTML要素を条件付きで表示する別の方法を試すことができます。 v-show 指令。

を使用して `v-show` 指令

を超えて v-if関連するディレクティブには、条件に基づいてHTML要素を表示するために使用できる別のディレクティブがあります。その指令は v-show. に似ています v-if、がないことを除いて else-if と else 対応する要素と要素は、条件付きでレンダリングされるのではなく、条件付きで表示されます。

前のセクションと同様の状況に対処する次のコードを見てください。

<template>
  <div v-show="!userIsLoggedIn">
    <button>Login</button>
    <button>Create Account</button>
  </div>
  <div v-show="userIsLoggedIn">
    <p>Welcome!</p>
  </div>
</template>

<script setup>
	const userIsLoggedIn = true
</script>

このコードでは、あなたは添付しました v-show 2つに <div>s、条件式とともに。 v-show 引用符で囲まれた条件が満たされた場合、添付されたHTMLが表示されます。この例では、 userIsLoggedIn に評価します true、ブラウザにが表示されます <div> とともに Welcome! 段落：

今すぐ変更します userIsLoggedIn の値 false:

...
<script setup>
	const userIsLoggedIn = false
</script>

ログインボタンが再び表示されます。

の違いを強調する価値があります v-if と v-show. v-if 条件付きでHTMLをレンダリングします。条件式が次のように評価される場合 false、DOMにはまったく含まれません。 v-show 一方、常にDOMでHTMLをレンダリングします。ただし、要素はブラウザに表示されません。これは、要素が display: none CSSスタイル。

条件付き v-if と v-show ディレクティブがカバーされたら、次に進むことができます v-on イベントをHTML要素に関連付けるディレクティブ。

を使用して `v-on` 指令

The v-on ディレクティブは、特定のイベントで関数を実行します。これは、カスタムイベントまたは標準のJavaScriptイベント（次のような）にすることができます click, hover、また mouseenter. 使用する場合 v-on ディレクティブの場合、コロンの後にイベントタイプを指定する必要があります（:）および実行する関数。コンポーネントの関数名は、引用符の間にあります。

この例として、次の強調表示されたコードを調べます。

<template>
  <button v-on:click="handleClick">Click Me</button>
</template>

<script setup>
	function handleClick() {
    alert('You clicked the button!')
  }
</script>

この例では、コンポーネント関数 handleClick ユーザーがをクリックすると実行されます <button> ディレクティブがアタッチされている要素。このコードを実行してボタンをクリックすると、ボタンをクリックしました！というアラートが表示されます。

とのイベント v-on ディレクティブは、イベント修飾子をイベント自体にチェーンすることもできます。これらのイベント修飾子は、イベントの実行方法を変更でき、通常はJavaScriptの複数行を必要とする機能を作成する際の時間を節約できます。 Vueが提供するいくつかの修飾子は次のとおりです。

once：イベントを1回だけ発生するように制限します。
self：イベントは、イベントターゲットがディレクティブを保持する要素と同じである場合にのみトリガーされます。
prevent：イベントの発生を停止します。
stop：イベントの伝播を停止します。

次に、の例を実行します once 構文を試すためのイベント修飾子。次の強調表示されたコードを前のスニペットに追加します。

<template>
  <button v-on:click.once="handleClick">Click Me</button>
</template>
...

とともに .once 修飾子、関数 handleClick 1回だけ実行されます。 Click Me ボタンをクリックしてみると、アラートがポップアップ表示されます。アラートをクリアしてから、もう一度クリックします。イベントはすでに1回発生しているため、発生しません。

The v-on ディレクティブにも省略構文があります。省略構文を使用するには、 v-on: と @.

<template>
  <button @click.once="handleClick">Click Me</button>
</template>
...

これは、と同じ動作になります v-on:click.once.

イベントがで対処された今 v-on、を使用してデータをテンプレート要素にバインドすることに進むことができます v-bind と v-model.

を使用して `v-bind` と `v-model` 指令

Vue.jsはModel-View-ViewModel（MVVM）フレームワークです。つまり、個別のデータ（モデル）がHTML（ビュー）を更新し、ビューがモデルを更新します。この分離は、ビュー、またはブラウザーでレンダリングされるものが、データ処理とは独立して動作できることを意味します。

MVVMアプローチを制定するために、Vueは、データ、小道具、および計算されたプロパティをVueコンポーネントに渡す方法を提供します。これは、双方向データバインディングを使用して実行されます。これにより、ビューとモデルが相互に対話できるようになります。

次のコードでは、 <p> データ値に応じて変化する動的コンテンツを持つ要素：

<template>
  <p>I am from {{ city }}.</p>
</template>

<script setup>
	const city = 'Cincinnati'
</script>

このスニペットでは、 {{ city }} へのデータ参照です city 定数 <script> その後の要素。今のように、 {{ city }} 文字列に評価されます "Cincinnati"、および私はシンシナティ出身という単語を含む段落要素がブラウザに表示されます。変更する場合 Cincinnati に Seattle、 {{ city }} テンプレート内のはそれに応じて更新されます。

この動的コンテンツの場合、ディレクティブを使用する必要はありません。テンプレートは、 city 自動的に一定。ただし、HTML属性を参照して動的にする場合は、 <script> データの場合、データを明示的にバインドする必要があります v-bind.

これを説明するために、 {{ city }} リンク内のプレースホルダー（<a>）割り当てられた都市のウィキペディアページに動的につながるタグ city 絶え間ない。まず、ラップします {{ city }} で <a> タグを付けると、ユーザーはそれをクリックして、都市自体の詳細情報を取得できます。その後、という計算プロパティを作成します wikipediaLink 適切なURLを返すようにします。強調表示されたコードを追加します。

<template>
  <p>I am from <a href="">{{ city }}</a>.</p>
</template>

<script setup>
  import { computed } from 'vue'
  
	const city = 'Cincinnati'
  const wikipediaLink = computed(() =>`https://en.wikipedia.org/wiki/${city}`)
</script>

の中に <script> 要素、インポートしました computed Vueライブラリの関数を使用して、URLをに割り当てます wikipediaLink. URL文字列は、テンプレートリテラルを使用して、 city.

ウィキペディアのリンクができたので、先に進んで、計算されたプロパティ名をに追加します。 href 以前に追加したアンカータグの属性：

<template>
  <p>I am from <a href="wikipediaLink">{{ city }}</a>.</p>
</template>
...

この時点でこれをブラウザで表示すると、コンソールエラーが発生します。これは、現在Vue.jsが考えているためです wikipediaLink は文字列リテラルであり、有効なURLではありません。

Vue.jsにの戻り値を使用するように指示するには wikipediaLink 計算されたプロパティ、あなたは使用する必要があります v-bind 指令。これにより、次のように、テンプレート内の参照が計算されたプロパティにバインドされます。

<template>
  <p>I am from <a v-bind:href="wikipediaLink">{{ city }}</a>.</p>
</template>
...

さて、 href 値は、シンシナティウィキペディアページのURLになります。このURLは、 city プロパティは、シアトルなどの別の都市に変更されます。

に似ている v-on, v-bind また、使用することを選択できる省略形があります。速記を使用するには、 v-bind: と :、次のように：

<template>
  <p>I am from <a :href="wikipediaLink">{{ city }}</a>.</p>
</template>

Vue.jsには、値をにバインドするために使用される別のディレクティブがあります data 財産。ただし、このディレクティブは次の場合にのみ機能します input タグ：

<template>
  <input v-model="city" type="text" />
</template>

<script setup>
  const city = 'Cincinnati'
</script>

使用する場合 v-model ディレクティブ、入力フィールドをバインドしています value 引用符で囲まれたデータプロパティの属性。を使用することをお勧めします v-model ディレクティブオーバー v-bind フォーム用 <input /> タグ。

このVueコンポーネントは、次の画像に示すように、デフォルトのテキストCincinnatiでテキスト入力ボックスをレンダリングします。

このセクションでは、HTML属性を変数データまたは計算データにバインドするさまざまな方法について説明しました。次に、 v-html テンプレートにHTMLを挿入するディレクティブ。

を使用して `v-html` 指令

このチュートリアルで説明する最後のパッケージ済みディレクティブは次のとおりです。 v-html. このディレクティブは、文字列リテラル内のHTMLをブラウザが読み取るための生のHTMLに変換します。これにより、HTMLの作成方法と適用方法をより柔軟に設定できます。

この架空のコンポーネントでは、 <div> それは v-html ディレクティブ data その値としてのプロパティ：

<template>
  <div v-html="someHtmlCode" />
</template>

<script setup>
  const someHtmlCode = `<p>Some <span>HTML</span> in this string</p>`
</script>

The v-html ディレクティブは、Vue.jsに文字列を挿入するように指示しています someHtmlCode へのデータ参照 <div /> テンプレートで。 Vueでコンパイルすると、DOMに次のように表示されます。

<div>
  <p>Some <span>HTML</span> in this string</p>
</div>

HTMLはブラウザでもレンダリングされます。

このディレクティブは、RESTAPIサービスからのHTMLまたは外部JavaScriptファイルからの大きなHTMLをレンダリングする必要がある場合に役立ちます。

チュートリアルのこの時点で、Vue.jsによって提供されるディレクティブを試しました。ただし、Vueが提供しないディレクティブが必要になる場合があります。このような場合、HTMLテンプレートの特定のロジックを処理するカスタムディレクティブを作成できます。

カスタムディレクティブの作成

Vue.jsフレームワークでは、プロジェクトの個々のニーズに合わせてカスタムディレクティブを作成することができます。たとえば、このセクションでは、 v-theme テンプレートの要素に特定のスタイルを適用するディレクティブ。

この時点までは、スタンドアロンのVueプロジェクトをフォローする必要はありませんでした。ただし、このセクションでは、VueCLIから生成された新しいプロジェクトを作成します。

ターミナルを開き、次のコマンドを使用して新しいプロジェクトを生成します。このプロジェクトの名前は custom-directive、これはルートディレクトリの名前にもなります。

vue create custom-directive

このチュートリアルでは、 Vue 3x 為に Choose Vue Version. アプリが作成されたら、選択したテキストエディタで生成されたプロジェクトを開きます。次に、 main.js のファイル src ディレクトリ。

まず、このファイルを設定します。店 createApp(App) に const 後で参照できるように：

custom-directive / src / main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

今それで createApp 独自に機能する const、ディレクティブを追加することでこのアプリを拡張できます。

custom-directive / src / main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive("theme", {})

app.mount('#app')

このコードでは、 directive() Vueインスタンスで機能します。この関数は、2つの引数を受け入れます。ディレクティブ名（theme この場合）およびライフサイクルフックを持つオブジェクト。

このコードは、コンポーネントが次の場合に実行されるように設定します。 mounted. このマウントされたフックは、2つの引数を受け入れます。 el、HTML要素、および binding、ディレクティブに渡される値。この情報を使用して、以下を作成できます。

custom-directive / src / main.js

const app = createApp(App)

app.directive("theme", {
  mounted(el, binding) {

  }
})

app.mount('#app')

このため theme ディレクティブでは、要素のスタイルを決定するために文字列を渡します。この文字列は次のいずれかになります primary, secondary、また tertiary、それぞれが仮想のカラースキームの色に対応します。

ディレクティブコードが配置されたので、ロジックを追加できます。ディレクティブのクォータマーク内の値にアクセスするには、次を使用できます。 binding.value. 要素のテキストの色を変更するには、JavaScriptを使用して el プロパティ：

custom-directive / src / main.js

const app = createApp(App)

app.directive("theme", {
  mounted(el, binding) {
    if (binding.value === 'primary') {
      el.style.color = 'red'
    } else if (binding.value === 'secondary') {
      el.style.color = 'green'
    } else if (binding.value === 'tertiary') {
      el.style.color = 'blue'
    } else {
      el.style.color = 'black'
    }
  }
})

app.mount('#app')

このスニペットの強調表示されたセクションは、一連の if/else ステートメント。ディレクティブに渡される値が primary、テキストの色は red, secondary になります green, tertiary になります blue、および値がデフォルトに戻ることはありません black.

閉じて保存します main.js ファイル。

この時点で、Vue.jsアプリケーションで使用できるカスタムディレクティブを作成しました。 Vueは、ディレクティブ名の前に自動的にプレフィックスを付けます v-、したがって、テンプレートは次のようにディレクティブにアクセスできます v-theme.

あなたの App.vue 選択したテキストエディタでファイルを作成します。テンプレートに、 <p> テキストを含むタグ：

custom-directive / src / App.vue

<template>
  <p>This text will change color based on the directive value!</p>
</template>

このファイルを保存してから、でアプリケーションを起動します npm run serve. これにより、プロジェクトが :8080 あなたのポート localhost:

npm run serve

生成されたプロジェクトを表示するには、選択したブラウザを開いて、 localhost:8080 URLバーにあります。段落要素が黒でレンダリングされています。

次に、ディレクティブをHTMLに追加して、色を変更します。

custom-directive / src / App.vue

<template>
  <p v-theme="`primary`">This text will change color based on the directive value!</p>
</template>

このファイルを保存して、Webブラウザで開きます。引用符内の値は生の値であり、自動的にVueにバインドされるため、引用符内でラップする必要があります primary バックティックを使用して文字列に変換します。

ファイルを保存すると、レンダリングされたサイトのテキストが赤に変わります。

ディレクティブは、の値を読み取ります binding オブジェクトを作成し、それに応じてコードを実行します。値が primary、JavaScriptはテキストの色を赤に変更します。

このセクションでは、カスタムディレクティブを作成して登録し、そのロジックを実行しました。また、新しいカスタムディレクティブを追加し、それをテンプレートのHTML要素に割り当てました。

結論

このチュートリアルでは、演習を実行して、ディレクティブとは何か、およびそれらの使用方法をテストしました。具体的には、次のような最も一般的な組み込みディレクティブを使用しました。 v-if, v-on, v-show、と v-html. これに加えて、独自のカスタムディレクティブを登録して作成しました。このディレクティブ、 v-theme、JavaScript関数を実行するために任意のHTML要素で使用できるようになりました。

いくつかのディレクティブを確認しましたが、Vue.jsによってさらに多くのディレクティブが利用可能になりました。ディレクティブの詳細については、公式のVue.jsドキュメントを確認することをお勧めします。 Vueのその他のチュートリアルについては、Vue.jsシリーズページを使用してWebサイトを開発する方法を確認してください。

getdocs

13036

序章

前提条件

を使用して v-if, v-else、 と v-else-if 指令

を使用して v-show 指令

を使用して v-on 指令

を使用して v-bind と v-model 指令

を使用して v-html 指令

カスタムディレクティブの作成

結論

getdocs

を使用して `v-if`, `v-else`、と `v-else-if` 指令

を使用して `v-show` 指令

を使用して `v-on` 指令

を使用して `v-bind` と `v-model` 指令

を使用して `v-html` 指令