Merge pull request #293 from vuejs/master

获取官方更新

Author: dingyiming

src/support-vuejs/index.md

@@ -35,7 +35,7 @@
     <img src="/images/actualize.png" style="width:180px">
   </a><a href="https://www.2mhost.com/" target="_blank">
     <img src="/images/2mhost.png">
-  </a><a href="https://vuejsjob.com/?ref=vuejs" target="_blank" style="position:relative;top:6px">
+  </a><a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="position:relative;top:6px">
     <img src="/images/vuejobs.png">
   </a>
 </p>

src/v2/api/index.md

@@ -97,7 +97,7 @@ type: api
 
 ### keyCodes
 
-- **Type:** `{ [key: string]: number }`
+- **Type:** `{ [key: string]: number | Array<number> }`
 
 - **Default:** `{}`
 
@@ -107,7 +107,8 @@ type: api
   Vue.config.keyCodes = {
     v: 86,
     f1: 112,
-    mediaPlayPause: 179
+    mediaPlayPause: 179,
+    up: [38, 87]
   }
   ```
 
@@ -965,8 +966,8 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
       var body   = this.$slots.default
       var footer = this.$slots.footer
       return createElement('div', [
-        createElement('header', header)
-        createElement('main', body)
+        createElement('header', header),
+        createElement('main', body),
         createElement('footer', footer)
       ])
     }
@@ -1518,6 +1519,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
   <!-- shorthand -->
   <img :src="imageSrc">
+  
+  <!-- with inline string concatenation -->
+  <img :src="'/path/to/images/' + fileName">
 
   <!-- class binding -->
   <div :class="{ red: isRed }"></div>

src/v2/guide/comparison.md

@@ -101,7 +101,7 @@ In React, everything is Just JavaScript, which sounds very simple and elegant -
 
 #### JSX vs Templates
 
-In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within Javascript. Here's an example, [vetted by the React community](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244582684):
+In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript. Here's an example, [vetted by the React community](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244582684):
 
 ``` jsx
 render () {
@@ -267,7 +267,7 @@ We have a separate section for Angular 2 because it really is a completely new f
 
 While Angular 1 could be used for smaller applications, Angular 2 has shifted focus to best facilitate large enterprise applications. As part of this, it almost requires TypeScript, which can be very useful for developers that desire the type safety of languages such as Java and C#.
 
-Vue is also well-suited to [enterprise environments](https://github.com/vuejs/awesome-vue#enterprise-usage) and can even be used with TypeScript via our [official typings](https://github.com/vuejs/vue/tree/dev/types) and [user-contributed decorators](https://github.com/itsFrank/vue-typescript), though it's definitely optional in our case.
+Vue is also well-suited to [enterprise environments](https://github.com/vuejs/awesome-vue#enterprise-usage) and can even be used with TypeScript via our [official typings](https://github.com/vuejs/vue/tree/dev/types) and [official decorator](https://github.com/vuejs/vue-class-component), though it's definitely optional in our case.
 
 ### Size and Performance
 
@@ -289,7 +289,7 @@ Angular 2's learning curve is much steeper. Even without TypeScript, their [Quic
 
 Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and flexibility suffers. It's a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions.
 
-That said, it would probably make a better comparison between Vue core and Ember's [templating](https://guides.emberjs.com/v2.7.0/templates/handlebars-basics/) and [object model](https://guides.emberjs.com/v2.7.0/object-model/) layers:
+That said, it would probably make a better comparison between Vue core and Ember's [templating](https://guides.emberjs.com/v2.10.0/templates/handlebars-basics/) and [object model](https://guides.emberjs.com/v2.10.0/object-model/) layers:
 
 - Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties. In Ember, you need to wrap everything in Ember Objects and manually declare dependencies for computed properties.
 
@@ -321,8 +321,7 @@ It is also totally feasible to offer deeper integration between Vue with Web Com
 
 Riot 2.0 provides a similar component-based development model (which is called a "tag" in Riot), with a minimal and beautifully designed API. Riot and Vue probably share a lot in design philosophies. However, despite being a bit heavier than Riot, Vue does offer some significant advantages:
 
-- True conditional rendering. Riot renders all if branches and simply shows/hides them.
+- [Transition effect system](transitions.html). Riot has none.
 - A far more powerful router. Riot’s routing API is extremely minimal.
+- Better performance. Riot [traverses a DOM tree](http://riotjs.com/compare/#virtual-dom-vs-expressions-binding) rather than using a virtual DOM, so suffers from the same performance issues as Angular 1.
 - More mature tooling support. Vue provides official support for [Webpack](https://github.com/vuejs/vue-loader) and [Browserify](https://github.com/vuejs/vueify), while Riot relies on community support for build system integration.
-- [Transition effect system](transitions.html). Riot has none.
-- Better performance. [Despite advertising](https://github.com/vuejs/vuejs.org/issues/346) use of a virtual DOM, Riot in fact uses dirty checking and thus suffers from the same performance issues as Angular 1.

src/v2/guide/events.md

@@ -164,6 +164,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 - `.prevent`
 - `.capture`
 - `.self`
+- `.once`
 
 ``` html
 <!-- the click event's propagation will be stopped -->
@@ -186,6 +187,15 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 <div v-on:click.self="doThat">...</div>
 ```
 
+> New in 2.1.4
+
+``` html
+<!-- the click event will be triggered at most once -->
+<a v-on:click.once="doThis"></a>
+```
+
+Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components.html#Using-v-on-with-Custom-Events). If you haven't read about components yet, don't worry about this for now.
+
 ## Key Modifiers
 
 When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events:

src/v2/guide/join.md

@@ -12,7 +12,7 @@ Now we'll answer both what the community can do for and what you can do for the
 
 ### Get Support
 
-- [Forum](http://forum.vuejs.org/): THE best place to ask questions and get answers about Vue and its ecosystem.
+- [Forum](http://forum.vuejs.org/): The best place to ask questions and get answers about Vue and its ecosystem.
 - [Gitter Channel](https://gitter.im/vuejs/vue): A place for devs to meet and chat. You can ask questions here too, but the forum is the better platform, since the discussions are threaded.
 - [Github](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests!
 

src/v2/guide/render-function.md

@@ -296,8 +296,8 @@ render: function (createElement) {
       value: self.value
     },
     on: {
-      input: function (e) {
-        self.value = e.target.value
+      input: function (event) {
+        self.value = event.target.value
       }
     }
   })
@@ -306,6 +306,57 @@ render: function (createElement) {
 
 This is the cost of going lower-level, but it also gives you much more control over the interaction details compared to `v-model`.
 
+### Event & Key Modifiers
+
+For the `.capture` and `.once` event modifiers, Vue offers prefixes that can be used with `on`:
+
+| Modifier(s) | Prefix |
+| ------ | ------ |
+| `.capture` | `!` |
+| `.once` | `~` |
+| `.capture.once` or<br>`.once.capture` | `~!` |
+
+For example:
+
+```javascript
+on: {
+  '!click': this.doThisInCapturingMode,
+  '~keyup': this.doThisOnce,
+  `~!mouseover`: this.doThisOnceInCapturingMode
+}
+```
+
+For all other event and key modifiers, no proprietary prefix is necessary, because you can simply use event methods in the handler:
+
+| Modifier(s) | Equivalent in Handler |
+| ------ | ------ |
+| `.stop` | `event.stopPropagation()` |
+| `.prevent` | `event.preventDefault()` |
+| `.self` | `if (event.target !== event.currentTarget) return` |
+| Keys:<br>`.enter`, `.13` | `if (event.keyCode !== 13) return` (change `13` to [another key code](http://keycode.info/) for other key modifiers) |
+| Modifiers Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (change `ctrlKey` to `altKey`, `shiftKey`, or `metaKey`, respectively) |
+
+Here's an example with all of these modifiers used together:
+
+```javascript
+on: {
+  keyup: function (event) {
+    // Abort if the element emitting the event is not
+    // the element the event is bound to
+    if (event.target !== event.currentTarget) return
+    // Abort if the key that went up is not the enter
+    // key (13) and the shift key was not held down
+    // at the same time
+    if (!event.shiftKey || event.keyCode !== 13) return
+    // Stop event propagation
+    event.stopPropagation()
+    // Prevent the default keyup handler for this element
+    event.preventDefault()
+    // ...
+  }
+}
+```
+
 ### Slots
 
 You can access static slot contents as Arrays of VNodes from [`this.$slots`](http://vuejs.org/v2/api/#vm-slots):
@@ -340,7 +391,7 @@ render (createElement) {
       // in the form of { name: props => VNode | Array<VNode> }
       scopedSlots: {
         default: function (props) {
-          return h('span', props.text)
+          return createElement('span', props.text)
         }
       }
     })

src/v2/guide/single-file-components.md

@@ -47,7 +47,7 @@ With `.vue` components, we're entering the realm of advanced JavaScript applicat
 
 After you've taken a day to dive into these resources, we recommend checking out the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template. Follow the instructions and you should have a Vue project with `.vue` components, ES2015 and hot-reloading running in no time!
 
-The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundle them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications).
+The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications).
 
 In Webpack, each module can be transformed by a "loader" before being included in the bundle, and Vue offers the [vue-loader](https://github.com/vuejs/vue-loader) plugin to take care of translating `.vue` single-file components. The [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template has already set up everything for you, but if you'd like to learn more about how `.vue` components work with Webpack, you can read [the docs for vue-loader](https://vue-loader.vuejs.org).
 

src/v2/guide/state-management.md

@@ -44,7 +44,7 @@ var store = {
   },
   clearMessageAction () {
     this.debug && console.log('clearMessageAction triggered')
-    this.state.message = 'action B triggered'
+    this.state.message = 'clearMessageAction triggered'
   }
 }
 ```

src/v2/guide/transitions.md

@@ -1,5 +1,5 @@
 ---
-title: 'Transition Effects'
+title: Transition Effects
 type: guide
 order: 13
 ---
@@ -139,7 +139,7 @@ new Vue({
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
 .slide-fade-enter, .slide-fade-leave-active {
-  padding-left: 10px;
+  transform: translateX(10px);
   opacity: 0;
 }
 ```
@@ -169,7 +169,7 @@ new Vue({
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
 .slide-fade-enter, .slide-fade-leave-active {
-  padding-left: 10px;
+  transform: translateX(10px);
   opacity: 0;
 }
 </style>

themes/vue/layout/partials/ecosystem_dropdown.ejs

@@ -11,7 +11,7 @@
     <li><ul>
       <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
       <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">Blog</a></li>
-      <li><a href="https://vuejsjob.com/?ref=vuejs" class="nav-link" target="_blank">Jobs</a></li>
+      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">Jobs</a></li>
     </ul></li>
     <li><h4>Core Plugins</h4></li>
     <li><ul>

themes/vue/layout/partials/language_dropdown.ejs

@@ -3,5 +3,6 @@
   <ul class="nav-dropdown">
     <li><a href="https://cn.vuejs.org/" class="nav-link" target="_blank">中文</a></li>
     <li><a href="https://jp.vuejs.org/" class="nav-link" target="_blank">日本語</a></li>
+    <li><a href="https://ru.vuejs.org/" class="nav-link" target="_blank">Русский</a></li>
   </ul>
 </li>

themes/vue/layout/partials/sponsors.ejs

@@ -31,6 +31,6 @@
 <a href="https://www.2mhost.com/" target="_blank" style="width:90px">
   <img src="/images/2mhost.png" style="width:90px">
 </a>
-<a href="https://vuejsjob.com/?ref=vuejs" target="_blank" style="width:90px;top:5px">
+<a href="https://vuejobs.com/?ref=vuejs" target="_blank" style="width:90px;top:5px">
   <img src="/images/vuejobs.png" style="width:90px">
 </a>

themes/vue/source/css/_demo.styl

@@ -2,6 +2,7 @@
     border 1px solid #eee
     border-radius $radius
     padding 25px 35px
+    margin-top 1em
     margin-bottom 40px
     font-size 1.2em
     line-height 1.5em

themes/vue/source/css/page.styl

@@ -93,6 +93,25 @@
             margin-left 0
     iframe
         margin 1em 0
+    > table
+        border 2px solid $white
+        margin 1.2em auto
+        padding: 1em
+        td, th
+            line-height 1.6em
+            padding .5em 1.4em
+            border none
+        td
+            background-color: lighten($codebg, 60%)
+        th
+            background-color: $green
+            color: #fff
+            padding-top: .85em
+            padding-bottom .85em
+            text-align left
+        tbody
+            code
+                background-color #efefef
     p.tip
         padding 12px 24px 12px 30px
         margin 2em 0