Skip to content

Instantly share code, notes, and snippets.

View jenhjlim's full-sized avatar

Lim jenhjlim

17 followers · 8 following
View GitHub Profile
@jenhjlim
jenhjlim / 7.1-simple-i18n.html
Created October 26, 2018 14:36
Evan You - Vue Advanced Workshop - 7. i18n -7.1-simple-i18n.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<h1>{{ $t('welcome-message') }}</h1>
<button @click="changeLang('en')">English</button>
<button @click="changeLang('zh')">中文</button>
<button @click="changeLang('nl')">Dutch</button>
</div>
<script>
@jenhjlim
jenhjlim / 6.1.validation.html
Last active October 26, 2018 12:58
Evan You - Vue Advanced Workshop - 6. Form Validation - 6.1.validation.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<form @submit="validate">
<input v-model="text">
<br>
<input v-model="email">
<ul v-if="!$v.valid" style="color:red">
<li v-for="error in $v.errors">
@jenhjlim
jenhjlim / 5.3.path-to-regexp.html
Created October 26, 2018 11:59
Evan You - Vue Advanced Workshop - 5. Routing - 5.3.path-to-regexp.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./path-to-regexp.js"></script>
<div id="app"></div>
<script>
// '#/foo/123' -> foo with id: 123
// '#/bar' -> Bar
// '#/404' -> NotFound
@jenhjlim
jenhjlim / 5.2.route-table.html
Created October 26, 2018 11:08
Evan You - Vue Advanced Workshop - 5. Routing - 5.2.route-table.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<!-- render main view here -->
<a href="#foo">foo</a>
<a href="#bar">bar</a>
</div>
<script>
// '#/foo' -> Foo
@jenhjlim
jenhjlim / 5.1.basic-hash-router.html
Created October 26, 2018 10:48
Evan You - Vue Advanced Workshop - 5. Routing - 5.1.basic-hash-router.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<!-- render main view here -->
<component :is="url"></component>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
</div>
<script>
@jenhjlim
jenhjlim / 4.5-functional.html
Created October 26, 2018 10:27
Evan You - Vue Advanced Workshop - 4. State Management - 4.5-functional.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app"></div>
<script>
function app({ el, model, view, actions }) {
// Implement this!
const wrappedActions = {}
Object.keys(actions).forEach(key => {
@jenhjlim
jenhjlim / 4.4-mutations.html
Created October 26, 2018 08:26
Evan You - Vue Advanced Workshop - 4. State Management - 4.4-mutations.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<button @click="inc">increment</button>
</div>
<script>
@jenhjlim
jenhjlim / 4.3-shared-instance-store.html
Last active October 26, 2018 07:02
Evan You - Vue Advanced Workshop - 4. State Management - 4.3-shared-instance-store.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<button @click="inc">increment</button>
</div>
<script>
@jenhjlim
jenhjlim / 4.2-shared-object.html
Created October 23, 2018 04:43
Evan You - Vue Advanced Workshop - 4. State Management - 4.2-shared-object.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<counter></counter>
<counter></counter>
<counter></counter>
<button @click="inc">increment</button>
</div>
<script>
@jenhjlim
jenhjlim / 4.1-passing-props.html
Created October 23, 2018 04:41
Evan You - Vue Advanced Workshop - 4. State Management - 4.1-passing-props.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<counter :count="count"></counter>
<counter :count="count"></counter>
<counter :count="count"></counter>
<button @click="count++">increment</button>
</div>
<script>