home PYTHONJAVA
 

Vue.js template syntax

Vue.js uses an HTML-based template syntax that allows developers to declaratively bind DOMs to the data of the underlying Vue instance.

The core of Vue.js is a system that allows you to render data into the DOM using a concise template syntax.

In conjunction with the response system, Vue intelligently calculates the minimum cost of re-rendering components and applies them to DOM operations as application state changes.


Interpolation

Text

The most common form of data binding is text interpolation using {{...}} (double braces):

Text Interpolation

<div id=" app"> <p>{{ message }}</p> </div>

Html

Use the v-html directive to output html code:

v-html directive

<div id=" app"> <div v-html="message"></div> </div> <script> New vue({ El: '#app', Data: { Message: '<h1> welookups Tutorial</h1>' } }) </script>

properties

The value in the HTML attribute should use the v-bind directive.

The following example evaluates the value of class1, if true, uses the style of the class1 class, otherwise the class is not used:

v-bind directive

<div id=" app"> <label for="r1"> Modify color</label> <input type="checkbox" v- Model="use " id="r1"< /span>> <br><br> <div v-bind:class="{'class1': use}"> V-bind:class directive </div> </div> <script> New vue({ El: '#app', Data:{ Use: false } }); </script>

expression

Vue.js provides full JavaScript expression support.

JavaScript expression

<div id=" app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">welookups Tutorial</div> </div> <script> New vue({ El: '#app', Data: { Ok: true, Message: 'welookups', Id : 1 } }) </script>


command

The

directive is a special property with a v- prefix.

The

directive is used to apply certain behaviors to the DOM when the value of the expression changes. The following example:

Instance

<div id=" app"> <p v-if="seen">Now you see me</p> </div> <script> New vue({ El: '#app', Data: { Seen: true } }) </script>

Here, the v-if directive will decide whether to insert the p element based on the value of the expression seen (true or false ).

parameters

The

parameter is indicated by a colon after the instruction. For example, the v-bind directive is used to responsively update HTML attributes:

Instance

<div id=" app"> <pre><a v-bind:href="url"> welookups Tutorial</a> ;</pre>< /span> </div> <script> New vue({ El: '#app', Data: { Url: 'http://www.welookups.com' } }) </script>

Here href is a parameter that tells the v-bind directive to bind the href attribute of the element to the value of the expression url.

Another example is the v-on directive, which listens for DOM events:

<a v- On:click="doSomething">

The argument here is the name of the event being listened to.

modifier

The

modifier is a special suffix specified by the period . to indicate that an instruction should be bound in a special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() for the triggered event:

<form v- On:submit.prevent="onSubmit"></form>

User input

In the input input box we can use the v-model directive to implement two-way data binding:

Two-way data binding

<div id=" app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> New vue({ El: '#app', Data: { Message: 'welookups!' } }) </script>

The

v-model directive is used to create two-way data binding on form control elements such as input, select, text, checkbox, radio, etc., automatically updated based on the values ​​on the form. The value of the bound element.

Button events We can use v-on to listen for events and respond to user input.

The following example reverses the string after the user clicks the button:

string inversion

<div id=" app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">reverse string</button> </div> <script> New vue({ El: '#app', Data: { Message: 'welookups!' }, Methods: { reverseMessage: function () { This.message = this.message.split('').reverse().join('') } } }) </script>

The

v-model directive is used to create two-way data binding on form control elements such as input, select, text, checkbox, radio, etc., automatically updated based on the values ​​on the form. The value of the bound element.

Button events We can use v-on to listen for events and respond to user input.

The following example reverses the string after the user clicks the button:

string inversion

<div id=" app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">reverse string</button> </div> <script> New vue({ El: '#app', Data: { Message: 'welookups!' }, Methods: { reverseMessage: function () { This.message = this.message.split('').reverse().join('') } } }) </script>

...





welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.