Skip to content

Instantly share code, notes, and snippets.

View shailen-naidoo's full-sized avatar

Shailen shailen-naidoo

53 followers · 32 following
View GitHub Profile
@shailen-naidoo
shailen-naidoo / index.html
Created December 10, 2018 09:02
Vue component using Vue.component()
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-button-counter></my-button-counter>
</div>
</body>
<script>
@shailen-naidoo
shailen-naidoo / MyButtonCounter.vue
Created December 10, 2018 09:25
Vue files
<template>
<button v-on:click="count++">
counter
</button>
</template>
<script>
export default {
data() {
return {
@shailen-naidoo
shailen-naidoo / App.vue
Created December 10, 2018 09:36
Vue files
<template>
<my-button-counter></my-button-counter>
</template>
<script>
import MyButtonCounter from "./MyButtonCounter.vue";
export default {
components: {
MyButtonCounter
@shailen-naidoo
shailen-naidoo / MyButtonCounter.vue
Created December 13, 2018 05:38
Vue events
<template>
<button v-on:click="clicked()">
counter
</button>
</template>
<script>
export default {
data() {
return {
@shailen-naidoo
shailen-naidoo / App.vue
Created December 13, 2018 06:34
Parent receive events
<template>
<my-button-counter v-on:clicked="updateClickedNum"></my-button-counter>
</template>
<script>
import MyButtonCounter from "./MyButtonCounter.vue";
export default {
data() {
return {
clicked_num: 0
@shailen-naidoo
shailen-naidoo / TheNavigationBar.vue
Created December 13, 2018 09:12
Single-instance component
<template>
<nav>
<h1>I am a single instance component</h1>
</nav>
</template>
@shailen-naidoo
shailen-naidoo / App.vue
Created December 13, 2018 09:16
Single-instance app
<template>
<div>
<the-navigation-bar></the-navigation-bar>
<router-view>
// Your views are rendered here :)
</router-view>
</div>
</template>
<script>
@shailen-naidoo
shailen-naidoo / Menu.vue
Created December 13, 2018 09:40
Menu
<template>
<ul>
<slot>
</ul>
</template>
<style scoped>
ul {
list-style-type: none;
margin: 0;
@shailen-naidoo
shailen-naidoo / MenuItem.vue
Created December 13, 2018 09:42
Menu
<template>
<li><slot></slot></li>
</template>
<style scoped>
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
@shailen-naidoo
shailen-naidoo / App.vue
Created December 13, 2018 09:46
Menu
<template>
<menu>
<menu-item>Hello World</menu-item> // other markup can be nested inside MenuItem
<menu-item>Hello World</menu-item>
</menu>
</template>
<script>
import Menu from "./Menu.vue";
import MenuItem from "./MenuItem.vue";