Vue.jsは、HTMLのスーパーセットであるテンプレート言語を使用します。補間とディレクティブを使用できます。この記事では、ディレクティブについて説明します。
v-text
v-once
v-html
v-bind
- を使用した双方向バインディング
v-model
- 式の使用
- 条件付き
- ループ
- イベント
- 表示または非表示
- イベントディレクティブ修飾子
- カスタムディレクティブ
で見た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-on
DOMイベントをリッスンし、イベントが発生したときにメソッドをトリガーできます。ここでは、クリックイベントをリッスンします。
<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チュートリアル:
- Vue.jsの概要
- Vue.js CLI:使用方法を学ぶ
- Vue.js DevTools
- Vue開発用のVSCodeの構成
- Vue.jsで最初のアプリを作成する
- Vue.js単一ファイルコンポーネント
- Vue.jsテンプレートと補間
- Vue.jsディレクティブ
- Vue.jsメソッド
- Vue.jsの計算されたプロパティ
- CSSを使用したVue.jsコンポーネントのスタイリング
- Vue.jsウォッチャー
- Vueメソッドvsウォッチャーvs計算されたプロパティ
- Vue.jsフィルター
- Vue.jsコンポーネント
- Vue.jsスロット
- Vue.jsコンポーネントの小道具
- Vue.jsイベント
- Vue.jsコンポーネントの通信
- Vue.jsステートマネージャー、Vuex
- Vue、別のコンポーネント内のコンポーネントを使用する
- Vue、クラス名として小道具を使用する方法
- Vue.js単一ファイルコンポーネントでSCSSを使用する方法
- Vue.jsでTailwindを使用する
- Vueルーター
- Vueコンポーネントを動的に表示する
- Vue.jsチートシート
- Vuexを使用してVueデータをlocalStorageに保存する
- Vueを使用してクラスを動的に適用する方法
- Vue、vモデルの使い方
- Vue、データが関数でなければならない理由
- Roadmap to become a Vue.js developer in 2020