Skip to content

Instantly share code, notes, and snippets.

@zidom

zidom/index.html

Created January 26, 2018 08:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zidom/a0ae1aaa137d5aa2f013ef638e0158a6 to your computer and use it in GitHub Desktop.
Save zidom/a0ae1aaa137d5aa2f013ef638e0158a6 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment