Vue.js Quick Start Example Tutorials _javascript tips

What is Vue

Vue is the meaning of the French view, Vue.js is a lightweight, high-performance, modular MVVM Library with a very easy to access API.

I. BASIC structure

Index.html Code:

<script src= ". /vue.js "></script> 
<div id=" App "> 
{message}} 
</div> 
<script src=" App.js "></script> 
<!--Note: App.js is to be introduced at the end of the Div,vue to get the corresponding element before the ID is the app. Otherwise there will be an error: [Vue warn]: Cannot find element: #app-->

App.js Code:

New Vue ({ 
el: ' #app ',//Select part of data to use Vue: 
{//define array in which you can use {{}} to reference message 
: ' Hello vue.js! ' 
} 
})

Two, two-way data binding

Index.html Code:

<script src= ". /vue.js "></script> 
<div id=" app "> 
<p>{{message}}</p> 
<!--set up bidirectional data binding, V-model, the property value is the data to bind--> 
<input v-model= "message" > 
</div> 
<script src= "App.js" > </script>

App.js Code

New Vue ({ 
el: ' #app ', 
data: {message 
: ' Hello vue.js! ' 
} 
})

Third, rendering list

Index.html Code:

<script src= ". /vue.js "></script> 
<div id=" app "> 
<ul> 
<!--v-for for loop traversal--> 
<li V-for= "Todo in Todos" > 
{todo.text}} 
</li> 
</ul> 
</div> 
<script Src= "App.js" ></script>

App.js Code:

New Vue ({ 
el: ' #app ', data 
: { 
todos: [//define Todos data 
{text: ' Learn JavaScript '} in Data { 
text: ' Learn Vue.js '}, 
{text: ' Build Something Awesome '} 
} 
}

Iv. Handling User Input

Index.html Code:

<script src= ". /vue.js "></script> 
<div id=" app "> 
<p>{{message}}</p> 
<!-- Vue uses v-on: prefix to bind various event-triggered methods--> 
<button v-on:click= "Reversemessage" >reverse message</button> 
</div> 
<script src= "App.js" ></script>

App.js Code:

New Vue ({ 
el: ' #app ', 
data: { 
message: ' Hello vue.js! ' 
}, 
methods: {//methods field content to define the processing method 
reversemessage:function () { 
//This.message can change the value of the message data, which is reversed 
this.message = This.message.split ("). Reverse (). Join (')}} 
" 

The above is a small set to introduce the Vue.js QuickStart example tutorials, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone.