Created
October 19, 2018 10:14
-
-
Save newbornfrontender/8f19455427154231a5c3ee35ee784f6f to your computer and use it in GitHub Desktop.
Vue test (scoped-slots and etc)
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> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Vue Test</title> | |
| <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <section id="app"> | |
| <header> | |
| <nav-list :list="list"> | |
| <template slot-scope="{ item }"> | |
| {{ item.text }} | |
| <span v-if="item.isVisited">✓</span> | |
| </template> | |
| </nav-list> | |
| </header> | |
| <the-main> | |
| <template slot="main"> | |
| <p>Main content</p> | |
| </template> | |
| <p>Inner content</p> | |
| </the-main> | |
| <the-footer placeholder="Footer"> | |
| <template slot="title"></template> | |
| </the-footer> | |
| </section> | |
| <script> | |
| Vue.component('nav-list', { | |
| name: 'nav-list', | |
| props: { | |
| list: { | |
| type: Array, | |
| default: () => ([]), | |
| }, | |
| }, | |
| template: ` | |
| <nav> | |
| <ul> | |
| <li | |
| v-for="item in list" | |
| :key="item.id" | |
| > | |
| <slot :item="item">{{ item.text }}</slot> | |
| </li> | |
| </ul> | |
| </nav> | |
| `, | |
| }); | |
| Vue.component('the-main', { | |
| name: 'the-main', | |
| template: ` | |
| <main> | |
| <slot name="main"> | |
| <p>Main default content</p> | |
| </slot> | |
| <slot> | |
| <p>Default content</p> | |
| </slot> | |
| </main> | |
| `, | |
| }); | |
| Vue.component('the-footer', { | |
| name: 'the-footer', | |
| props: { | |
| placeholder: { | |
| type: String, | |
| default: 'Default footer', | |
| }, | |
| }, | |
| template: ` | |
| <footer> | |
| <p> | |
| <slot name="title">{{ placeholder }}</slot> | |
| </p> | |
| </footer> | |
| `, | |
| }); | |
| </script> | |
| <script> | |
| new Vue({ | |
| name: 'App', | |
| data: { | |
| list: [{ | |
| text: 'One', | |
| isVisited: true, | |
| }, { | |
| text: 'Two', | |
| isVisited: false, | |
| }, { | |
| text: 'Three', | |
| isVisited: true, | |
| }], | |
| }, | |
| }).$mount('#app'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment