Re-arranged the folder structure with the updated sample

jammama · Jan 5, 2018 · 5ec2050 · 5ec2050
1 parent 9c1408a
commit 5ec2050
Show file tree

Hide file tree

Showing 218 changed files with 13,456 additions and 25,601 deletions.
diff --git a/예제코드/03_뷰 시작하기/doit-vuejs/index.html → exam/02/02-1/index.html b/예제코드/03_뷰 시작하기/doit-vuejs/index.html → exam/02/02-1/index.html
@@ -1,23 +1,20 @@
 <html>
   <head>
-    <title>Hello Vue.js</title>
+    <title>Vue Sample</title>
   </head>
   <body>
     <div id="app">
       {{ message }}
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
-    <!-- <script src="vue.js"></script> -->
     <script>
-
       new Vue({
         el: '#app',
         data: {
           message: 'Hello Vue.js!'
         }
-      })
-
+      });
     </script>
   </body>
 </html>
diff --git a/exam/03/03-1/index.html b/exam/03/03-1/index.html
@@ -0,0 +1,32 @@
+<html>
+  <head>
+    <title>Vue Instance Lifecycle</title>
+  </head>
+  <body>
+    <div id="app">
+      {{ message }}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script>
+      new Vue({
+        el: '#app',
+        data: {
+          message: 'Hello Vue.js!'
+        },
+        beforeCreate: function() {
+          console.log("beforeCreate");
+        },
+        created: function() {
+          console.log("created");
+        },
+        mounted: function() {
+          console.log("mounted");
+        },
+        updated: function() {
+          console.log("updated");
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/예제코드/06_뷰 컴포넌트 통신/06-6/index.html → exam/03/03-10/index.html b/예제코드/06_뷰 컴포넌트 통신/06-6/index.html → exam/03/03-10/index.html
@@ -6,33 +6,14 @@
     <title>Vue Event Bus Sample</title>
   </head>
   <body>
-
     <div id="app">
       <child-component></child-component>
     </div>
 
-    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
     <script>
-
       var eventBus = new Vue();
 
-      // 이벤트를 보내는 컴포넌트
-      methods: {
-        메서드 명: function() {
-          eventBus.$emit('이벤트 명', 데이터);
-        }
-      }
-
-      // 이벤트를 받는 컴포넌트
-      methods: {
-        메서드 명: function() {
-          eventBus.$on('이벤트 명', function(데이터) {
-            // ...
-          });
-        }
-      }
-
-
       Vue.component('child-component', {
         template: '<div>하위 컴포넌트 영역입니다.<button v-on:click="showLog">show</button></div>',
         methods: {
@@ -42,19 +23,14 @@
         }
       });
 
-      var eventBus = new Vue();
       var app = new Vue({
         el: '#app',
-        data: {
-          message: 'Hello Vue! passed from Parent Component'
-        },
-        beforeCreate: function() {
+        created: function() {
           eventBus.$on('triggerEventBus', function(value){
             console.log("이벤트를 전달 받음. 전달 받은 값 : ", value);
           });
         }
       });
-
     </script>
   </body>
 </html>
diff --git a/예제코드/04_뷰 인스턴스/04-5/index.html → exam/03/03-2/index.html b/예제코드/04_뷰 인스턴스/04-5/index.html → exam/03/03-2/index.html
@@ -1,8 +1,7 @@
 <html>
   <head>
-    <title>Vue Sample</title>
+    <title>Vue Instance Lifecycle</title>
   </head>
-
   <body>
     <div id="app">
       {{ message }}
@@ -31,5 +30,4 @@
       });
     </script>
   </body>
-
 </html>
diff --git a/exam/03/03-3/index.html b/exam/03/03-3/index.html
@@ -0,0 +1,22 @@
+<html>
+  <head>
+    <title>Vue Component Registration</title>
+  </head>
+  <body>
+    <div id="app">
+      <button>컴포넌트 등록</button>
+			<my-component></my-component>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script>
+      Vue.component('my-component', {
+        template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
+      });
+
+      new Vue({
+        el: '#app'
+      });
+    </script>
+  </body>
+</html>
diff --git a/exam/03/03-4/index.html b/exam/03/03-4/index.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <title>Vue Component Registration</title>
+  </head>
+  <body>
+    <div id="app">
+      <button>컴포넌트 등록</button>
+      <my-local-component></my-local-component>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script>
+      var cmp = {
+        // 컴포넌트 내용
+        template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
+      };
+
+      new Vue({
+        el: '#app',
+        components: {
+          'my-local-component': cmp
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/exam/03/03-5/index.html b/exam/03/03-5/index.html
@@ -0,0 +1,33 @@
+<html>
+  <head>
+    <title>Vue Local and Global Components</title>
+  </head>
+  <body>
+    <div id="app">
+      <h3>첫 번째 인스턴스 영역</h3>
+      <my-global-component></my-global-component>
+      <my-local-component></my-local-component>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
+    <script>
+      // 전역 컴포넌트 등록
+      Vue.component('my-global-component', {
+        template: '<div>전역 컴포넌트 입니다.</div>'
+      });
+
+      // 지역 컴포넌트 내용
+      var cmp = {
+        template: '<div>지역 컴포넌트 입니다.</div>'
+      };
+
+      new Vue({
+        el: '#app',
+        // 지역 컴포넌트 등록
+        components: {
+          'my-local-component': cmp
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/예제코드/05_뷰 컴포넌트/05-5/index.html → exam/03/03-6/index.html b/예제코드/05_뷰 컴포넌트/05-5/index.html → exam/03/03-6/index.html
@@ -1,25 +1,22 @@
-
 <html>
   <head>
     <title>Vue Local and Global Components</title>
   </head>
   <body>
-
     <div id="app">
-      <h3>1번째 인스턴스 영역</h3>
+      <h3>첫 번째 인스턴스 영역</h3>
       <my-global-component></my-global-component>
       <my-local-component></my-local-component>
     </div>
     <hr>
     <div id="app2">
-      <h3>2번째 인스턴스 영역</h3>
+      <h3>두 번째 인스턴스 영역</h3>
       <my-global-component></my-global-component>
       <my-local-component></my-local-component>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script>
-
       // 전역 컴포넌트 등록
       Vue.component('my-global-component', {
         template: '<div>전역 컴포넌트 입니다.</div>'
@@ -30,21 +27,18 @@ <h3>2번째 인스턴스 영역</h3>
         template: '<div>지역 컴포넌트 입니다.</div>'
       };
 
-      // 1번째 인스턴스
       new Vue({
         el: '#app',
         // 지역 컴포넌트 등록
         components: {
           'my-local-component': cmp
         }
-      })
+      });
 
-      // 2번째 인스턴스
+      // 두 번째 인스턴스
       new Vue({
         el: '#app2'
-      })
-
-
+      });
     </script>
   </body>
 </html>
diff --git a/예제코드/06_뷰 컴포넌트 통신/06-1/index.html → exam/03/03-7/index.html b/예제코드/06_뷰 컴포넌트 통신/06-1/index.html → exam/03/03-7/index.html
@@ -10,19 +10,19 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <script>
-      // 첫번째 컴포넌트 내용
+      // 첫 번째 컴포넌트 내용
       var cmp1 = {
-        template: '<div>1번째 지역 컴포넌트 : {{ cmp1Data }}</div>',
+        template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>',
         data: function() {
           return {
             cmp1Data : 100
           }
         }
       };
 
-      // 두번째 컴포넌트 내용
+      // 두 번째 컴포넌트 내용
       var cmp2 = {
-        template: '<div>2번째 지역 컴포넌트 : {{ cmp2Data }}</div>',
+        template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>',
         data: function() {
           return {
             cmp2Data : cmp1.data.cmp1Data
@@ -37,7 +37,7 @@
           'my-component1': cmp1,
           'my-component2': cmp2
         }
-      })
+      });
     </script>
   </body>
 </html>
diff --git a/예제코드/06_뷰 컴포넌트 통신/06-4/index.html → exam/03/03-8/index.html b/예제코드/06_뷰 컴포넌트 통신/06-4/index.html → exam/03/03-8/index.html
@@ -6,13 +6,12 @@
     <title>Vue Props Sample</title>
   </head>
   <body>
-
     <div id="app">
       <!-- 팁 : 오른쪽에서 왼쪽으로 속성을 읽으면 더 수월합니다. -->
       <child-component v-bind:propsdata="message"></child-component>
     </div>
 
-    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
     <script>
       Vue.component('child-component', {
         props: ['propsdata'],
@@ -25,7 +24,6 @@
           message: 'Hello Vue! passed from Parent Component'
         }
       });
-
     </script>
   </body>
 </html>
diff --git a/예제코드/06_뷰 컴포넌트 통신/06-5/index.html → exam/03/03-9/index.html b/예제코드/06_뷰 컴포넌트 통신/06-5/index.html → exam/03/03-9/index.html
@@ -6,25 +6,22 @@
     <title>Vue Event Emit Sample</title>
   </head>
   <body>
-
     <div id="app">
-      <child-component v-on:show-log="printText" v-bind:propsdata="message"></child-component>
+      <child-component v-on:show-log="printText"></child-component>
     </div>
 
-    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
     <script>
-
       Vue.component('child-component', {
-        props: ['propsdata'],
-        template: '<div>{{ propsdata }}<button v-on:click="showLog">show</button></div>',
+        template: '<button v-on:click="showLog">show</button>',
         methods: {
           showLog: function() {
             this.$emit('show-log');
           }
         }
       });
 
-      var app = new Vue({
+      new Vue({
         el: '#app',
         data: {
           message: 'Hello Vue! passed from Parent Component'
@@ -35,7 +32,6 @@
           }
         }
       });
-
     </script>
   </body>
 </html>
diff --git a/예제코드/07_뷰 라우터/07-2절/index.html → exam/04/04-1/index.html b/예제코드/07_뷰 라우터/07-2절/index.html → exam/04/04-1/index.html
@@ -6,7 +6,6 @@
     <title>Vue Router Sample</title>
   </head>
   <body>
-
     <div id="app">
       <h1>뷰 라우터 예제</h1>
       <p>
@@ -16,10 +15,9 @@ <h1>뷰 라우터 예제</h1>
       <router-view></router-view>
     </div>
 
-    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
     <script>
-
       // 3. Main. Login 컴포넌트 내용 정의
       var Main = { template: '<div>main</div>' };
       var Login = { template: '<div>login</div>' };
@@ -37,9 +35,9 @@ <h1>뷰 라우터 예제</h1>
 
       // 6. 뷰 라우터를 인스턴스에 등록
       var app = new Vue({
-        router
-      }).$mount('#app');
-
+        el: '#app',
+        router: router
+      });
     </script>
   </body>
 </html>