Update Essential

vuejs-kr · Sep 29, 2017 · dc1f881 · dc1f881
1 parent cf2e13b
commit dc1f881
Show file tree

Hide file tree

Showing 21 changed files with 9,061 additions and 7,052 deletions.
diff --git a/assets/lifecycle.ai b/assets/lifecycle.ai
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,4 +20,4 @@
     "hexo-renderer-stylus": "^0.3.1",
     "hexo-server": "^0.2.0"
   }
-}
+}
diff --git a/src/images/lifecycle.png b/src/images/lifecycle.png
diff --git a/src/v2/guide/reactivity.md.hidden → src/v2/guide/reactivity.md b/src/v2/guide/reactivity.md.hidden → src/v2/guide/reactivity.md
@@ -1,67 +1,16 @@
 ---
 title: 반응형에 대해 깊이 알아보기
 type: guide
-order: -1
+order: 601
 ---
 
-!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! NOTE FOR TRANSLATORS !!
-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! Don't bother translating changes to this page yet, !!
-!! as it's not visible on the frontend and will     !!
-!! eventually be adapted into a page - or perhaps   !!
-!! a completely separate guide - for potential      !!
-!! contributors to Vue.                             !!
-!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
-One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management very simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system.
+Now it's time to take a deep dive! One of Vue's most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue's reactivity system.
 
 ## 변경 내용을 추적하는 방법
 
-When Vue initializes, it walks through all of its data properties and proxies them with getters and setters. That means:
-
-``` js
-data: {
-  greeting: 'Hi'
-}
-```
-
-``` js
-Object.defineProperty(vm.$data, 'greeting', {
-  get () {
-    // ...
-    // Notify that getter was called,
-    // for dependency tracking
-    // ...
-    return vm._data.greeting
-  },
-  set (newValue) {
-    // ...
-    // Notify that setter was called,
-    // for change notification
-    // ...
-    vm._data.greeting = newValue
-  }
-})
-```
-
-These proxies are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format these proxied properties differently. That means when you log them:
-
-``` js
-var vm = new Vue({
-  data: {
-    greeting: 'Hi'
-  }
-})
-
-console.log(vm.$data)
-```
-
-What you see may be more difficult to browse:
-
-![](/images/logged-proxied-data.png)
+When you pass a plain JavaScript object to a Vue instance as its `data` option, Vue will walk through all of its properties and convert them to getter/setters using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This is an ES5-only and un-shimmable feature, which is why Vue doesn't support IE8 and below.
 
-Fortunately, installing the [vue-devtools](https://github.com/vuejs/vue-devtools) will provide you a browsable tree of components, where you can inspect their data in a more user-friendly interface.
+The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface.
 
 getter / setter 는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있습니다. 한가지 주의 사항은 변환된 데이터 객체가 기록될 때 브라우저가 getter / setter 형식을 다르게 처리하므로 친숙한 인터페이스를 사용하기 위해  [vue-devtools](https://github.com/vuejs/vue-devtools)를 설치하는 것이 좋습니다.
 
@@ -91,7 +40,11 @@ Vue는 이미 만들어진 인스턴스에 새로운 루트 수준의 반응 속
 Vue.set(vm.someObject, 'b', 2)
 ```
 
+<<<<<<< HEAD:src/v2/guide/reactivity.md.hidden
 `Vm.$set` 인스턴스 메소드를 사용할 수도 있습니다. 이 메소드는 전역 `Vue.set` 에 대한 별칭입니다.
+=======
+You can also use the `vm.$set` instance method, which is an alias to the global `Vue.set`:
+>>>>>>> upstream/master:src/v2/guide/reactivity.md
 
 ``` js
 this.$set(this.someObject, 'b', 2)
@@ -108,7 +61,11 @@ this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
 
 ## 반응형 속성 선언하기
 
+<<<<<<< HEAD:src/v2/guide/reactivity.md.hidden
 Vue는 루트 수준의 반응성 속성을 동적으로 추가 할 수 없으므로 모든 루트 수준의 반응성 데이터 속성을 빈 값으로라도 초기에 선언하여 Vue 인스턴스를 초기화해야합니다.
+=======
+Since Vue doesn't allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value:
+>>>>>>> upstream/master:src/v2/guide/reactivity.md
 
 ``` js
 var vm = new Vue({

diff --git a/themes/vue/layout/partials/ad-text.ejs b/themes/vue/layout/partials/ad-text.ejs
@@ -0,0 +1,13 @@
+<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
+<div class="bsa-cpc"></div>
+<script>
+  (function(){
+    if(typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    });
+      }
+  })();
+</script>
diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs
@@ -0,0 +1,10 @@
+<li class="nav-dropdown-container learn">
+  <a class="nav-link<%- page.path.match(/(guide(?!\/team.html$)|api|examples|cookbook)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
+  <ul class="nav-dropdown">
+    <li><ul>
+      <li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
+      <li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
+      <li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
+    </ul></li>
+  </ul>
+</li>
diff --git a/themes/vue/layout/partials/support_vue_dropdown.ejs b/themes/vue/layout/partials/support_vue_dropdown.ejs
@@ -0,0 +1,10 @@
+<li class="nav-dropdown-container support-vue">
+  <a class="nav-link">Support Vue</a><span class="arrow"></span>
+  <ul class="nav-dropdown">
+    <li><ul>
+      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">Shop</a></li>
+      <li><a href="https://opencollective.com/vuejs" target="_blank" class="nav-link">Support Us on OpenCollective</a></li>
+      <li><a href="https://www.patreon.com/evanyou" target="_blank" class="nav-link">Support Evan on Patreon</a></li>
+    </ul></li>
+  </ul>
+</li>
diff --git a/themes/vue/source/css/_ad.styl b/themes/vue/source/css/_ad.styl
@@ -0,0 +1,66 @@
+// main ad placement (bottom right)
+#ad
+  width: 125px
+  // text-align: center
+  position: fixed
+  z-index: 99
+  bottom: 10px
+  right: 10px
+  padding: 10px
+  background-color: #fff
+  border-radius: 3px
+  font-size: 13px
+  a
+    display: inline-block
+    color: $light
+    font-weight: normal
+  span
+    color: $light
+    display: inline-block
+    margin-bottom: 5px
+  img
+    width: 125px
+  .carbon-img, .carbon-text
+    display: block
+    margin-bottom: 6px
+    font-weight: normal
+    color: $medium
+  .carbon-poweredby
+    color: #aaa
+    font-weight: normal
+
+// text ad (below page title)
+.bsa-cpc
+  font-size 1em
+  background-color #f8f8f8
+  a._default_
+    text-align left
+    display block
+    padding 10px 15px 12px
+    margin-bottom 20px
+    color #666
+    font-weight 400
+    line-height 18px
+    .default-image, .default-title, .default-description
+      display inline
+      vertical-align middle
+      margin-right 6px
+    .default-image
+      img
+        height 20px
+        border-radius 3px
+        vertical-align middle
+        position relative
+        top -1px
+    .default-title
+      font-weight 600
+    .default-description:after
+      font-size .85em
+      content "Sponsored"
+      color $info
+      border 1px solid $info
+      border-radius 3px
+      padding 0 4px 1px
+      margin-left 6px
+  .default-ad
+    display none
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -1,5 +1,6 @@
 @import "_settings"
 @import "_syntax"
+@import "_ad"
 
 body
   font-family: $body-font
@@ -95,61 +96,31 @@ a.button
       height: 15px
       font-weight: 600
   &.html .code:before
-    content: 'HTML'
+    content: "HTML"
   &.js .code:before
-    content: 'JS'
+    content: "JS"
   &.bash .code:before
-    content: 'Shell'
+    content: "Shell"
   &.css .code:before
-    content: 'CSS'
+    content: "CSS"
 
 #main
   position: relative
   z-index: 1
   padding: 0 60px 30px
   overflow-x: hidden
 
-#ad
-  width: 125px
-  // text-align: center
-  position: fixed
-  z-index: 99
-  bottom: 10px
-  right: 10px
-  padding: 10px
-  background-color: #fff
-  border-radius: 3px
-  font-size: 13px
-  a
-    display: inline-block
-    color: $light
-    font-weight: normal
-  span
-    color: $light
-    display: inline-block
-    margin-bottom: 5px
-  img
-    width: 125px
-  .carbon-img, .carbon-text
-    display: block
-    margin-bottom: 6px
-    font-weight: normal
-    color: $medium
-  .carbon-poweredby
-    color: #aaa
-    font-weight: normal
-
 #nav
   .nav-link
     cursor: pointer
   .nav-dropdown-container
     .nav-link
-      &:hover
+      &:hover:not(.current)
         border-bottom: none
     &:hover
       .nav-dropdown
         display: block
-    &.language
+    &.language, &.ecosystem
       margin-left: 20px
     .arrow
       pointer-events: none

diff --git a/themes/vue/source/css/_header.styl b/themes/vue/source/css/_header.styl
@@ -31,11 +31,28 @@ body.docs
     position: relative
     margin: 0 .6em
 
+  .nav-dropdown
+    .nav-link
+      &:hover, &.current
+        border-bottom: none
+      &.current
+        &::after
+          content: ""
+          width: 0
+          height: 0
+          border-left: 5px solid $green
+          border-top: 3px solid transparent
+          border-bottom: 3px solid transparent
+          position: absolute
+          top: 50%
+          margin-top: -4px
+          left: 8px
+
 .nav-link
   padding-bottom: 3px
   &:hover, &.current
     border-bottom: 3px solid $green
-  &.shop
+  &.team
     margin-left: 10px
 
 .new-label

diff --git a/themes/vue/source/css/_settings.styl b/themes/vue/source/css/_settings.styl
@@ -1,7 +1,7 @@
 // font faces
-$body-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-$logo-font = 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-$code-font = 'Roboto Mono', Monaco, courier, monospace
+$body-font = "Source Sans Pro", "Helvetica Neue", Arial, sans-serif
+$logo-font = "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif
+$code-font = "Roboto Mono", Monaco, courier, monospace
 
 // font sizes
 $body-font-size = 15px

diff --git a/themes/vue/source/css/_sponsor.styl b/themes/vue/source/css/_sponsor.styl
@@ -1,7 +1,72 @@
-.sponsors-page
+// frontpage
+#sponsors
+  text-align: center
+  padding: 35px 40px 45px
+  background-color: #f6f6f6
+  .inner
+    max-width: 700px
+    margin: 0px auto
+  h3
+    color: #999
+    margin: 0 0 10px
+  a
+    margin: 20px 15px 0
+    position: relative
   a, img
-    width: 120px
+    width: 100px
     display: inline-block
     vertical-align: middle
-  a
-    margin: 10px 20px
+  img
+    transition: all .3s ease
+    filter: grayscale(100%)
+    opacity: 0.66
+    &:hover
+      filter: none
+      opacity: 1
+  a.vip
+    display: block
+    margin: 30px auto 15px
+    width: 200px
+    img
+      width: 200px
+  .become-sponsor
+    margin-top: 40px
+    font-size: .9em
+    font-weight: 700
+    width: auto
+    background-color: transparent
+
+  .open-collective-sponsors
+    margin-top 60px
+    a, img
+      width: auto
+      max-width: 100px
+      max-height: 60px
+    h4
+      color #999
+      margin-bottom 0
+  &.active
+    img
+      filter: none
+      opacity: 1
+
+// support-vuejs page
+.content
+  .sponsor-section
+    text-align center
+    margin-top 0
+    margin-bottom 60px
+
+  .patreon-sponsors
+    a, img
+      width: 120px
+      display: inline-block
+      vertical-align: middle
+    a
+      margin: 10px 20px
+
+  .open-collective-sponsors
+    img
+      border-radius 50%
+      max-height 80px
+      margin-right 20px
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,4 +20,4 @@ @@
         "hexo-renderer-stylus": "^0.3.1",
         "hexo-server": "^0.2.0"
       }
-    }
+    }