Vue.js Introduction.

Source: Internet
Author: User
Tags event listener

Vue.js mainly uses the concise template language to render data into the DOM in a declarative form.

For example

<div id= "App" >  {message}}</div>var app = new Vue ({  el: ' #app ',  data: {    message: ' Hello Vue ! '}  }) Hello vue!

 

You can also bind DOM objects

<div id= "App-2" >  <span v-bind:title= "message" >    mouse hover for a few seconds to view the dynamic binding tips here!  </span></div>var app2 = new Vue ({  el: ' #app-2 ',  data: {    message: ' Page loaded on ' + new Date () 
   
    }})
   

  

Here we meet something new. The attributes you see v-bind are called directives. Directives are prefixed v- to indicate that they are special properties provided by Vue. As you might have guessed, they apply special responsive behavior to the rendered DOM. In short, the purpose of this directive is to "keep the attributes of this element node consistent with the title properties of the Vue instance message ."

Controls the hiding of an element

<div id= "app-3" >  <p v-if= ' seen ' >  now you see me  </p>  </div>var app3 = new Vue ({el: ' #app-3 ', Data:{seen:false//true}})

  

V-for cycle \

<div id= "app-4" >  <ol>    <li v-for= "Todo in Todos" >      {{todo.text}}    </li>  </ol></div>var app4 = new Vue ({  el: ' #app-4 ',  data: {    todos: [      {text: ' Learning JavaScript '},      {text: ' Learning Vue '},      {text: ' Whole Cow project '}    ]  })

  

In order for the user to interact with your app, we can use v-on instructions to bind an event listener that invokes the method defined in our Vue instance:

<div id= "app-5" >  <p>{{message}}</p>  <button v-on:click= "reversemessage" > Reverse Message < /button></div>var app5 = new Vue ({  el: ' #app-5 ',  data: {    message: ' Hello vue.js! '  },  Methods: {    reversemessage:function () {      this.message = This.message.split ("). Reverse (). Join (')    }  }}) Hello vue.js! Reversal Message

  

Vue also provides v-model instructions that can easily implement two-way binding between form input and application state.

<div id= "app-6" >  <p>{{message}}</p>  <input v-model= "message" ></div>var APP6 = new Vue ({  el: ' #app-6 ',  data: {    message: ' Hello vue! '  }})

  

Vue.js Introduction.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.