Created
June 19, 2018 00:13
-
-
Save hscstudio/6bd4b5db4ccd4aee95a64d609bf519aa to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <head> | |
| <title>Belajar Vue</title> | |
| <script src="lib/vue.js"></script> | |
| <style> | |
| form { | |
| border: 1px solid #ddd; | |
| padding:5px; | |
| width:225px; | |
| background: #efefef; | |
| } | |
| label{ | |
| display: block; | |
| margin-top: 5px; | |
| } | |
| input, textarea, select, option { | |
| min-width: 200px; | |
| } | |
| button1{ | |
| width:50px; | |
| font-size: 125%; | |
| } | |
| .card { | |
| background: #efefef; | |
| border:1px solid #ddd; | |
| margin-right:5px; | |
| padding:5px; | |
| width: 200px; | |
| float:left; | |
| } | |
| h3{ | |
| min-height: 45px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <h1>Selected: {{ selectedBook }}</h1> | |
| <book | |
| v-for="book in books" | |
| :key="book.id" | |
| :book="book" | |
| @selected="selectedBook = $event" | |
| > | |
| </book> | |
| </div> | |
| <script type="module"> | |
| import { BookComponent } from './BookComponent.js' | |
| var vm = new Vue({ | |
| el: '#app', | |
| components: { | |
| 'book': BookComponent, | |
| }, | |
| data: { | |
| selectedBook: '', | |
| books : [ | |
| { | |
| id: 99, | |
| title: 'C++ High Performance', | |
| description: 'Write code that scales across CPU registers, multi-core, and machine clusters', | |
| authors: 'Viktor Sehr, Björn Andrist', | |
| publish_year: 2018, | |
| price: 100000, | |
| image: 'c++-high-performance.png' | |
| }, | |
| { | |
| id: 100, | |
| title: 'Mastering Linux Security and Hardening', | |
| description: 'A comprehensive guide to mastering the art of preventing your Linux system from getting compromised', | |
| authors: 'Donald A. Tevault', | |
| publish_year: 2018, | |
| price: 125000, | |
| image: 'mastering-linux-security-and-hardening.png' | |
| }, | |
| ] | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment