Update from vuejs.org (vuejs#1075)

* updated from vuejs.org 34df294...3ed3359

* Apply suggestions from code review

Co-Authored-By: GU Yiling <[email protected]>

* Update forms.md

* Update form-validation.md

Co-authored-by: GU Yiling <[email protected]>

Author: Jinjiang

_config.yml

@@ -77,6 +77,11 @@ pagination_dir: page
 # Disqus
 disqus_shortname:
 
+# Include/Exclude Files/Folders
+exclude:
+## Exclude example code from Nunjucks
+  - "v2/examples/vue-20-*/*"
+
 # Extensions
 ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
 ## Themes: https://github.com/hexojs/hexo/wiki/Themes

assets/why-vue/arabic.js.srt

@@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة،
 
 94
 00:03:57,460 --> 00:03:59,850
-دعنا نلغي ​​العنصر الأخير من المصفوفة
+دعنا نلغي العنصر الأخير من المصفوفة
 
 95
 00:03:59,850 --> 00:04:01,828

package.json

@@ -2,7 +2,7 @@
   "name": "cn.vuejs.org",
   "private": true,
   "hexo": {
-    "version": "3.7.1"
+    "version": "3.8.0"
   },
   "scripts": {
     "start": "hexo server",

src/resources/partners.md

@@ -42,7 +42,12 @@ partners_list:
         name: Modus Create
         logo: https://res.cloudinary.com/modus-labs/image/upload/v1533109874/modus/logo-vertical-black.svg
         description:
-            "Modus Create is a digital product agency that supports clients with business and product strategy consulting, customer experience, cloud services, and Agile software delivery. Our official partnerships with Atlassian, AWS, InVision, Cloudflare, GitHub, Ionic Framework, and Vue.js reinforce our proven results with digital transformation with organizations from startups to the Fortune 100."
+            "Modus Create is a disruptive consulting firm that helps companies transform for success in the digital future.
+
+            Clients work with Modus to effect transformational change through a unique collaborative engagement model that focuses on strategy, product design/build, user experience, company culture, and process change to accelerate their response to digital disruption.
+
+            Modus is uniquely expert at executing within the new reality of global talent sourcing and globally distributed teams. Modus culture is based on recruiting only top talent regardless of their location. Modus delivers time zone-aligned, highly productive, English-speaking teams, accessibility, and a totally collaborative environment regardless of individual location.
+"
         proficiencies:
             - name: Vue.js
               url: https://moduscreate.com/partners/vue/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
@@ -89,7 +94,7 @@ partners_list:
         name: Monterail
         logo: Monterail.png
         description:
-            "Monterail is a full-service software development company with 100+ experts on board delivering meaningful software for start-ups, SMBs and enterprises. We build for the Web with Ruby on Rails, Python, JavaScript, and Agile. We guarantee this: a product so qualitative and aligned with your vision, you’ll swear it was built in-house."
+            "Monterail is a full-service software development company with 110+ experts on board delivering meaningful software for start-ups, SMBs and enterprises. We are organizers of the first official Vue-related conference in the world and authors of the State of Vue.js report (2017&2019). Our experts delivered 30 Vue.js-based projects so far."
         proficiencies:
             - name: VueJs
               url: https://hi.monterail.co/2NqPUa6
@@ -100,15 +105,15 @@ partners_list:
             - name: Python
               url: https://hi.monterail.co/2MXHLeb
             - name: Services
-              url:  https://www.monterail.com/services
+              url:  https://www.monterail.com/services?utm_medium=referral&utm_source=partner-list&utm_campaign=vue.js
             - name: Projects
-              url:  https://www.monterail.com/projects
+              url:  https://www.monterail.com/projects?utm_medium=referral&utm_source=partner-list&utm_campaign=vue.js
         location: Wrocław, Poland
         languages:
             - English
             - Polish
         url_text: www.monterail.com
-        url_link: www.monterail.com/?utm_campaign=Vue.js&utm_source=partner-list
+        url_link: www.monterail.com/services/vue-development?utm_campaign=Vue.js&utm_source=partner-list
         hire_url: www.monterail.com/contact
         email: [email protected]
         social_links:

src/v2/api/index.md

@@ -684,6 +684,7 @@ type: api
         handler: 'someMethod',
         immediate: true
       },
+      // 你可以传入回调数组，它们会被逐一调用
       e: [
         'handle1',
         function handle2 (val, oldVal) { /* ... */ },

src/v2/cookbook/debugging-in-vscode.md

@@ -64,7 +64,7 @@ module.exports = {
       "webRoot": "${workspaceFolder}/src",
       "breakOnLoad": true,
       "sourceMapPathOverrides": {
-        "webpack:///./src/*": "${webRoot}/*"
+        "webpack:///src/*": "${webRoot}/*"
       }
     },
     {

src/v2/cookbook/form-validation.md

@@ -203,7 +203,7 @@ const app = new Vue({
       e.preventDefault();
     },
     validEmail: function (email) {
-      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
       return re.test(email);
     }
   }
@@ -330,21 +330,26 @@ const app = new Vue({
 
 ## 服务端校验
 
-在我们最终的示例中，我们构建了一些用到 Ajax 的服务端校验的东西。这个表单将会问你为一个新产品起名字，并且将会确保这个名字是唯一的。我们快速写了一个 [OpenWhisk](http://openwhisk.apache.org/) 的 serverless action 来进行这个校验。虽然这不是非常重要，但其逻辑如下：
+在我们最终的示例中，我们构建了一些用到 Ajax 的服务端校验的东西。这个表单将会问你为一个新产品起名字，并且将会确保这个名字是唯一的。我们快速写了一个 [Netlify](https://netlify.com/) 的 serverless action 来进行这个校验。虽然这不是非常重要，但其逻辑如下：
 
 ``` js
-function main(args) {
-  return new Promise((resolve, reject) => {
-    // 不好的产品名：vista, empire, mbp
+exports.handler = async (event, context) => {
+  
     const badNames = ['vista', 'empire', 'mbp'];
-    
-    if (badNames.includes(args.name)) {
-      reject({error: 'Existing product'});
+    const name = event.queryStringParameters.name;
+
+    if (badNames.includes(name)) {
+      return { 
+        statusCode: 400,         
+        body: JSON.stringify({error: 'Invalid name passed.'}) 
+      }
+    }
+
+    return {
+      statusCode: 204
     }
-    
-    resolve({status: 'ok'});
-  });
 }
+
 ```
 
 基本上除了“vista”、“empire”和“mbp”的名字都是可以接受的。好，让我们来看看表单。
@@ -386,7 +391,7 @@ function main(args) {
 这里没有任何特殊的东西。接下来我们再看看 JavaScript。
 
 ``` js
-const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
+const apiUrl = 'https://vuecookbook.netlify.com/.netlify/functions/product-name?name=';
 
 const app = new Vue({
   el: '#app',
@@ -404,13 +409,12 @@ const app = new Vue({
         this.errors.push('Product name is required.');
       } else {
         fetch(apiUrl + encodeURIComponent(this.name))
-        .then(res => res.json())
-        .then(res => {
-          if (res.error) {
-            this.errors.push(res.error);
-          } else {
-            // 在成功的时候重定向到一个新的 URL 或做一些别的事情
-            alert('ok!');
+        .then(async res => {
+          if (res.status === 204) {
+            alert('OK');
+          } else if (res.status === 400) {
+            let errorResponse = await res.json();
+            this.errors.push(errorResponse.error);
           }
         });
       }

src/v2/examples/commits.md

@@ -6,4 +6,4 @@ order: 1
 
 > 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-github-commits?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/deepstream.md

@@ -6,4 +6,4 @@ order: 9
 
 > 这个例子使用 [deepstreamHub](https://deepstreamhub.com/) 在客户端之间实时同步数据、发送事件、远程程序调用 (你可以多开几个浏览器窗口试一试)。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-realtime-with-deepstreamhub?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/elastic-header.md

@@ -4,4 +4,4 @@ type: examples
 order: 7
 ---
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/y91wy85p/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-elastic-header?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/firebase.md

@@ -5,4 +5,5 @@ order: 10
 ---
 
 > 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步 (你可以在多个浏览器窗口去打开它来验证)。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 过渡。
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/grid-component.md

@@ -6,4 +6,4 @@ order: 3
 
 > 本示例创建了一个可复用组件，可结合外部数据来使用它。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-grid-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/index.md

@@ -6,4 +6,4 @@ order: 0
 
 > 蠢萌的 Markdown 编辑器。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/modal.md

@@ -6,4 +6,4 @@ order: 6
 
 > 使用到的特性：组件，prop 传递，内容插入(content insertion)，过渡 (transitions)。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-modal-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/select2.md

@@ -6,4 +6,4 @@ order: 8
 
 > 在本例中，我们整合了第三方 jQuery 插件 (select2)，怎么做到的呢？就是把它内嵌在一个常用组件中。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-wrapper-component?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/svg.md

@@ -6,4 +6,4 @@ order: 5
 
 > 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-svg-graph?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/todomvc.md

@@ -6,6 +6,6 @@ order: 11
 
 > 本例是一个完全和规范一致的 TodoMVC 实现，只用了 120 行有效的 JavaScript (不包含注释和空行)。
 
-<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.</p>
+<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved. You'll have to click on `Open Sandbox` to see the live result.</p>
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-todomvc?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/tree-view.md

@@ -6,4 +6,4 @@ order: 4
 
 > 本示例是一个简单的树形视图实现，它展现了组件的递归使用。
 
-<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pnqzspoe/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-tree-view?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

src/v2/examples/vue-10-two-way-currency-filter-v2/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Two-way Currency Filter</title>
+    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <currency-input label="Price" v-bind:value.sync="price"></currency-input>
+      <currency-input
+        label="Shipping"
+        v-bind:value.sync="shipping"
+      ></currency-input>
+      <currency-input
+        label="Handling"
+        v-bind:value.sync="handling"
+      ></currency-input>
+      <currency-input
+        label="Discount"
+        v-bind:value.sync="discount"
+      ></currency-input>
+
+      <p>Total: ${{ total }}</p>
+    </div>
+
+    <script>
+      Vue.component("currency-input", {
+        template:
+          '\
+            <div>\
+              <label v-if="label">{{ label }}</label>\
+              <input\
+                v-model="value | currency"\
+                v-on:focus="selectAll"\
+              >\
+            </div>\
+          ',
+        props: {
+          value: {
+            type: Number,
+            default: 0,
+            twoWay: true
+          },
+          label: {
+            type: String,
+            default: ""
+          }
+        },
+        filters: {
+          currency: {
+            read: function(value) {
+              return "$" + value.toFixed(2);
+            },
+            write: function(value) {
+              var number = +value.replace(/[^\d.]/g, "");
+              return isNaN(number) ? 0 : number;
+            }
+          }
+        },
+        methods: {
+          selectAll: function(event) {
+            // Workaround for Safari bug
+            // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
+            setTimeout(function() {
+              event.target.select();
+            }, 0);
+          }
+        }
+      });
+
+      new Vue({
+        el: "#app",
+        data: {
+          price: 0,
+          shipping: 0,
+          handling: 0,
+          discount: 0
+        },
+        computed: {
+          total: function() {
+            return this.price + this.shipping + this.handling - this.discount;
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

src/v2/examples/vue-10-two-way-currency-filter-v2/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "vue-10-two-way-currency-filter-v2",
+  "version": "1.0.0",
+  "description": "Showing how delayed state updates can cause strange behavior.",
+  "main": "index.html",
+  "scripts": {
+    "start": "serve"
+  },
+  "keywords": [],
+  "license": "MIT",
+  "devDependencies": {
+    "serve": "^11.2.0"
+  }
+}

src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "static"
+}