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
// import Vue framework | |
import Vue from 'vue' | |
// turn on dubugging messages | |
Vue.config.debug = true | |
// import our CafeCard component | |
import CafeCard from './CafeCard.vue' | |
// tell vue that we'll use <cafe-card> as the tag for our component |
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Coffee Finder ☕️ New York</title> | |
<link rel="stylesheet" href="default.css"> | |
</head> | |
<body> | |
<nav> |
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
<cafe-card name="Daily Press"><cafe-card> | |
<cafe-card name="Cafe Grumpy"><cafe-card> | |
<cafe-card name="Stumptown"><cafe-card> | |
<cafe-card name="Third Rail"><cafe-card> | |
<cafe-card name="Gimmie! Coffee"><cafe-card> | |
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
<!-- template code --> | |
<template> | |
<div class="cafe-card"> | |
<h1>{{ name }}</h1> | |
<p class="description">Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.</p> | |
<dl class="address"> | |
<dt>Address</dt> | |
<dd>224 W 20th St, New York, NY 10011</dd> | |
</dl> | |
<div class="map"></div> |
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
<cafe-card | |
v-for="cafeName in cafeNames" | |
:name="cafeName"> | |
<cafe-card> | |
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
// import Vue framework | |
import Vue from 'vue' | |
// turn on dubugging messages | |
Vue.config.debug = true | |
// import our CafeCard component | |
import CafeCard from './CafeCard.vue' | |
// tell vue that we'll use <cafe-card> as the tag for our component |
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
{ | |
"name": "Cafe Grumpy", | |
"address": "224 W 20th St, New York, NY 10011", | |
"hours": "7am — 8pm", | |
"description": "Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting." | |
} |
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
// import Vue framework | |
import Vue from 'vue' | |
// turn on dubugging messages | |
Vue.config.debug = true | |
// import our CafeCard component | |
import CafeCard from './CafeCard.vue' | |
// tell vue that we'll use <cafe-card> as the tag for our component |
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Coffee Finder ☕️ New York</title> | |
<link rel="stylesheet" href="default.css"> | |
</head> | |
<body> | |
<nav> |
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
<!-- template code --> | |
<template> | |
<div class="cafe-card"> | |
<h1>{{ cafe.name }}</h1> | |
<p class="description">{{ cafe.description }}</p> | |
<dl class="hours"> | |
<dt>Hours</dt> | |
<dd>{{ cafe.hours }}</dd> | |
</dl> | |
<dl class="address"> |