-
Notifications
You must be signed in to change notification settings - Fork 0
/
vueguide-components2.html
77 lines (75 loc) · 3.45 KB
/
vueguide-components2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script src="https://unpkg.com/vue"></script>
<script>
Vue.prototype.vuemit = Vue.prototype.$emit;
Vue.prototype.vuon = Vue.prototype.$on;
</script>
<html>
<title>Vue.js guide - components(...)</title>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="vueguide-components2.css">
</head>
<body>
<div id="example-1" style="border-bottom: 1px solid black">
Child:<child-component></child-component> |
Child with passed inline content:<child-component>Hello, child!</child-component> |
Child with passed bound content:<child-component>{{message}}</child-component>
<app-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</app-layout>
<div class="parent">
<child>
<template slot-scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
<div>
<my-awesome-list v-bind:items="items">
<li slot="item" slot-scope="ss" class="my-fancy-item">
{{ ss.desc }}({{ss.prior}})
</li>
</my-awesome-list>
<!-- Some ES6 destructuring feature: -->
<!-- <my-awesome-list v-bind:items="items">
<li slot="item" slot-scope="{desc, prior}" class="my-fancy-item">
{{desc}}({{prior}})
</li>
</my-awesome-list> -->
</div>
</div>
<div id="example-2" style="border-bottom: 1px solid black">
<div class="tab">
<button v-on:click="showHome" v-bind:class="{active: home}">Home</button>
<button v-on:click="showPosts" v-bind:class="{active: posts}">Posts</button>
<button v-on:click="showArchive" v-bind:class="{active: archive}">Archive</button>
<button v-on:click="showThirdParty" v-bind:class="{active: tp}">Affiliate</button>
<button v-on:click="showAbout" v-bind:class="{active:ab}">About</button>
</div>
<keep-alive>
<component v-bind:is="currentView"></component>
</keep-alive>
</div>
<div id="example-3" style="border-bottom: 1px solid black">
<simple-slideshow v-bind:caption="items[selected].name" v-bind:src="items[selected].image"
v-on:go-left="slideLeft" v-on:go-right="slideRight">
<h2 slot="title">Slideshow of web technologies</h2>
</simple-slideshow>
</div>
<div id="example-4" style="border-bottom: 1px solid black">
<some-comp some-prop="demo" ref="sc" v-on:click.native="switchBackground"></some-comp>
<ol v-if="items.length">
<tech-item v-for="tech in items" v-bind="tech" v-bind:key="tech.id"
ref="techs" v-on:click.native="highlight(tech.id)"></tech-item>
</ol>
</div>
<div id="example-5" style="border-bottom: 1px solid black">
<async-example></async-example>
</div>
</body>
<script src="vueguide-components2.js"></script>
</html>