Vue.js must learn two-way data binding every day

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

插值

文本

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

45a2772a6b6107b401db3c9b82c049c2Message: {{ msg }}54bdf357c58b8a65c66d7c19c8e4d114

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

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

45a2772a6b6107b401db3c9b82c049c2This will never change: {{* msg }}54bdf357c58b8a65c66d7c19c8e4d114

原始的 HTML

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

dc6dce4a544fdca2df29d5ac0ea9906b{{{ raw_html }}}16b28748ea4df4d9c2150843fecfba68

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

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

HTML 特性

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

02d2b8f69afd719d73188be9022421d916b28748ea4df4d9c2150843fecfba68

Note that interpolation cannot be used within Vue.js directives and special features. Don’t worry, Vue.js will give you a warning if the Mustache tag is used in the wrong place.

Binding expression

The text placed in the Mustache tag is called a binding expression. In Vue.js, a binding expression consists of a simple JavaScript expression and optionally one or more filters.

JavaScript Expressions

So far our templates have only been bound to simple property keys. However, Vue.js actually supports full-featured JavaScript expressions within data binding:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' } }

{{ message.split('').reverse().join('') }}

These expressions will be evaluated within the scope of the Vue instance to which they belong. One limitation is that each binding can only contain a single expression, so the following statement is invalid:

43370af68fe9d03bdae05f07d61d5af8
{{ var a = 1 }}

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

Filter

Vue.js allows adding an optional "Filter" after the expression, indicated by the "pipe character":

{{ message | capitalize }}

Here we "pipe" the value of the expression message to the built-in capitalize filter. This filter is actually just a JavaScript function that returns the capitalized value. Vue.js provides several built-in filters, and we will talk about how to develop your own filters later.

Note that pipeline syntax is not JavaScript syntax, so filters cannot be used within expressions, but can only be added after the expression.

Filters can be concatenated:

{{ message | filterA | filterB }}

Filters can also accept parameters:

{{ message | filterA 'arg1' arg2 }}

Filter functions always take the value of an expression as the first argument. Quoted parameters are treated as strings, while unquoted parameters are evaluated as expressions. Here, the string 'arg1' is passed to the filter as the second argument, and the value of the expression arg2 is evaluated as the third argument.

Directives

Directives are special features prefixed with v-. The value of the directive is limited to a binding expression, so the JavaScript expression and filter rules mentioned above also apply here. The responsibility of a directive is to apply some special behavior to the DOM when the value of its expression changes. Let's look back at the example in "Overview":

fca80fab631d6c66ff12d51e112618b1Hello!94b3e26ee717c64999d7867364b1b4a3

Here the v-if directive will be based on The true or false expression greeting value deletes/inserts the e388a4556c0f65e1904146cc1a846bee element.

Parameters

Some instructions can have a "parameter" (Argument) after their name, separated by a colon. For example, the v-bind directive is used to update HTML attributes responsively:

16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed

Here href is the parameter, It tells the v-bind directive to bind the element's href attribute to the value of the expression url. You may have noticed that you can achieve the same result with feature interpolation {% raw %}href="{{url}}"{% endraw %}: this is correct, and actually internally feature interpolation is converted to v-bind Binding.

Another example is the v-on directive, which is used to listen to DOM events:

913ab33578b43051d8ce890f7743009b

This parameter Is the name of the event being monitored. We'll also explain event binding in detail.

Modifiers

Modifiers (Modifiers) are special suffixes starting with a half-width period ., used to indicate that instructions should be bound in a special way. For example, the .literal modifier tells the directive to parse its value as a literal string rather than an expression:

7c0f991b5451b1dec9555cce44066b3e 5db79b134e9f6b82c0b36e0489ee08ed

Of course, this doesn't seem to make sense, since we only need to use href="/a/b/c" instead of using a directive. This example is just to demonstrate the syntax. We will see more practical uses of modifiers later.

Abbreviation

The v- prefix is ​​a visual cue that identifies a specific Vue feature in the template. These prefixes can make a difference when you need to add dynamic behavior to some existing HTML code. But when you use some common instructions, you will feel that writing like this is really verbose. And when building a single-page application (SPA), Vue.js will manage all templates, and the v- prefix is ​​not so important at this time. Therefore Vue.js provides special abbreviations for the two most commonly used instructions v-bind and v-on:

v-bind abbreviation

<!-- 完整语法 -->
<a v-bind:href="url"></a>
 
<!-- 缩写 -->
<a :href="url"></a>
 
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
 
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on abbreviation

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
 
<!-- 缩写 -->
<a @click="doSomething"></a>

They look a little different from "legal" HTML, but they are parsed correctly in all Vue.js supported browsers and do not appear in the final rendered markup. The abbreviation syntax is completely optional, but as you learn step by step, you will be glad to have them.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to two-way data binding that Vue.js must learn every day, please pay attention to the PHP Chinese website!