├── .gitignore
├── 01-reactivity
    ├── 1.1-getter-setter.js
    └── 1.2-dependency-tracking.js
├── 02-render
    ├── 2.1-render-fn.html
    ├── 2.2-render-tags.html
    └── 2.3-conditional-component.html
├── 03-state-management
    ├── 3.1-pass-props.html
    ├── 3.2-shared-object.html
    ├── 3.3-shared-instance.html
    ├── 3.4-mutations.html
    └── 3.5-functional.html
├── 04-component-patterns
    ├── 4.1-higher-order.html
    ├── 4.2-abstract.html
    ├── 4.3-scoped-slots.html
    └── 4.4-fetch.html
├── README.md
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/01-reactivity/1.1-getter-setter.js:
--------------------------------------------------------------------------------
 1 | function observe(obj) {
 2 |   // define property for each key
 3 |   Object.keys(obj).forEach(key => {
 4 |     let internalValue = obj[key];
 5 |     Object.defineProperty(obj, key, {
 6 |       get() {
 7 |         console.log(key, 'is:', internalValue);
 8 |         return internalValue;
 9 |       },
10 |       set(value) {
11 |         internalValue = value;
12 |         console.log('setting', key, 'to:', internalValue);
13 |       }
14 |     });
15 |   });
16 | }
17 | 
18 | const obj = {
19 |   number: 42
20 | };
21 | 
22 | observe(obj);
23 | 
24 | obj.number; // should log: '"number" is: 123'
25 | obj.number = 13; // should log: 'setting "number" to: 234'
26 | obj.number; // should log: '"number" is: 234'
27 | 


--------------------------------------------------------------------------------
/01-reactivity/1.2-dependency-tracking.js:
--------------------------------------------------------------------------------
 1 | function observe(obj) {
 2 |   // define property for each key
 3 |   Object.keys(obj).forEach(key => {
 4 |     let internalValue = obj[key];
 5 |     const dep = new Dep();
 6 |     Object.defineProperty(obj, key, {
 7 |       get() {
 8 |         console.log(key, 'is:', internalValue);
 9 |         dep.depend();
10 |         return internalValue;
11 |       },
12 |       set(value) {
13 |         internalValue = value;
14 |         console.log('setting', key, 'to:', internalValue);
15 |         dep.notify();
16 |       }
17 |     });
18 |   });
19 | }
20 | 
21 | class Dep {
22 |   constructor() {
23 |     this.observers = [];
24 |   }
25 |   depend() {
26 |     if(externalUpdate) {
27 |       this.observers.push(externalUpdate);
28 |     }
29 |   }
30 |   notify() {
31 |     this.observers.forEach(obs => obs());
32 |   }
33 | }
34 | 
35 | let externalUpdate;
36 | function autorun(update) {
37 |   let externalUpdate = update;
38 |   update();
39 | }
40 | 
41 | const state = {
42 |   count: 0
43 | };
44 | 
45 | observe(state);
46 | 
47 | autorun(() => {
48 |   console.log(state.count)
49 | });
50 | // should immediately log "count is: 0"
51 | 
52 | state.count++;
53 | // should log "count is: 1"
54 | 


--------------------------------------------------------------------------------
/02-render/2.1-render-fn.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |     <style>
 8 |     #welcome.red {
 9 |       color: red;
