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

This article mainly introduces "what are the functions of vuejs". In daily operation, I believe many people have doubts about the functions of vuejs. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the functions of vuejs?" Next, please follow the editor to study!

Vuejs features: 1, the use of concise template syntax to declare the rendering of data into DOM;2, the use of "v-if" and "v-for" instructions to achieve conditions and loop structure; 3, the use of "v-model" instruction to achieve two-way data binding; 4, the use of event listeners to achieve interface interaction; 5, component development, and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Learn about the basic functions of Vue.js ~ 1. Data rendering

The core of Vue.js is to use concise template syntax to declaratively render data into DOM!

Example 1:

{{message}} var app=new Vue ({el: "# app", data: {message: "hello vue"}})

This has generated a vue application, and now that the data and DOM are bound together, as long as you modify the app.message, the DOM will be updated accordingly!

Example 2:

Hover your mouse over me for a few seconds to see my dynamically bound title! Var app_2=new Vue ({el:'#app_2', data: {message:'You loaded this page on'+ new Date ()}})

Example 2 involves the special attribute v-bind instruction of Vue, which is also rendered on the corresponding DOM element!

2. Conditions and cycles

Vue can bind not only DOM text to data, but also DOM structures to data!

1. Conditions

We can use the v-if instruction to achieve the conditional setting, and it is easy to control the display of an element in the actual application.

Example 3:

Now you see me

Var app_3=new Vue ({el:'#app_3', data: {flags:true}})

Similarly, you can modify the data property to achieve the response.

2. Cycle

Each instruction has a special function, and the v-for instruction can bind array data to render a list!

Example 4:

{{todo.text}} var app_3_2=new Vue ({el:'#app_3_2', data: {todos: [{text:'Learn JavaScript'}, {text:'Learn Vue'}) {text:'Learn Other'}]}})

Open the console, type app_3_2.todos.push ({text: 'new project'}), and you will find that a new item has been added to the list.

3. Two-way binding

Vue provides a v-model instruction that can easily bind the form input to the application state.

Example 5:

{{msg2}}

Var app5 = new Vue ({el:'# app5', data: {msg2:'# hello'}}) 4, interface interaction

To allow users to interact with your application, we can bind an event listener with the v-on instruction and use it to call the methods defined in our Vue instance!

Example 6:

{{message}}

Reverse Message var app6=new Vue ({el:'#app6', data: {message:'Hello Vue.jskeeper'}, methods: {reverseMessage:function (e) {this.message=this.message.split (') .reverse () .join ('') })

Note: in the methods method, only the status is updated and the DOM is not touched!

5. Component construction (simple version)

Be sure to register the component before instantiating it!

Be sure to register the component before initializing the root instance!

Otherwise, you will report an error if you use it without registration!

The component is relatively powerful, can be extended, encapsulates reusable code, but is more boring (* @ dirty @ *) Wow ~ you must be familiar with it!

Example 7:

Vue.component ('todo-item', {props: [' todo'], template:' {{todo.text}'}) Var app_7=new Vue ({el:'#app_7', data: {itemsList: [{text:'Vegetables'}, {text:'Cheese'}, {text:'Whatever else humans are supposed to eat'}]}})

Component is a very important part, when you are familiar with the above content, you should study the component system, which involves a lot of content that needs to be mastered in more detail.

At this point, the study of "what are the functions of vuejs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.