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.