10 |     }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <div id="app">
15 |       <h1 id="welcome" :class="{ red: isRed }">{{ msg }}</h1>
16 |       <button @click="isRed = !isRed">toggle red</button>
17 |     </div>
18 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
19 |     <script>
20 |     new Vue({
21 |       el: '#app',
22 |       data: {
23 |         isRed: true,
24 |         msg: 'This should be red'
25 |       },
26 |       // render function takes priority! vue will use this if it's present
27 |       render(h) {
28 |         // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
29 |         return h('div', [
30 |           h('h1', {
31 |           attrs: {
32 |             id: 'welcome'
33 |           },
34 |           class: {
35 |             red: this.isRed
36 |           }
37 |         }, this.msg),
38 |         h('button', {
39 |           on: {
40 |             click: () => {
41 |               this.isRed = !this.isRed
42 |             }
43 |           }
44 |         }, 'toggle red')
45 |       ])
46 |     }
47 |   })
48 |     </script>
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/02-render/2.2-render-tags.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <example :tags="['h1', 'h2', 'h3']"></example>
11 |     </div>
12 |     <!--
13 |         <div>
14 |           <h1>0</h1>
15 |           <h2>1</h2>
16 |           <h3>2</h3>
17 |         </div>
18 |       -->
19 | 
20 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
21 |     <script>
22 |       Vue.component('example', {
23 |         props: ['tags'],
24 |         render(h) {
25 |           return h('div', this.tags.map((tag, index) => h(tag, index)))
26 |         }
27 |       })
28 | 
29 |       new Vue({
30 |         el: '#app'
31 |       })
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/02-render/2.3-conditional-component.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <example :ok="ok"></example>
11 |     </div>
12 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
13 |     <script>
14 |       const Foo = {
15 |         render(h) {
16 |           return h('div', 'foo');
17 |         }
18 |       }
19 | 
20 |       const Bar = {
21 |         render(h) {
22 |           return h('div', 'bar');
23 |         }
24 |       }
25 | 
26 |       Vue.component('example', {
27 |         props: ['ok'],
28 |         render(h) {
29 |           return this.ok ? h(Foo) : h(Bar);
30 |         }
31 |       })
32 | 
33 |       new Vue({
34 |         el: '#app',
35 |         data: {
36 |           ok: true
37 |         }
38 |       })
39 | 
40 |       // 1. Implement a `Foo` component which simply renders `<div>foo</div>`, and a `Bar` component which simply renders `<div>bar</div>` (using render functions, obviously).
41 |       // 2. Implement an `<example>` component which renders the `Foo` component or the `Bar` component based on its `ok` prop. For <example> if `ok` is true, the final rendered dom should be `<div>foo</div>`.
42 |       // 3. Implement a button in the root component that toggles `<example>` between `Foo` and `Bar` by controlling its `ok` prop.
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/03-state-management/3.1-pass-props.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <counter :count="count"></counter>
11 |       <counter :count="count"></counter>
12 |       <counter :count="count"></counter>
13 |       <button @click="count++">increment</button>
14 |     </div>
15 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
16 |     <script>
17 |       // requirement: a counter component rendered 3 times
18 |       // the component takes the current count via props
19 |       // and a button that increments all 3 counters at once
20 |       Vue.component('counter', {
21 |         props: ['count'],
22 |         template: `<div>{{count}}</div>`
23 |       })
24 | 
25 |       new Vue({
26 |         el: '#app',
27 |         data: {
28 |           count: 0
29 |         }
30 |       })
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/03-state-management/3.2-shared-object.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <counter></counter>
11 |       <counter></counter>
12 |       <counter></counter>
13 |       <button @click="inc">increment</button>
14 |     </div>
15 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
16 |     <script>
17 |       // create a counter component (that doesn't take any props)
18 |       // all instances of it should share the same count state
19 |       // and a button that increments all counters at the same time
20 |       const data = {
21 |         count: 0
22 |       }
23 | 
24 |       Vue.component('counter', {
25 |         data() {
26 |           return data;
27 |         },
28 |         template: `<div>{{count}}</div>`
29 |       })
30 | 
31 |       new Vue({
32 |         el: '#app',
33 |         methods: {
34 |           inc() {
35 |             data.count++;
36 |           }
37 |         }
38 |       })
39 |     </script>
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/03-state-management/3.3-shared-instance.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <counter></counter>
11 |       <counter></counter>
12 |       <counter></counter>
13 |       <button @click="inc">increment</button>
14 |     </div>
15 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
16 |     <script>
17 |       // copy and modify the first exercise to use a Vue instance as
18 |       // a shared store instead.
19 |       const state = new Vue({
20 |         // Implement this!
21 |       })
22 | 
23 |       const Counter = {
24 |         // Implement this!
25 |       }
26 | 
27 |       new Vue({
28 |         el: '#app',
29 |         // Implement this!
30 |       })
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/03-state-management/3.4-mutations.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <counter></counter>
11 |       <counter></counter>
12 |       <counter></counter>
13 |       <button @click="inc">increment</button>
14 |     </div>
15 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
16 |     <script>
17 |       function createStore ({ state, mutations }) {
18 |         return new Vue({
19 |           data: {
20 |             state
21 |           },
22 |           methods: {
23 |             commit(key) {
24 |               mutations[key](this.state);
25 |             }
26 |           }
27 |         });
28 |       }
29 | 
30 |       const store = createStore({
31 |         state: { count: 0 },
32 |         mutations: {
33 |           inc (state) {
34 |             state.count++
35 |           }
36 |         }
37 |       })
38 | 
39 |       const Counter = {
40 |         render (h) {
41 |           return h('div', store.state.count)
42 |         }
43 |       }
44 | 
45 |       new Vue({
46 |         el: '#app',
47 |         components: { Counter },
48 |         methods: {
49 |           inc () {
50 |             store.commit('inc')
51 |           }
52 |         }
53 |       })
54 |     </script>
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/03-state-management/3.5-functional.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
11 |     <script>
12 |     function createApp ({ el, model, view, actions }) {
13 |     // Implement this!
14 |     }
15 | 
16 |     // voila
17 |     createApp({
18 |       el: '#app',
19 |       model: {
20 |         count: 0
21 |       },
22 |       actions: {
23 |         inc: ({ count }) => ({ count: count + 1 }),
24 |         dec: ({ count }) => ({ count: count - 1 })
25 |       },
26 |       view: (h, model, actions) => h('div', { attrs: { id: 'app' }}, [
27 |         model.count, ' ',
28 |         h('button', { on: { click: actions.inc }}, '+'),
29 |         h('button', { on: { click: actions.dec }}, '-')
30 |       ])
31 |     })
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/04-component-patterns/4.1-higher-order.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <my-button></my-button>
11 |       <big-button></big-button>
12 |       <cancel-button></cancel-button>
13 |     </div>
14 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
15 |     <script>
16 |       const MyButton = {
17 |         props: ['buttonStyle', 'fontSize'],
18 |         computed: {
19 |           computedStyle() {
20 |             return Object.assign({}, this.buttonStyle, {
21 |               fontSize: this.fontSize
22 |             })
23 |           }
24 |         },
25 |         template: `
26 |           <button :style="computedStyle">
27 |             <slot></slot>
28 |           </button>
29 |         `
30 |       };
31 | 
32 |       const BigButton = {
33 |         components: {
34 |           MyButton
35 |         },
36 |         template: `
37 |           <my-button :button-style="{ color: 'green' }" :font-size="2em">
38 |             <slot></slot>
39 |           </my-button>
40 |         `
41 |       };
42 | 
43 |       const ErrorButton = {
44 |         components: {
45 |           MyButton
46 |         },
47 |         template: `
48 |           <my-button :button-style="{ color: 'red' }">
49 |             <slot></slot>
50 |           </my-button>
51 |         `
52 |       };
53 | 
54 |       const ErrorButton = {
55 |         props: ['Severity'],
56 |         render(h) {
57 |           // figure out what props to pass
58 |           return h(MyButton, {
59 |             props: {}
60 |           })
61 |         }
62 |       };
63 | 
64 |       // both accept style prop
65 |       const Button = {}
66 |       const Tag = {}
67 | 
68 |       function withRedStyle(BaseComponent) {
69 |       return {
70 |         render(h) {
71 |           return h(BaseComponent, {
72 |             props: {
73 |               style: {
74 |                 color: 'red'
75 |               }
76 |             }
77 |           })
78 |         }
79 |       }
80 |       }
81 | 
82 |       function withStore(BaseComponent, store) {
83 |         // inject store into base as prop
84 |       }
85 | 
86 |       // the point
87 |       const RedButton = withRedStyle(Button);
88 |       const RedTag = withRedStyle(Tag);
89 |     </script>
90 |   </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/04-component-patterns/4.2-abstract.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <error-boundary>
11 |         <foo></foo>
12 |       </error-boundary>
13 |     </div>
14 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
15 |     <script>
16 |       Vue.component('ErrorBoundary', {
17 |         props: {},
18 |         data () {
19 |           return {
20 |             error: null
21 |           }
22 |         },
23 |         // parent level component, intercepts errors propgating up from nested components
24 |         errorCaptured (err, vm, info) {
25 |           this.error = err.stack
26 |           return false // error has been gracefully handled, no need to propgate further
27 |         },
28 |         render (h) {
29 |           if (this.error) {
30 |             return h(
31 |               'div',
32 |               { style: { color: 'red' }},
33 |               `error from children: ${this.error}`
34 |             )
35 |           }
36 |           return this.$slots.default[0]
37 |         }
38 |       })
39 | 
40 |       Vue.component('foo', {
41 |         render (h) {
42 |           // throw new Error('oops')
43 |           return h('div', 'hello from foo')
44 |         }
45 |       })
46 | 
47 |       new Vue({
48 |         el: '#app',
49 |         data: {
50 |           ok: true
51 |         }
52 |       })
53 |     </script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/04-component-patterns/4.3-scoped-slots.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title></title>
 6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
 7 |   </head>
 8 |   <body>
 9 |     <div id="app">
