-
-
Save tessaSAC/992b2296e03f44d0896a14069fd2de5a to your computer and use it in GitHub Desktop.
code examples for vueconf toronto 2020 talk
This file contains 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
// Example 1: tessa's MyPlace | |
<!-- View: MyPlace --> | |
<BasePlace> | |
<template v-slot:about> | |
<img alt="my face" src="profile_pic.jpg" /> | |
<p class="pronouns">(she, her)</p> | |
</template> | |
<template v-slot:default> | |
<Pancake /> | |
<Toast /> | |
<Apple /> | |
<Cucumber /> | |
<Apple /> | |
<IceCream /> | |
<Mushroom /> | |
</template> | |
</BasePlace> | |
<!-- Component: BasePlace --> | |
<h1>{{ placeName }}</h1> | |
<slot name="about" /> | |
<slot> | |
<Banana /><Banana /><Banana /> | |
</slot> | |
// Example 2: Jason & Matan's MyPlaces | |
<!-- View: JasonSpace --> | |
<script>export default { | |
data: _ => ({ | |
bananas: 0 | |
}), | |
methods: { | |
sendBanana() { | |
++this.bananas | |
} | |
} | |
} | |
</script> | |
<template> | |
<BasePlace placeName="JasonSpace"> | |
<template v-slot:about> | |
<img alt="Jason's photo" src="jason.jpg" /> | |
<p class="pronouns">(he, him)</p> | |
<button name="sendBanana" @click="sendBanana"> | |
<Banana /><Banana /><Banana /> | |
</button> | |
</template> | |
<template v-slot:default> | |
<Pancake /> | |
<Toast /> | |
<Apple /> | |
<Cucumber /> | |
<Apple /> | |
<IceCream /> | |
<Mushroom /> | |
<teleport | |
v-if="bananas" | |
to="#theBananaDimension" | |
> | |
<Banana | |
v-for="banana in bananas" : | |
key="banana" | |
class="banana" | |
/> | |
</teleport> | |
</template> | |
</BasePlace> | |
</template> | |
<!-- View: Matan's Veggie Garden --> | |
<template> | |
<BasePlace | |
class="MatansVeggieGarden" | |
placeName="Matan's Veggie Garden" | |
> | |
<template v-slot:about> | |
<img alt="Matan's photo" src="matan.jpg" /> | |
<p class="pronouns">(he, him)</p> | |
</template> | |
<template v-slot:default> | |
<div id="theBananaDimension" /> | |
<Carrot /> | |
<Carrot /> | |
<Mushroom /> | |
<Mushroom /> | |
<Cucumber /> | |
<Cucumber /> | |
<Tomato /> | |
<Tomato /> | |
<Lettuce /> | |
<Lettuce /> | |
</template> | |
</BasePlace> | |
</template> | |
<style lang="scss"> | |
.MatansVeggieGarden { | |
.Banana { | |
background: url('tomato.png') no-repeat; | |
background-size: contain; | |
width: 80px; // Tomato width | |
padding-left: 80px; // Push banana out of view | |
} | |
} | |
</style> | |
// Example 3: The Pancake House | |
<!-- View: PancakeHouse --> | |
<RoomManish /> | |
<RoomBobby /> | |
<RoomEm /> | |
<RoomKitchen / | |
<!-- Component: Kitchen --> | |
<h1 @click="bonusPancake">~The Kitchen~</h1> | |
<teleport | |
v-if="numBonusPancakes" | |
to=".bonusPancakePortal" | |
> | |
<Pancake | |
v-for="bonusPancake in numBonusPancakes" | |
:key="bonusPancake" | |
/> | |
</teleport> | |
<h2>orders</h2> | |
<div class="foodOrders" id="foodOrders" /> | |
</div> | |
<!-- Component: BaseRoom --> | |
<script> | |
export default { | |
props: { | |
roomOwner: { | |
type: String, | |
required: true, | |
} | |
}, | |
data: _ => ({ | |
pancakeRequested: false, | |
pancakesServed: 0, | |
}), | |
methods: { | |
requestPancake() { | |
this.pancakeRequested = true | |
}, | |
servePancake() { | |
this.pancakeRequested = false | |
this.pancakesServed++ | |
}, | |
}, | |
} | |
</script> | |
<template> | |
<h1>{{ roomOwner }}'s Room</h1> | |
<div class="bonusPancakePortal" /> | |
<Pancake | |
v-for="pancake in pancakesServed" | |
:key="pancake" | |
/> | |
<button @click="requestPancake"> | |
request pancake | |
</button> | |
<teleport | |
to="#foodOrders" | |
v-if="pancakeRequested" | |
> | |
<button @click.stop="servePancake"> | |
{{ roomOwner }} | |
</button> | |
</teleport> | |
</template> | |
<!-- View: RoomEm --> | |
<img alt="Em's photo" src="em.jpg" /> | |
<BaseRoom roomOwner="Em" /> | |
// Example 4: The Laundry Room — Control Flow | |
<!-- View: RoomLaundry --> | |
<script> | |
import Laundry from './Laundry' | |
export default { | |
components: { | |
Laundry, | |
}, | |
data: _ => ({ | |
laundry: [{ | |
description: 't-shirt', | |
clothingType: 'shirt', | |
cleaningInstructions: 'machine wash cold', | |
}, | |
{ | |
description: 'pants', | |
clothingType: 'pants', | |
cleaningInstructions: 'dry clean only', | |
}, | |
{ | |
description: 'sneakers', | |
clothingType: 'shoes', | |
cleaningInstructions: 'remove dirt using a soft-bristled brush; use a small amount of gentle detergent if necessary', | |
}, | |
{ | |
description: 'briefcase', | |
clothingType: 'accessory', | |
cleaningInstructions: 'wipe clean with a soft, damp cloth', | |
}, | |
{ | |
description: 'towel', | |
clothingType: 'linen', | |
cleaningInstructions: 'machine wash on highest heat setting', | |
}, | |
] | |
}), | |
</script> | |
<template> | |
<Laundry :laundry="laundry" /> | |
</template> | |
<!-- Component: Laundry --> | |
<template v-for="clothingItem in laundry"> | |
<img | |
v-if="needsToBeSentToCleaners(clothingItem.cleaningInstructions)" | |
:src="getImgUrl(clothingItem.description)" | |
:class="{ isAtCleaners: clothingItem.isAtCleaners }" | |
class="dryCleaning" | |
@click="sendToCleaners(clothingItem)" | |
/> | |
<img | |
v-else-if="!isMachineWashable(clothingItem.cleaningInstructions )" | |
:src="getImgUrl(clothingItem.description)" | |
class="special" | |
/> | |
<img | |
v-else-if="!clothingItem.isClean" | |
:src="getImgUrl(`${ clothingItem.description }-wet`)" | |
/> | |
<img | |
v-else | |
:src="getImgUrl(clothingItem.description)" | |
class="hangDry" | |
/> | |
</template> | |
// Example 5: The Laundry Room — Scoped Slots | |
<!-- View: RoomLaundry -- | |
<template> | |
<Laundry :laundry="laundry"> | |
<template v-slot:specialCleaning="{ specialCareItem }"> | |
<!-- Can't have v-if on same line as v-slot b/c v-if is evaluated first --> | |
<img | |
v-if="needsToBeSentToCleaners(specialCareItem.cleaningInstructions)" | |
:src="getImgUrl(specialCareItem.description)" | |
:class="{ isAtCleaners: specialCareItem.isAtCleaners }" | |
@click="sendToCleaners(specialCareItem)" | |
/> | |
<img | |
v-else | |
:src="getImgUrl(specialCareItem.description)" | |
/> | |
</template> | |
<template v-slot="{ machineWashableClothing }"> | |
<img | |
v-if="!machineWashableClothing.isClean" | |
:src="getImgUrl(`${ machineWashableClothing.description }-wet`)" | |
@click="runWasherOn(machineWashableClothing)" | |
/> | |
<img | |
v-else | |
:src="getImgUrl(machineWashableClothing.description)" | |
/> | |
</template> | |
</Laundry> | |
<!-- Component: Laundry --> | |
<template v-for="clothingItem in laundry" :key="clothingItem.description"> | |
<slot | |
name="specialCleaning" | |
v-if="!isMachineWashable(clothingItem.cleaningInstructions)" | |
v-bind:specialCareItem="clothingItem" | |
> | |
<img :src="getImgUrl(clothingItem.description)" /> | |
</slot> | |
</template> | |
<template v-for="clothingItem in laundry" :key="clothingItem.description"> | |
<slot | |
v-if="isMachineWashable(clothingItem.cleaningInstructions)" | |
v-bind:machineWashableClothing="clothingItem" | |
> | |
<img :src="getImgUrl(clothingItem.description)" /> | |
</slot> | |
</template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment