The interpolation

The text

Text interpolation with “Mustache” syntax (that is, wrapped in double braces) :

<span>Message: {{ msg }}</span>
Copy the code

The Mustache 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.

If you use the V-once instruction, you can also perform one-time interpolation, where the contents of the interpolation are not updated when the data changes. But be aware that this affects other data bindings on that node.

v-text

Just as {{variables}} contains variables directly, this syntax makes the contents of a div become the contents of a variable referred to by v-text

<body>
<div id="app">{{number}}</div>   //123

<div id="app">
    <div v-text="number"></div>  //123
</div>


<script type="text/javascript">
        var vm = new Vue({
        el:"#app",
        data: {
            number: "123"
        }
        })	
</script>

</body>
Copy the code

v-html

Unlike V-Text, which is pure text content, V-HTML can make content htML-like.

<body>
<div id="app">
    <div v-text="number"></div>  
    <div v-text="number"></div>  
</div>


<script type="text/javascript">
        var vm = new Vue({
        el:"#app",
        data: {
            number: "<h1>123</h1>"
        }
        })	
</script>

</body>
Copy the code

The differences are as follows

One more:

HTML part:

<div id="app">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
Copy the code

Js:

var vm = new Vue({
	el:'#app',
	data:{
	    rawHtml:'<span style="color:red">this is red</span>'}});Copy the code

When v-HTML is used, “V-html =” XXX” is written in the front tag of the SPAN tag, which is equivalent to putting the value of data into the SPAN tag in HTML form.

Attribute (attributes)

Mustache syntax doesn’t work on HTML attributes, so you should use the V-bind directive:

Format: V-bind: attribute =” variable name”

HTML part:

<div v-bind:color="textcolor">123</div>
Copy the code

Js:

data:{
    textcolor:"red"
}
Copy the code

Bind the variable textColor’s value “red” to the box’s “color” property

For Boolean attributes, v-bind is used as:

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

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

JS expression

So far in our templates, we have only bound simple property keys. But in fact, vue.js provides full JavaScript expression support for all data binding.

{{data variable + 1}} // {{data variable/expression?'true code' : 'false code'}} // triplet operation {{data variable. Split (' ').reverse().join(' '<div v-bind:id="'list-' + id"></div>
Copy the code

These expressions are parsed as JavaScript in the data scope of the owning Vue instance.

The limitation is that each binding can only contain a single expression, so none of the following examples will work.

<! {{var a = 1}} <! -- Flow control does not work either, use ternary expressions --> {{if (ok) { return message } }}
Copy the code

instruction

Directives are special attributes prefixed with a V -. The value of the attribute directive is expected to be a single JavaScript expression. The directive’s job is to react to the DOM with the collateral effects of changing the value of an expression. Review the examples we saw in the introduction:

<p v-if="seen"> Now you see me </p>Copy the code

Here, the V-if directive inserts/removes <p> elements based on whether the expression seen is true or false.

parameter

Some instructions can receive a “parameter,” represented by a colon after the instruction name. For example, the V-bind directive can be used to update HTML attribute values in a responsive manner:

<a v-bind:href="url">... </a>Copy the code

Here the href is the argument, telling the V-bind directive to bind the element’s href attribute to the value of the expression URL.

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

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

In this case, the parameter is the name of the event to listen on.

The dynamic parameters

You can dynamically bind different properties, and you can use JavaScript expressions in square brackets as arguments to a directive:

<! Note that there are constraints on how parameter expressions can be written, as described later in the "Constraints on dynamic parameter Expressions" section. --> <a v-bind:[attributeName]="url">... </a>Copy the code

The attributeName(no commas or colons in the name) is evaluated dynamically as a JavaScript expression, and the resulting value is used as the final parameter.

For example, if your Vue instance has a data attributeName with a value of “href”, this binding is equivalent to … < / a >.

Similarly, you can bind handlers to a dynamic event name with dynamic parameters:

<a v-on:[eventName]="doSomething">... </a>Copy the code

In this example, v-on:[eventName] will be equivalent to V-on :focus when the value of eventName is “focus”.

The modifier

The modifier is a special suffix indicated by a period “. “and is used to indicate that an instruction should be bound in a particular way.

shorthand

V – short for bind

<! --> <a v-bind:href="url">... </a> <! <a :href="url">... </a>Copy the code

V – on abbreviation

<! <a v-on:click="doSomething">... </a> <! -- abbreviation --> < a@click ="doSomething">... </a>Copy the code