10 |       <my-awesome-list>
11 |         <template slot-scope="{ item, msg }">
12 |           <div class="item">{{ item }}</div>
13 |           <span>{{ msg }}</span>
14 |         </template>
15 |       </my-awesome-list>
16 |     </div>
17 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
18 |     <script>
19 |       const MyAwesomeList = {
20 |         data: () => ({
21 |           list: [
22 |             { text: 'Hello' },
23 |             { text: 'Vue' },
24 |             { text: 'Denver' },
25 |             { text: 'Meetup' },
26 |           ]
27 |         }),
28 |         template: `
29 |           <ul>
30 |             <li v-for="item in list">
31 |               <slot :item="item" msg="hello" />
32 |             </li>
33 |           </ul>
34 |         `
35 |       }
36 | 
37 |       new Vue({
38 |         el: '#app',
39 |         components: {
40 |           MyAwesomeList
41 |         }
42 |       })
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/04-component-patterns/4.4-fetch.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" dir="ltr">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title></title>
  6 |     <link rel="stylesheet" href="https://ez-css.now.sh">
  7 |   </head>
  8 |   <body>
  9 |     <div id="app">
 10 |       <input v-model="username">
 11 |       <div v-if="!username">Please input your GitHub username</div>
 12 | 
 13 |       <fetch v-else :url="`https://api.github.com/users/${username}`">
 14 |         <template slot-scope="{ status, data, error }">
 15 |           <div v-if="status === 'pending'">Loading avatar for {{ username }}</div>
 16 |           <div v-else-if="status === 'success'">
 17 |             <img :src="data.avatar_url">
 18 | 
 19 |             <fetch :url="data.organizations_url">
 20 |               <template slot-scope="{ status, data, error }">
 21 |                 <div v-if="status === 'pending'">Loading organizations...</div>
 22 |                 <div v-else-if="status === 'success'">
 23 |                   <h2>Organizations</h2>
 24 |                   <p v-if="!data.length">User doesn't belong to any organizations.</p>
 25 | 
 26 |                   <fetch v-for="org in data" :url="org.url">
 27 |                     <template slot-scope="{ status, data, error }">
 28 |                       <div v-if="status === 'pending'">
 29 |                         Loading details for {{ org.login }}...
 30 |                       </div>
 31 |                       <div v-else-if="status === 'success'">
 32 |                         {{ org.login }} ({{ data.name || 'full name not set' }})
 33 |                       </div>
 34 |                       <div v-else-if="status === 'error'">{{ error }}</div>
 35 |                     </template>
 36 |                   </fetch>
 37 | 
 38 |                 </div>
 39 |                 <div v-else-if="status === 'error'">{{ error }}</div>
 40 |               </template>
 41 |             </fetch>
 42 | 
 43 |           </div>
 44 |           <div v-else-if="status === 'error'">{{ error }}</div>
 45 |         </template>
 46 |       </fetch>
 47 |     </div>
 48 |     <script src="https://unpkg.com/vue@2" charset="utf-8"></script>
 49 |     <script src="https://unpkg.com/lodash" charset="utf-8"></script>
 50 |     <script>
 51 |       Vue.component('fetch', {
 52 |         props: ['url'],
 53 |         data () {
 54 |           const res = {
 55 |             status: 'pending',
 56 |             data: null,
 57 |             error: null
 58 |           }
 59 | 
 60 |           let activePromise = null
 61 | 
 62 |           const fetchData = _.debounce(url => {
 63 |             if (!url) {
 64 |               return
 65 |             }
 66 | 
 67 |             const currentPromise = activePromise = fetch(url)
 68 |             res.status = 'pending'
 69 | 
 70 |             currentPromise.then(response => {
 71 |               if (activePromise != currentPromise) {
 72 |                 return
 73 |               }
 74 |               if (response.status >= 200 && response.status < 300) {
 75 |                 return response.json()
 76 |               } else {
 77 |                 activePromise = null
 78 |                 res.status = 'error'
 79 |                 res.data = null
 80 |                 res.error = response.statusText
 81 |               }
 82 |             }).then(data => {
 83 |               if (activePromise != currentPromise) {
 84 |                 return
 85 |               }
 86 |               activePromise = null
 87 |               res.status = 'success'
 88 |               res.data = data
 89 |               res.error = null
 90 |             }).catch(error => {
 91 |               if (activePromise != currentPromise) {
 92 |                 return
 93 |               }
 94 |               activePromise = null
 95 |               res.status = 'error'
 96 |               res.data = null
 97 |               res.error = error
 98 |             })
 99 |           }, 300)
100 | 
101 |           setTimeout(() => {
102 |             this.$watch(() => this.url, fetchData, { immediate: true })
103 |           }, 0)
104 | 
105 |           return { res }
106 |         },
107 | 
108 |         render () {
109 |           return this.$scopedSlots.default(this.res)[0]
110 |         }
111 |       })
112 | 
113 |       new Vue({
114 |         el: '#app',
115 |         data: { username: '' }
116 |       })
117 |     </script>
118 |   </body>
119 | </html>
120 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## ARE YOU RECORDING?
 2 | 
 3 | ---
 4 | 
 5 | <img src="https://i.imgur.com/yps9EY5.png" class="vue-logo" />
 6 | ## from the Ground Up
 7 | 
 8 | Recap from full day workshop with Evan You at VueConf
 9 | 
10 | ---
11 | 
12 | ## VueConf US
13 | ### New Orleans
14 | 
15 | ![](http://us.vuejs.org/_nuxt/img/map.b6e6517.png)
16 | 
17 | ---
18 | 
19 | <!-- .slide: data-background-image="https://i.imgur.com/uYgFRLs.jpg" -->
20 | 
21 | ---
22 | 
23 | <img src="https://i.imgur.com/BqeQ25P.jpg" style="height: 600px !important; width: auto !important;" />
24 | 
25 | ---
26 | 
27 | <img src="https://i.imgur.com/q2lfdp0.jpg" style="height: 600px !important; width: auto !important;" />
28 | 
29 | ---
30 | 
31 | <img src="https://i.imgur.com/2rEuuwr.jpg" style="height: 600px !important; width: auto !important;" />
32 | 
33 | ---
34 | 
35 | ## Agenda
36 | 
37 | * Reactivity - under the hood
38 | * Render cycle/virtual DOM overview
39 | * State Management Patterns
40 | * Component Patterns
41 | 	* Higher Order Components
42 | 	* Abstract Components
43 | 	* Scoped Slots
44 | 	* fetch component example
45 | 
46 | ---
47 | 
48 | # Reactivity
49 | 
50 | ---
51 | 
52 | ## Render Cycle/Virtual DOM Overview
53 | 
54 | ---
55 | 
56 | ## State Management Patterns
57 | 
58 | ---
59 | 
60 | ## Component Patterns
61 | 
62 | ---
63 | 
64 | # Best part of the workshop...
65 | 
66 | ---
67 | 
68 | <!-- .slide: data-background-image="https://i.imgur.com/RT2iZgZ.jpg" -->
69 | 
70 | ---
71 | 
72 | #### I'm giving a lightning talk on the main stage Wednesday!!
73 | ##### OverVue of Vuetify.js
74 | ![](https://i.imgur.com/JfAol8i.png)
75 | 
76 | ---
77 | 
78 | # Thanks!
79 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | img {
 2 |   background: none !important;
 3 |   border: none !important;
 4 |   box-shadow: none !important;
 5 |   width: auto !important;
 6 | }
 7 | 
 8 | .vue-logo {
 9 |   height: 200px;
10 | }
11 | 
12 | code {
13 |   font-size: 2em !important;
14 |   line-height: 2em !important;
15 | }
16 | 


--------------------------------------------------------------------------------