D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
zidom
Full window
Github gist
// source https://jsbin.com
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> li{ margin-bottom: 10px; } </style> </head> <body> <div id="app"> <ve-list :list="works"> <!-- what? why？how？ --> <work-viewer slot="viewer-0" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-0" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-1" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-1" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-2" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-2" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-3" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-3" slot-scope="{item}" :work="item"></work-editor> </ve-list> </div> <script type="text/x-template" id="veList"> <ul> <li v-for="(item, idx) in list" :key='idx'> <div class="wrapper" style="border: solid 1px #ff6000"> <slot :name="`viewer-${idx}`" :item="item"></slot> <slot :name="`editor-${idx}`" :item="item"></slot> </div> </li> </ul> </script> <script type="text/x-template" id="work_editor"> <div style="background-color: antiquewhite"> Editor: <strong>{{this.work.title}}</strong>! </div> </script> <script type="text/x-template" id="work_viewer"> <div style="background-color: cornflowerblue"> Viewer: <strong>{{this.work.title}}</strong>! </div> </script> <script> Vue.component('veList', { template: '#veList', props: { list: { type: Array, default: [] } } }) Vue.component('work-editor', { template: '#work_editor', props: ['work'] }) Vue.component('work-viewer', { template: '#work_viewer', props: ['work'] }) new Vue({ el: '#app', data() { return { works: [{ id: 1, title: 'work1' }, { id: 2, title: 'work2' }, { id: 3, title: 'work3' }] } } }) </script> <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://cdn.jsdelivr.net/npm/vue"><\/script> <style> li{ margin-bottom: 10px; } </style> </head> <body> <div id="app"> <ve-list :list="works"> <\!-- what? why？how？ --> <work-viewer slot="viewer-0" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-0" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-1" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-1" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-2" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-2" slot-scope="{item}" :work="item"></work-editor> <work-viewer slot="viewer-3" slot-scope="{item}" :work="item"></work-viewer> <work-editor slot="editor-3" slot-scope="{item}" :work="item"></work-editor> </ve-list> </div> <script type="text/x-template" id="veList"> <ul> <li v-for="(item, idx) in list" :key='idx'> <div class="wrapper" style="border: solid 1px #ff6000"> <slot :name="`viewer-${idx}`" :item="item"></slot> <slot :name="`editor-${idx}`" :item="item"></slot> </div> </li> </ul> <\/script> <script type="text/x-template" id="work_editor"> <div style="background-color: antiquewhite"> Editor: <strong>{{this.work.title}}</strong>! </div> <\/script> <script type="text/x-template" id="work_viewer"> <div style="background-color: cornflowerblue"> Viewer: <strong>{{this.work.title}}</strong>! </div> <\/script> <script> Vue.component('veList', { template: '#veList', props: { list: { type: Array, default: [] } } }) Vue.component('work-editor', { template: '#work_editor', props: ['work'] }) Vue.component('work-viewer', { template: '#work_viewer', props: ['work'] }) new Vue({ el: '#app', data() { return { works: [{ id: 1, title: 'work1' }, { id: 2, title: 'work2' }, { id: 3, title: 'work3' }] } } }) <\/script> </body> </html> </script> </body> </html>
https://cdn.jsdelivr.net/npm/vue
https://cdn.jsdelivr.net/npm/vue