Skip to content

Instantly share code, notes, and snippets.

@ilonacodes

ilonacodes/index.html

Created April 15, 2020 15:59
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 ilonacodes/57255a75a174aafcea0fe40ee0d00647 to your computer and use it in GitHub Desktop.
Save ilonacodes/57255a75a174aafcea0fe40ee0d00647 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js — index.html
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>With Vue</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
<div class="wrapper">
<p>Hi there! 👋</p>
<p>I would like to share some frontend tips and tricks that
I have already applied to some of my projects.</p>
<p>Happily coming back with <br/> my
<link-previewer
href="https://dev.to/ilonacodes/frontend-shorts-vue-js-vanilla-js-digital-dices-og"
text="frontend shorts"
preview-img="https://dev-to-uploads.s3.amazonaws.com/i/3zp478dfafzy1mgfaevn.jpg"
preview-title="Frontend Shorts: Vue.js + Vanilla.js — Digital Dices"
preview-text="Let me show you how you can implement a dice-rolling simulator in less than 30 minutes of your time on the front-end."
></link-previewer>
series on
<link-previewer
href="https://dev.to"
text="dev.to."
preview-img="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png"
preview-title="DEV Community 👩‍💻👨‍💻"
preview-text="Where programmers share ideas and help each other grow—A constructive and inclusive social network."
></link-previewer>
Let me show you how...
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.component('link-previewer', {
props: ['href', 'text', 'previewTitle', 'previewImg', 'previewText'],
data() {
return {
shown: false
};
},
methods: {
show() {
this.shown = true;
},
hide() {
this.shown = false;
}
},
//language=HTML
template: `
<a v-bind:href="href"
v-on:mouseover="show"
v-on:mouseleave="hide"
class="link-with-preview"
>
{{ text }}
<div class="card"
v-bind:class="{'card-show': shown}">
<img v-bind:src="previewImg" alt=""
class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{ previewTitle }}</h5>
<div class="card-text">
{{ previewText }}
</div>
</div>
</div>
</a>
`
});
const app = new Vue({
el: '#app'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment