Vue.js は双方向のデータ バインディングを毎日学習する必要があります

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：

Message: {{ msg }}

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

This will never change: {{* msg }}

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

{{{ raw_html }}}

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

Vue.js ディレクティブや特殊機能内では補間を使用できないことに注意してください。心配しないでください。Mustache タグが間違った場所で使用された場合、Vue.js は警告を出します。

バインディング式

Mustache タグ内に配置されたテキストは、バインディング式と呼ばれます。 Vue.js では、バインディング式は単純な JavaScript 式と、オプションで 1 つ以上のフィルターで構成されます。

JavaScript 式

これまでのところ、テンプレートは単純なプロパティ キーにのみバインドされています。しかし実際には、Vue.js はデータ バインディング内でフル機能の JavaScript 式をサポートしています。 ).reverse().join('') }}

これらの式は、それらが属する Vue インスタンスのスコープ内で評価されます。制限の 1 つは、各バインディングに含めることができる式は 1 つだけであるため、次のステートメントは無効であることです:

{{ var a = 1 }}

{{ if (ok) { return message } }}

Filter

Vue.js ではオプションの「フィルター」を追加できます式の後に、「パイプ記号」で示されます:

{{ message | Capitalize }}

ここでは、式 message の値を組み込みの Capitalize フィルターに「パイプ」します。このフィルターは実際には単なる JavaScript 関数です。大文字の値を返します。 Vue.js にはいくつかの組み込みフィルターが用意されていますが、独自のフィルターを開発する方法については後ほど説明します。

パイプライン構文は JavaScript 構文ではないため、フィルターは式内で使用できず、式の後にのみ追加できることに注意してください。

フィルターは連結できます:

{{ message | filterA | filterB }}

フィルターは引数も受け取ることができます:

{{ message | filterA 'arg1' arg2 }}

フィルター関数は常に式の値で始まります最初のパラメータ。引用符で囲まれたパラメータは文字列として扱われ、引用符で囲まれていないパラメータは式として評価されます。ここでは、文字列「arg1」が 2 番目のパラメーターとしてフィルターに渡され、式 arg2 の値が 3 番目のパラメーターとして評価されます。

ディレクティブ

ディレクティブは、接頭辞 v- が付いている特別な機能です。ディレクティブの値はバインディング式に制限されているため、前述の JavaScript 式とフィルター ルールもここに適用されます。ディレクティブの役割は、式の値が変更されたときに、DOM に特別な動作を適用することです。 「概要」の例を振り返ってみましょう:

Hello!

ここの v-if 命令は、true に従ってgreeting の値を削除します。または式の false 値 /

要素を挿入します。

パラメータ

一部の命令では、名前の後にコロンで区切って「引数」を付けることができます。たとえば、v-bind ディレクティブは、HTML 機能を応答的に更新するために使用されます。

ここで、href はパラメータであり、v-要素を更新するためのバインド ディレクティブ。 href 属性は式 URL の値にバインドされます。特徴補間 {% raw %}href="{{url}}"{% endraw %} を使用しても同じ結果が得られることに気づいたかもしれません。これは正しく、実際には、特徴補間は内部で v-bind バインディングに変換されます。 。

もう 1 つの例は、DOM イベントをリッスンするために使用される v-on ディレクティブです:

このパラメーターは、リッスンされているイベントの名前です。イベントバインディングについても詳しく説明します。

修飾子

修飾子 (Modifier) は、半角ピリオド . で始まる特別な接尾辞で、命令を特別な方法でバインドする必要があることを示すために使用されます。たとえば、.literal 修飾子は、その値を式ではなくリテラル文字列として解析するようにディレクティブに指示します。

もちろん、ディレクティブを使用する代わりに href="/a/b/c" を使用するだけなので、これは意味がないようです。この例は、構文を示すだけです。修飾子のより実際的な使用法については後ほど説明します。

略語

v - プレフィックスは、テンプレート内の特定の Vue 機能を識別する視覚的な手がかりです。これらのプレフィックスは、既存の HTML コードに動的な動作を追加する必要がある場合に違いを生む可能性があります。しかし、いくつかの一般的な指示を使用すると、このように書くと非常に冗長であると感じるでしょう。また、シングルページ アプリケーション (SPA) を構築する場合、Vue.js がすべてのテンプレートを管理するため、現時点では v- プレフィックスはそれほど重要ではありません。したがって、Vue.js は、最も一般的に使用される 2 つの命令 v-bind と v-on に特別な略語を提供します。これらは、Vue.js がサポートするすべてのブラウザーで正しく解析され、最終的にレンダリングされるマークアップには表示されません。省略構文は完全にオプションですが、段階的に学習するにつれて、省略構文を使用できるようになります。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

Vue.js で毎日学習する必要がある双方向データ バインディングに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。