Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what is the method of two-way binding of Vue.js". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the method of two-way binding of Vue.js"?

Vue (pronounced / vju steps /, similar to view) is a progressive framework for building a user interface. Unlike other monolithic frameworks, Vue was designed to be adopted incrementally from the start. Core libraries focus only on view layers and are easy to pick and integrate with other libraries or existing projects.

Function:

Vue.js allows you to extend HTML with a HTML attribute called an instruction

The Vue.js instruction provides functionality for HTML applications

Vue.js provides built-in instructions and user-defined instructions.

Vue.js instruction

Vue.js uses double curly braces {{}} as placeholders for data

The Vue.js instruction is the HTML attribute v-with a prefix.

Vue example

In the following example, a new Vue object is created using new Vue ().

Attribute el: bind the new Vue object to the HTML element of the id= "app".

{{message}} var myObject = new Vue ({el:'# app', data: {message: 'Hello app', data'}})

Give it a try »

Vue.js binding

When the Vue object is bound to the HTML element, when the Vue object changes, the HTML element also changes:

{{message}} var myObject = new Vue ({el:'# app', data: {message: 'Hello visitors'}}) function myFunction () {myObject.message = "John Doe";}

Give it a try »

Vue.js bidirectional binding

The v-model instruction binds the value of the HTML element to the application data.

This is called two-way binding:

{{message}}

Var myObject = new Vue ({el:'# app', data: {message: 'Hello app', data'}})

Give it a try »

Vue.js loop binding

Use the v-for directive to bind an array of Vue objects to the "array" of the HTML element:

{{x.text}} myObject = new Vue ({el:'# app', data: {todos: [{text: 'learning JavaScript'}, {text:' learning Vue.js'}, {text: 'learning programming from W3Cschool'}]}) so far, I believe you have a better understanding of "what is the method of Vue.js two-way binding" You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.