-
-
Save edsonalvesan/8dced8d70d46b6de22cbdf5492964fde to your computer and use it in GitHub Desktop.
Exemplo Vue.Js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>My Books</title> | |
| <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"> | |
| </head> | |
| <body> | |
| <div class="container" id="app"> | |
| <div class="row"> | |
| <h1>Books</h1> | |
| </div> | |
| <div class="row"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Id</th> | |
| <th>Title</th> | |
| <th>Value</th> | |
| <th>Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr v-for="book in books" track-by="$index"> | |
| <td>{{ book.id }}</td> | |
| <td>{{ book.title }}</td> | |
| <td>{{ book.value }}</td> | |
| <td>{{ book.description }}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <script src="node_modules/vue/dist/vue.js"></script> | |
| <script src="node_modules/vue-resource/dist/vue-resource.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = new Vue({ | |
| el:'#app', | |
| data: { | |
| books:[] | |
| }, | |
| methods: { | |
| }, | |
| ready:function () { | |
| var self = this; | |
| self.$http.get('dataServer.json').then(function (response) { | |
| //console.log(response.data) | |
| //var data = JSON.stringify(response.data) | |
| console.log(response.data) | |
| self.books = response.data; | |
| }); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "id": 1, | |
| "title": "Jannie Terrell", | |
| "value": "3,429.88", | |
| "description": "Amet consequat fugiat" | |
| }, | |
| { | |
| "id": 2, | |
| "title": "Claudine Guzman", | |
| "value": "1,900.55", | |
| "description": "Eu veniam nulla Lorem" | |
| }, | |
| { | |
| "id": 3, | |
| "title": "Winters Ramirez", | |
| "value": "1,334.51", | |
| "description": "Laborum velit incididunt id magna velit" | |
| }, | |
| { | |
| "id": 4, | |
| "title": "Esmeralda Reyes", | |
| "value": "3,544.47", | |
| "description": "Minim sit eu veniam veniam. Do minim labore ad" | |
| }, | |
| { | |
| "id": 5, | |
| "title": "Jami Bright", | |
| "value": "1,844.69", | |
| "description": "Nisi est tempor non quis exercitation" | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment