Vue. js Quick Start instance tutorial, vue. js instance tutorial

Vue. js Quick Start instance tutorial, vue. js instance tutorial

What is vue?

Vue. js is a lightweight, high-performance, componentized MVVM library with easy-to-use APIs.

I. Basic Structure

Index.html code:

<Script src = ".. /vue. js "> </script> <div id =" app ">{{ message }}</div> <script src =" app. js "> </script> <! -- Note: app. js should be introduced at the end, because there must be a div with the id of app before vue can obtain the corresponding elements. Otherwise, an error occurs: [Vue warn]: Cannot find element: # app -->

App. js code:

New Vue ({el: '# app', // select some data: {// defines the array for using vue. You can use {} to reference message in this section: 'Hello Vue. js! '}})

Ii. bidirectional data binding

Index.html code:

<Script src = "../vue. js"> </script> <div id = "app"> <p >{{ message }}</p> <! -- Set bidirectional data binding, v-model, and attribute value to bind --> <input v-model = "message"> </div> <script src = "app. js "> </script>

App. js Code

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

3. Rendering list

Index.html code:

<Script src = "../vue. js"> </script> <div id = "app"> <ul> <! -- V-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 in data {text: 'learn JavaScript'}, {text: 'Learn Vue. js' },{ text: 'build Something Awesome '}]})

4. process user input

Index.html code:

<Script src = "../vue. js"> </script> <div id = "app"> <p >{{ message }}</p> <! -- Use the v-on: prefix in vue to bind various event triggering 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: {// the content of the methods field is used to define the processing method reverseMessage: function () {// use this. message can change the value of message data. this is reversed here. message = this. message. split (''). reverse (). join ('')}}})

The above is a small series of Vue. js Quick Start instance tutorials, I hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner.