Vue.jsディレクティブ

Vue.jsは、HTMLのスーパーセットであるテンプレート言語を使用します。補間とディレクティブを使用できます。この記事では、ディレクティブについて説明します。

で見たVue.jsテンプレートと補間Vueテンプレートにデータを埋め込む方法。

この記事では、Vue.jsがテンプレートで提供する他の手法について説明します。ディレクティブ。

ディレクティブは、基本的にテンプレート内に追加されるHTML属性のようなものです。それらはすべてv-、それがVueの特別な属性であることを示します。

各Vueディレクティブについて詳しく見ていきましょう。

`v-text`

補間を使用する代わりに、v-text指令。それは同じ仕事をします：

<span v-text="name"></span>

`v-once`

あなたは方法を知っています{{ name }}にバインドしますnameコンポーネントデータのプロパティ。

どんなときもnameコンポーネントデータが変更されると、Vueはブラウザに表示される値を更新します。

あなたが使用しない限りv-once基本的にHTML属性のようなディレクティブ：

<span v-once>{{ name }}</span>

`v-html`

補間を使用してデータプロパティを出力すると、HTMLはエスケープされます。これは、Vueが自動的に保護するために使用する優れた方法ですXSS攻撃。

ただし、HTMLを出力してブラウザに解釈させたい場合があります。あなたは使用することができますv-html指令：

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

`v-bind`

補間はタグコンテンツでのみ機能します。属性には使用できません。

属性は使用する必要がありますv-bind：

<a v-bind:href="url">{{ linkText }}</a>

v-bind非常に一般的であるため、簡略構文があります。

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

を使用した双方向バインディング`v-model`

v-modelたとえば、フォーム入力要素をバインドし、ユーザーがフィールドのコンテンツを変更したときにVueデータプロパティを変更するようにします。

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

式の使用

ディレクティブ内では任意のJavaScript式を使用できます。

<span v-text="'Hi, ' + name + '!'"></span>

<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

ディレクティブで使用される変数は、対応するデータプロパティを参照します。

条件付き

ディレクティブ内では、三項演算子を使用して条件付きチェックを実行できます。これは次の式であるためです。

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

より組織化された条件を実行できるようにする専用のディレクティブがあります。v-if、v-elseそしてv-else-if。

<p v-if="shouldShowThis">Hey!</p>

shouldShowThisコンポーネントのデータに含まれるブール値です。

ループ

v-forアイテムのリストをレンダリングできます。と組み合わせて使用してくださいv-bindリスト内の各アイテムのプロパティを設定します。

値の単純な配列を繰り返すことができます。

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>
<script>
export default {
data() {
return {
items: [‘car’, ‘bike’, ‘dog’]
}
}
}
</script>

またはオブジェクトの配列：

<template>
  <div>
    <!-- using interpolation -->
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
    <!-- using v-text -->
    <ul>
      <li v-for="todo in todos" v-text="todo.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, title: ‘Do something’ },
{ id: 2, title: ‘Do something else’ }
]
}
}
}
</script>

v-for以下を使用してインデックスを作成できます。

<li v-for="(todo, index) in todos"></li>

イベント

v-onDOMイベントをリッスンし、イベントが発生したときにメソッドをトリガーできます。ここでは、クリックイベントをリッスンします。

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function() {
alert(‘test’)
}
}
}
</script>

パラメータは任意のイベントに渡すことができます。

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(value) {
alert(value)
}
}
}
</script>

また、JavaScriptの小さなビット（単一の式）をテンプレートに直接入れることができます。

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>

clickただのイベントです。一般的なイベントはsubmit、を使用してバインドできますv-on:submit。

v-on非常に一般的であるため、その省略構文があります。@：

<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>

詳細についてはv-onの中にVueイベント

表示または非表示

Vueインスタンスの特定のプロパティがtrueと評価された場合にのみ、DOMに要素を表示するように選択できます。v-show：

<p v-show="isTrue">Something</p>

要素は引き続きDOMに挿入されますが、display: none条件が満たされない場合。

イベントディレクティブ修飾子

Vueは、以下に関連して使用できるいくつかのオプションのイベント修飾子を提供しますv-on、イベントハンドラーで明示的にコーディングしなくても、イベントに自動的に何かを実行させます。

1つの良い例は.prevent、自動的に呼び出すpreventDefault()イベントで。

この場合、フォームによってページが再ロードされることはありません。これがデフォルトの動作です。

<form v-on:submit.prevent="formSubmitted"></form>

その他の修飾子には、.stop、.capture、.self、.once、.passiveそして彼らは公式ドキュメントで詳細に説明されています。

カスタムディレクティブ

Vueのデフォルトディレクティブを使用すると、すでに多くの作業を実行できますが、必要に応じていつでも新しいカスタムディレクティブを追加できます。

読んだhttps://vuejs.org/v2/guide/custom-directive.htmlあなたがもっと学ぶことに興味があるなら。

私の無料ダウンロードVueハンドブック

Vue.jsディレクティブ

Vue.jsは、HTMLのスーパーセットであるテンプレート言語を使用します。補間とディレクティブを使用できます。この記事では、ディレクティブについて説明します。

v-text

v-once

v-html

v-bind

を使用した双方向バインディングv-model