Skip to content

Commit d6df2c9

Browse files
committed
Merge branch 'vuefe-2.0' into vuejs-master
# Conflicts: # src/v2/guide/index.md # src/v2/guide/installation.md # themes/vue/source/js/common.js
2 parents 5413ad0 + 5ba2531 commit d6df2c9

File tree

6 files changed

+65
-71
lines changed

6 files changed

+65
-71
lines changed

README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@
9393

9494
### Vuex 2.0
9595
翻译已完成 <br />
96-
校对中 <br />
9796

9897
### webpack2
9998
翻译中 [webpack.js.org](https://github.com/vuefe/webpack2) <br />

src/v2/api/index.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1023,7 +1023,7 @@ type: api
10231023

10241024
- **用法:**
10251025

1026-
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数的得到参数为新值和旧值。表达式可以是某个键路径或任意合法绑定表达式
1026+
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代
10271027

10281028
<p class="tip">注意:在变异(不是替换)对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。</p>
10291029

@@ -1035,11 +1035,6 @@ type: api
10351035
// 做点什么
10361036
})
10371037

1038-
// 表达式
1039-
vm.$watch('a + b', function (newVal, oldVal) {
1040-
// 做点什么
1041-
})
1042-
10431038
// 函数
10441039
vm.$watch(
10451040
function () {

src/v2/guide/index.md

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -272,9 +272,7 @@ Vue.component('todo-item', {
272272
273273
``` html
274274
<ul>
275-
<!--
276-
Create an instance of the todo-item component
277-
-->
275+
<!-- Create an instance of the todo-item component -->
278276
<todo-item></todo-item>
279277
</ul>
280278
```
@@ -296,11 +294,9 @@ Vue.component('todo-item', {
296294
``` html
297295
<div id="app-7">
298296
<ol>
299-
<!--
300-
Now we provide each todo-item with the todo object
301-
it's representing, so that its content can be dynamic
302-
-->
303-
<todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
297+
<!-- Now we provide each todo-item with the todo object -->
298+
<!-- it's representing, so that its content can be dynamic -->
299+
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
304300
</ol>
305301
</div>
306302
```
@@ -310,21 +306,22 @@ Vue.component('todo-item', {
310306
props: ['todo'],
311307
template: '<li>{{ todo.text }}</li>'
312308
})
309+
313310
var app7 = new Vue({
314311
el: '#app-7',
315312
data: {
316-
todos: [
317-
{ text: 'Learn JavaScript' },
318-
{ text: 'Learn Vue' },
319-
{ text: 'Build something awesome' }
313+
groceryList: [
314+
{ text: 'Vegetables' },
315+
{ text: 'Cheese' },
316+
{ text: 'Whatever else humans are supposed to eat' }
320317
]
321318
}
322319
})
323320
```
324321
{% raw %}
325322
<div id="app-7" class="demo">
326323
<ol>
327-
<todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
324+
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
328325
</ol>
329326
</div>
330327
<script>
@@ -335,10 +332,10 @@ Vue.component('todo-item', {
335332
var app7 = new Vue({
336333
el: '#app-7',
337334
data: {
338-
todos: [
339-
{ text: 'Learn JavaScript' },
340-
{ text: 'Learn Vue' },
341-
{ text: 'Build something awesome' }
335+
groceryList: [
336+
{ text: 'Vegetables' },
337+
{ text: 'Cheese' },
338+
{ text: 'Whatever else humans are supposed to eat' }
342339
]
343340
}
344341
})

src/v2/guide/installation.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ dev_size: "194.65"
77
min_size: "64.28"
88
gz_size: "23.55"
99
ro_gz_size: "16.39"
10+
---
1011

1112
### 兼容性
1213

src/v2/guide/reactivity.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,9 @@ vm.message = 'Hello!'
7676

7777
## 异步更新队列
7878

79-
你应该注意到 Vue 执行 DOM 更新是**异步的**,只要观察到数据变化,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。然后,在接下来的事件循环中,Vue 刷新队列并仅执行必要的 DOM 更新。Vue 在内部使用 `Promise.then``MutationObserver` 为可用的异步队列调用回调 `setTimeout(fn, 0)`.
79+
你应该注意到 Vue 执行 DOM 更新是**异步的**,只要观察到数据变化,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。然后,在接下来的事件循环中,Vue 刷新队列并仅执行必要的 DOM 更新。Vue 在内部尝试利用原生的 `Promise.then``MutationObserver` 来调用异步队列,如果执行环境不兼容,会采用 `setTimeout(fn, 0)` 代替。
8080

81-
例如,当你设置 `vm.someData = 'new value'`,该组件不会马上被重新渲染。当刷新队列时,这个组件会在下一次事件循环清空队列时更新。我们基本不用关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。一般来讲,Vue 鼓励开发者沿着数据驱动的思路,尽量避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 `Vue.nextTick(callback)`。这样回调在 DOM 更新完成后就会调用。例如:
81+
例如,当你设置 `vm.someData = 'new value'` ,该组件不会马上被重新渲染。当刷新队列时,这个组件会在下一次事件循环清空队列时更新。我们基本不用关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。一般来讲, Vue 鼓励开发者沿着数据驱动的思路,尽量避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 `Vue.nextTick(callback)` 。这样回调在 DOM 更新完成后就会调用。例如:
8282

8383
```html
8484
<div id="example">{{message}}</div>
@@ -96,7 +96,7 @@ Vue.nextTick(function () {
9696
vm.$el.textContent === 'new message' // true
9797
})
9898
```
99-
`vm.$nextTick()` 这个实例方法在组件内使用特别方便,因为它不需要全局 `Vue`,它的回调 `this` 将自动绑定到当前的 Vue 实例上:
99+
`vm.$nextTick()` 这个实例方法在组件内使用特别方便,因为它不需要全局 `Vue` ,它的回调 `this` 将自动绑定到当前的 Vue 实例上:
100100
``` js
101101
Vue.component('example', {
102102
template: '<span>{{ message }}</span>',

themes/vue/source/js/common.js

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(function () {
1+
(function() {
22

33
initMobileMenu()
44
if (PAGE_TYPE) {
@@ -8,11 +8,11 @@
88
initLocationHashFuzzyMatching()
99
}
1010

11-
function initApiSpecLinks () {
11+
function initApiSpecLinks() {
1212
var apiContent = document.querySelector('.content.api')
1313
if (apiContent) {
1414
var apiTitles = [].slice.call(apiContent.querySelectorAll('h3'))
15-
apiTitles.forEach(function (titleNode) {
15+
apiTitles.forEach(function(titleNode) {
1616
var ulNode = titleNode.parentNode.nextSibling
1717
if (ulNode.tagName !== 'UL') {
1818
ulNode = ulNode.nextSibling
@@ -31,15 +31,17 @@
3131
}
3232
}
3333

34-
function initLocationHashFuzzyMatching () {
34+
function initLocationHashFuzzyMatching() {
3535
var hash = window.location.hash
3636
if (!hash) return
3737
var hashTarget = document.getElementById(hash)
3838
if (!hashTarget) {
3939
var normalizedHash = normalizeHash(hash)
4040
var possibleHashes = [].slice.call(document.querySelectorAll('[id]'))
41-
.map(function (el) { return el.id })
42-
possibleHashes.sort(function (hashA, hashB) {
41+
.map(function(el) {
42+
return el.id
43+
})
44+
possibleHashes.sort(function(hashA, hashB) {
4345
var distanceA = levenshteinDistance(normalizedHash, normalizeHash(hashA))
4446
var distanceB = levenshteinDistance(normalizedHash, normalizeHash(hashB))
4547
if (distanceA < distanceB) return -1
@@ -49,22 +51,22 @@
4951
window.location.hash = possibleHashes[0]
5052
}
5153

52-
function normalizeHash (rawHash) {
54+
function normalizeHash(rawHash) {
5355
return rawHash
5456
.toLowerCase()
5557
.replace(/\-(?:deprecated|removed|replaced|changed|obsolete)$/, '')
5658
}
5759

58-
function levenshteinDistance (a, b) {
60+
function levenshteinDistance(a, b) {
5961
var m = []
6062
if (!(a && b)) return (b || a).length
6163
for (let i = 0; i <= b.length; m[i] = [i++]) {}
6264
for (let j = 0; j <= a.length; m[0][j] = j++) {}
6365
for (let i = 1; i <= b.length; i++) {
6466
for (let j = 1; j <= a.length; j++) {
65-
m[i][j] = b.charAt(i - 1) === a.charAt(j - 1)
66-
? m[i - 1][j - 1]
67-
: m[i][j] = Math.min(
67+
m[i][j] = b.charAt(i - 1) === a.charAt(j - 1) ?
68+
m[i - 1][j - 1] :
69+
m[i][j] = Math.min(
6870
m[i - 1][j - 1] + 1,
6971
Math.min(m[i][j - 1] + 1, m[i - 1][j] + 1))
7072
}
@@ -77,16 +79,16 @@
7779
* Mobile burger menu button for toggling sidebar
7880
*/
7981

80-
function initMobileMenu () {
82+
function initMobileMenu() {
8183
var mobileBar = document.getElementById('mobile-bar')
8284
var sidebar = document.querySelector('.sidebar')
8385
var menuButton = mobileBar.querySelector('.menu-button')
8486

85-
menuButton.addEventListener('click', function () {
87+
menuButton.addEventListener('click', function() {
8688
sidebar.classList.toggle('open')
8789
})
8890

89-
document.body.addEventListener('click', function (e) {
91+
document.body.addEventListener('click', function(e) {
9092
if (e.target !== menuButton && !sidebar.contains(e.target)) {
9193
sidebar.classList.remove('open')
9294
}
@@ -97,9 +99,9 @@
9799
* Doc version select
98100
*/
99101

100-
function initVersionSelect () {
102+
function initVersionSelect() {
101103
// version select
102-
document.querySelector('.version-select').addEventListener('change', function (e) {
104+
document.querySelector('.version-select').addEventListener('change', function(e) {
103105
var version = e.target.value
104106
var section = window.location.pathname.match(/\/v\d\/(\w+?)\//)[1]
105107
if (version === 'SELF') return
@@ -116,7 +118,7 @@
116118
* Sub headers in sidebar
117119
*/
118120

119-
function initSubHeaders () {
121+
function initSubHeaders() {
120122
var each = [].forEach
121123
var main = document.getElementById('main')
122124
var header = document.getElementById('header')
@@ -138,7 +140,7 @@
138140
}
139141
var headers = content.querySelectorAll('h2')
140142
if (headers.length) {
141-
each.call(headers, function (h) {
143+
each.call(headers, function(h) {
142144
sectionContainer.appendChild(makeLink(h))
143145
var h3s = collectH3s(h)
144146
allHeaders.push(h)
@@ -149,20 +151,20 @@
149151
})
150152
} else {
151153
headers = content.querySelectorAll('h3')
152-
each.call(headers, function (h) {
154+
each.call(headers, function(h) {
153155
sectionContainer.appendChild(makeLink(h))
154156
allHeaders.push(h)
155157
})
156158
}
157159

158160
var animating = false
159-
sectionContainer.addEventListener('click', function (e) {
161+
sectionContainer.addEventListener('click', function(e) {
160162
e.preventDefault()
161163
if (e.target.classList.contains('section-link')) {
162164
sidebar.classList.remove('open')
163165
setActive(e.target)
164166
animating = true
165-
setTimeout(function () {
167+
setTimeout(function() {
166168
animating = false
167169
}, 400)
168170
}
@@ -178,18 +180,18 @@
178180
}
179181

180182
var hoveredOverSidebar = false
181-
sidebar.addEventListener('mouseover', function () {
183+
sidebar.addEventListener('mouseover', function() {
182184
hoveredOverSidebar = true
183185
})
184-
sidebar.addEventListener('mouseleave', function () {
186+
sidebar.addEventListener('mouseleave', function() {
185187
hoveredOverSidebar = false
186188
})
187189

188190
// listen for scroll event to do positioning & highlights
189191
window.addEventListener('scroll', updateSidebar)
190192
window.addEventListener('resize', updateSidebar)
191193

192-
function updateSidebar () {
194+
function updateSidebar() {
193195
var doc = document.documentElement
194196
var top = doc && doc.scrollTop || document.body.scrollTop
195197
if (animating || !allHeaders) return
@@ -204,20 +206,20 @@
204206
}
205207
}
206208
if (last)
207-
setActive(last.id, !hoveredOverSidebar)
209+
setActive(last.id, !hoveredOverSidebar)
208210
}
209211

210-
function makeLink (h) {
212+
function makeLink(h) {
211213
var link = document.createElement('li')
212214
var text = h.textContent.replace(/\(.*\)$/, '')
213215
link.innerHTML =
214216
'<a class="section-link" data-scroll href="#' + h.id + '">' +
215-
text +
217+
text +
216218
'</a>'
217219
return link
218220
}
219221

220-
function collectH3s (h) {
222+
function collectH3s(h) {
221223
var h3s = []
222224
var next = h.nextSibling
223225
while (next && next.tagName !== 'H2') {
@@ -229,52 +231,52 @@
229231
return h3s
230232
}
231233

232-
function makeSubLinks (h3s, small) {
234+
function makeSubLinks(h3s, small) {
233235
var container = document.createElement('ul')
234236
if (small) {
235237
container.className = 'menu-sub'
236238
}
237-
h3s.forEach(function (h) {
239+
h3s.forEach(function(h) {
238240
container.appendChild(makeLink(h))
239241
})
240242
return container
241243
}
242244

243-
function setActive (id, shouldScrollIntoView) {
245+
function setActive(id, shouldScrollIntoView) {
244246
var previousActive = sidebar.querySelector('.section-link.active')
245-
var currentActive = typeof id === 'string'
246-
? sidebar.querySelector('.section-link[href="#' + id + '"]')
247-
: id
247+
var currentActive = typeof id === 'string' ?
248+
sidebar.querySelector('.section-link[href="#' + id + '"]') :
249+
id
248250
if (currentActive !== previousActive) {
249251
if (previousActive) previousActive.classList.remove('active')
250252
currentActive.classList.add('active')
251253
if (shouldScrollIntoView) {
252-
var currentPageOffset = currentPageAnchor
253-
? currentPageAnchor.offsetTop - 8
254-
: 0
254+
var currentPageOffset = currentPageAnchor ?
255+
currentPageAnchor.offsetTop - 8 :
256+
0
255257
var currentActiveOffset = currentActive.offsetTop + currentActive.parentNode.clientHeight
256258
var sidebarHeight = sidebar.clientHeight
257259
var currentActiveIsInView = (
258260
currentActive.offsetTop >= sidebar.scrollTop &&
259261
currentActiveOffset <= sidebar.scrollTop + sidebarHeight
260262
)
261263
var linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight
262-
var newScrollTop = currentActiveIsInView
263-
? sidebar.scrollTop
264-
: linkNotFurtherThanSidebarHeight
265-
? currentPageOffset
266-
: currentActiveOffset - sidebarHeight
264+
var newScrollTop = currentActiveIsInView ?
265+
sidebar.scrollTop :
266+
linkNotFurtherThanSidebarHeight ?
267+
currentPageOffset :
268+
currentActiveOffset - sidebarHeight
267269
sidebar.scrollTop = newScrollTop
268270
}
269271
}
270272
}
271273

272-
function makeHeaderClickable (link) {
274+
function makeHeaderClickable(link) {
273275
var wrapper = document.createElement('a')
274276
wrapper.href = '#' + link.id
275277
wrapper.setAttribute('data-scroll', '')
276278
link.parentNode.insertBefore(wrapper, link)
277279
wrapper.appendChild(link)
278280
}
279281
}
280-
})()
282+
})()

0 commit comments

Comments
 (0)