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

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

插值

文本

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

Message: {{ msg }}

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

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

This will never change: {{* msg }}

原始的 HTML

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

内容以 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 つだけであるため、次のステートメントは無効であることです:

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

Filter

{{ 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 ディレクティブです:

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