Skip to content

Commit

Permalink
Update from vuejs.org (#1075)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
Jinjiang and Justineo authored Apr 8, 2020
1 parent deaa935 commit e814224
Show file tree
Hide file tree
Showing 155 changed files with 4,297 additions and 434 deletions.
5 changes: 5 additions & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion assets/why-vue/arabic.js.srt
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة،

94
00:03:57,460 --> 00:03:59,850
دعنا نلغي ​​العنصر الأخير من المصفوفة
دعنا نلغي العنصر الأخير من المصفوفة

95
00:03:59,850 --> 00:04:01,828
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "cn.vuejs.org",
"private": true,
"hexo": {
"version": "3.7.1"
"version": "3.8.0"
},
"scripts": {
"start": "hexo server",
Expand Down
15 changes: 10 additions & 5 deletions src/resources/partners.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down
1 change: 1 addition & 0 deletions src/v2/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -684,6 +684,7 @@ type: api
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/debugging-in-vscode.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ module.exports = {
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
"webpack:///src/*": "${webRoot}/*"
}
},
{
Expand Down
42 changes: 23 additions & 19 deletions src/v2/cookbook/form-validation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -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”的名字都是可以接受的。好,让我们来看看表单。
Expand Down Expand Up @@ -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',
Expand All @@ -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);
}
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/v2/examples/commits.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/deepstream.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/elastic-header.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 2 additions & 1 deletion src/v2/examples/firebase.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/grid-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/select2.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/svg.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/v2/examples/todomvc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/v2/examples/tree-view.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
88 changes: 88 additions & 0 deletions src/v2/examples/vue-10-two-way-currency-filter-v2/index.html
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions src/v2/examples/vue-10-two-way-currency-filter-v2/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"template": "static"
}
Loading

0 comments on commit e814224

Please sign in to comment.