A, the interpolation

1. The text

Data defines attributes that can be used directly in structures through interpolation expressions

<span>Message: {{ msg }}</span>

The double bracket tag will be replaced with the value of the MSG property on the corresponding data object. Whenever the MSG property on the bound data object changes, the content at the interpolation is updated.

2. V – HTML (raw HTML)

Double braces interpret the data as plain text, not HTML code. To output real HTML, you need to use V-HTML

3. V-bind

<button v-bind:disabled="isButtonDisabled">Button</button>

Another way of writing:

<button :disabled="isButtonDisabled">Button</button>

If isButtonDisabled is null, undefined, or false, the disabled attribute is not even included in the rendered

4. JavaScript expression

Vue.js provides full JavaScript expression support

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>
Copy the code

Second, the instruction

The V-bind directive can be used to update HTML attributes in a responsive manner:

Another example is the V-ON directive, which listens for DOM events:

<a v-on:click="doSomething">... </a>

Another way to write it is:

<a @click="doSomething">... </a>

The method doSomething is defined in methods

The modifier

. Prevent Prevents default events

.stop prevents bubbling

.self blocks its own event

When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using V-on :click.prevent. Self blocks all clicks, whereas V-on :click.self. Prevent only blocks clicks on the element itself.