From dde03f3fea3e8c669ec3c385e130ad678b17b031 Mon Sep 17 00:00:00 2001 From: vue-bot Date: Tue, 4 Jan 2022 02:20:44 +0100 Subject: [PATCH 01/66] chore: update sponsors (#2927) --- themes/vue/_config.yml | 7 +-- .../images/fen_tre_online_solutions.svg | 54 +++++++++++++++++++ 2 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 themes/vue/source/images/fen_tre_online_solutions.svg diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml index 5d27b83ffa..d2f0889d0c 100644 --- a/themes/vue/_config.yml +++ b/themes/vue/_config.yml @@ -17,7 +17,8 @@ platinum_sponsors_china: https://www.authing.cn/welcome?utm_source=Vuejs&utm_medium=CPT&utm_campaign=EN&utm_term=page-EN img: authing.svg - name: qingfuwu - url: https://qingfuwu.cn?utm_campaign=TR_eSJH7nqW&utm_content=&utm_medium=Web&utm_source=CH_53OxwryD&utm_term= + url: >- + https://qingfuwu.cn?utm_campaign=TR_eSJH7nqW&utm_content=&utm_medium=Web&utm_source=CH_53OxwryD&utm_term= img: qingfuwu-v2.svg platinum_sponsors: - url: >- @@ -170,8 +171,8 @@ gold_sponsors: https://flowdash.com/?utm_source=vue&utm_medium=sponsor&utm_campaign=open-source img: flowdash.png name: Flowdash - - url: 'https://www.fenetre.nl/english/' - img: fen_tre_online_solutions.png + - url: 'https://www.fenetre.nl/' + img: fen_tre_online_solutions.svg name: Fenêtre Online Solutions - url: 'https://finclip.com/?from=vue' img: finclip.png diff --git a/themes/vue/source/images/fen_tre_online_solutions.svg b/themes/vue/source/images/fen_tre_online_solutions.svg new file mode 100644 index 0000000000..3ae3849408 --- /dev/null +++ b/themes/vue/source/images/fen_tre_online_solutions.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 2a5a7f211de998bdd8cc97e9b40ab7f443b1ae34 Mon Sep 17 00:00:00 2001 From: Pierre Schweiger Date: Fri, 7 Jan 2022 19:42:01 +0700 Subject: [PATCH 02/66] Remove VueMastery promotion banner (#2924) --- src/images/background-bubbles-vuemastery.svg | 109 ------- src/images/background-vuemastery.svg | 34 --- src/images/lock-vuemastery.svg | 230 -------------- src/images/logo-vuemastery.svg | 22 -- src/images/unlock-vuemastery.svg | 283 ------------------ themes/vue/layout/layout.ejs | 1 - .../vue/layout/partials/vuemastery_banner.ejs | 100 ------- themes/vue/source/css/_vuemastery-banner.styl | 248 --------------- themes/vue/source/css/index.styl | 1 - themes/vue/source/css/page.styl | 1 - 10 files changed, 1029 deletions(-) delete mode 100644 src/images/background-bubbles-vuemastery.svg delete mode 100644 src/images/background-vuemastery.svg delete mode 100644 src/images/lock-vuemastery.svg delete mode 100644 src/images/logo-vuemastery.svg delete mode 100644 src/images/unlock-vuemastery.svg delete mode 100644 themes/vue/layout/partials/vuemastery_banner.ejs delete mode 100644 themes/vue/source/css/_vuemastery-banner.styl diff --git a/src/images/background-bubbles-vuemastery.svg b/src/images/background-bubbles-vuemastery.svg deleted file mode 100644 index 8f5ec7e888..0000000000 --- a/src/images/background-bubbles-vuemastery.svg +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/background-vuemastery.svg b/src/images/background-vuemastery.svg deleted file mode 100644 index fdb8488e2c..0000000000 --- a/src/images/background-vuemastery.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/lock-vuemastery.svg b/src/images/lock-vuemastery.svg deleted file mode 100644 index c9583a1a0b..0000000000 --- a/src/images/lock-vuemastery.svg +++ /dev/null @@ -1,230 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/logo-vuemastery.svg b/src/images/logo-vuemastery.svg deleted file mode 100644 index b4ce163d48..0000000000 --- a/src/images/logo-vuemastery.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/unlock-vuemastery.svg b/src/images/unlock-vuemastery.svg deleted file mode 100644 index 917b2bd2ae..0000000000 --- a/src/images/unlock-vuemastery.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs index 1a8a2590f6..677857d068 100644 --- a/themes/vue/layout/layout.ejs +++ b/themes/vue/layout/layout.ejs @@ -90,7 +90,6 @@ - <%- partial('partials/vuemastery_banner.ejs') %>
> diff --git a/themes/vue/layout/partials/vuemastery_banner.ejs b/themes/vue/layout/partials/vuemastery_banner.ejs deleted file mode 100644 index e24ff362df..0000000000 --- a/themes/vue/layout/partials/vuemastery_banner.ejs +++ /dev/null @@ -1,100 +0,0 @@ - - - diff --git a/themes/vue/source/css/_vuemastery-banner.styl b/themes/vue/source/css/_vuemastery-banner.styl deleted file mode 100644 index f12fbf6d6a..0000000000 --- a/themes/vue/source/css/_vuemastery-banner.styl +++ /dev/null @@ -1,248 +0,0 @@ -.vuemastery-banner - display none - background: url(https://github.com/images/background-vuemastery.svg) center center no-repeat - background-size 100% auto - overflow hidden - position relative - transition all .3s ease-out .1s - - &:before - content '' - background: url(https://github.com/images/background-bubbles-vuemastery.svg) left center no-repeat - background-size cover - position absolute - top 0 - bottom 0 - left 0 - right 0 - transition all .3s ease-out .1s - transform: scale(1.1) - - &:after - content: '' - background: url(https://github.com/images/lock-vuemastery.svg) right center no-repeat - background-size: auto 100% - position: absolute - width: 100% - height: 100% - top: 0 - left: 0 - pointer-events: none - - &:hover - background-size 150% auto - - &:before - transform: scale(1) - - &:after - background-image url(https://github.com/images/unlock-vuemastery.svg) - - a - display flex - height 80px - justify-content center - -.vuemastery-banner--wrapper - display flex - height 100% - align-items center - width: 100% - justify-content: center - position relative - - &:before - content '' - pointer-events none - position absolute - top 0 - bottom 0 - left 0 - width 0 - transition width .3s ease-out - - &:hover - + .vuemastery-banner--close - &:before, - &:after - transform-origin 100% - - p - margin -3px 50px 0 20px - font-size 1rem - color #fff - position relative - transition-delay .15s - - span - font-size 1.17rem - font-weight 600 - display block - color #BEFF74 - background -webkit-linear-gradient(#41E281, #BEFF74) - -webkit-background-clip text - -webkit-text-fill-color transparent - -.vuemastery-banner--logo - height 102% - margin-top: -1px - margin-left -200px - position relative - z-index 2 - -.vuemastery-banner--close - position absolute - top 20px - right 25px - height 40px - width 40px - -webkit-tap-highlight-color transparent - border-radius 50% - cursor pointer - - &:before, - &:after - content '' - position absolute - top 19px - left 14px - width 25px - height 2px - background-color #fff - transform-origin 50% - transform rotate(-45deg) - transition all .2s ease-out - - &:after - transform rotate(45deg) - -.vuemastery-button - display: inline-flex; - background: linear-gradient(to top right,#3d2c61,#835ec2); - height: 38px; - margin: .5em 0; - line-height: 38px; - padding: 0 30px; - color: #fff; - text-decoration: none; - align-items: center; - justify-content: center; - outline: 0; - text-transform: uppercase; - border: none; - border-radius: 36px; - font-weight: bold; - font-size: 12px; - cursor: pointer; - position: relative - overflow hidden - - &:before, - &:after - background: linear-gradient(to top right,transparent,#fff); - content: ""; - height: 150px; - left: -175px; - opacity: .1; - position: absolute; - top: -50px; - transform: rotate(35deg); - width: 100px; - -.vuemastery-weekend-promo - #mobile-bar, - #mobile-bar.top - position relative - background-color #fff - - &.docs:not(.vuemastery-menu-fixed) - padding-top 0 - #header - position relative - width auto - - &.vuemastery-menu-fixed - #mobile-bar - position fixed - -@media screen and (min-width: 901px) - .vuemastery-weekend-promo - &.docs:not(.vuemastery-menu-fixed) - #main.fix-sidebar .sidebar - position absolute - top 141px - - #sidebar-sponsors-platinum-right - position absolute - top: 170px; - - &.vuemastery-menu-fixed.docs - .vuemastery-banner - margin-bottom 0 - -@media screen and (max-width: 1200px) - .vuemastery-banner - &, - &:hover - background-size cover - - &:before - transform: scale(1) - - &:hover:before - transform: scale(1) - -@media screen and (max-width: 1100px) - .vuemastery-button - display none - -@media screen and (max-width: 900px) - .vuemastery-weekend-promo - &.vuemastery-menu-fixed - .vuemastery-banner - margin-bottom 40px - - -@media screen and (max-width: 700px) - .vuemastery-banner - a - height 40px - overflow hidden - - .vuemastery-banner--logo - margin-left 0 - justify-content flex-start - - p, span - font-size .8rem - color #fff - - .vuemastery-banner--close - top 0px - right 0px - - &:before, - &:after - top 19px - left 14px - width 15px - height 2px - -@media screen and (max-width: 465px) - .vuemastery-banner - &:after - display: none - p - max-width 185px - - &:after - background-position right -3rem center -@media screen and (max-width 330px) - .vuemastery-banner p - font-size 0.6rem - margin -3px 28px 0 0px - max-width 140px - -@media print - .vuemastery-banner - display none \ No newline at end of file diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl index ecafc97067..5e081274cd 100644 --- a/themes/vue/source/css/index.styl +++ b/themes/vue/source/css/index.styl @@ -3,7 +3,6 @@ @import "https://github.com/_sidebar" @import "https://github.com/_sponsors-index" @import "https://github.com/_modal" -@import "https://github.com/_vuemastery-banner" @import "https://github.com/_themes" $width = 900px diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl index bd35b84ee3..90746a3d07 100644 --- a/themes/vue/source/css/page.styl +++ b/themes/vue/source/css/page.styl @@ -14,7 +14,6 @@ @import "https://github.com/_style-guide" @import "https://github.com/_modal" @import "https://github.com/_scrimba" -@import "https://github.com/_vuemastery-banner" @import "https://github.com/_vue-mastery" @import "https://github.com/_themes" From d94fe5e5b94b5681e2ffdd22a40e48fedfd6cca1 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 20 Jan 2022 17:05:19 +0800 Subject: [PATCH 03/66] chore: lock example cdn versions + update repo references --- README.md | 4 ++-- src/v2/cookbook/packaging-sfc-for-npm.md | 2 +- src/v2/examples/commits.md | 2 +- src/v2/examples/deepstream.md | 2 +- src/v2/examples/elastic-header.md | 2 +- src/v2/examples/firebase.md | 2 +- src/v2/examples/grid-component.md | 2 +- src/v2/examples/index.md | 2 +- src/v2/examples/modal.md | 2 +- src/v2/examples/select2.md | 2 +- src/v2/examples/svg.md | 2 +- src/v2/examples/todomvc.md | 2 +- src/v2/examples/tree-view.md | 2 +- .../vue-20-accessing-parent-component-instance/index.html | 2 +- .../vue-20-component-blog-post-example/index.html | 2 +- src/v2/examples/vue-20-dependency-injection/index.html | 2 +- .../vue-20-dynamic-components-with-binding/index.html | 2 +- src/v2/examples/vue-20-dynamic-components/index.html | 2 +- .../examples/vue-20-dynamic-state-transitions/index.html | 2 +- src/v2/examples/vue-20-elastic-header/index.html | 2 +- src/v2/examples/vue-20-firebase-validation/index.html | 2 +- src/v2/examples/vue-20-github-commits/index.html | 2 +- src/v2/examples/vue-20-grid-component/index.html | 2 +- src/v2/examples/vue-20-hello-world/index.html | 2 +- .../vue-20-keep-alive-with-dynamic-components/index.html | 4 ++-- src/v2/examples/vue-20-list-move-transitions/index.html | 2 +- src/v2/examples/vue-20-markdown-editor/index.html | 2 +- src/v2/examples/vue-20-modal-component/index.html | 2 +- .../vue-20-priority-d-rules-correct-example/index.html | 2 +- .../index.html | 4 ++-- .../vue-20-programmatic-event-listeners/index.html | 2 +- .../vue-20-realtime-with-deepstreamhub/index.html | 2 +- src/v2/examples/vue-20-svg-graph/index.html | 2 +- src/v2/examples/vue-20-template-compilation/index.html | 2 +- src/v2/examples/vue-20-todomvc/index.html | 2 +- src/v2/examples/vue-20-tree-view/index.html | 2 +- src/v2/examples/vue-20-two-way-currency-filter/index.html | 2 +- src/v2/examples/vue-20-wrapper-component/index.html | 2 +- src/v2/guide/comparison.md | 2 +- src/v2/guide/components-dynamic-async.md | 4 ++-- src/v2/guide/components-edge-cases.md | 6 +++--- src/v2/guide/components.md | 4 ++-- src/v2/guide/index.md | 2 +- src/v2/guide/join.md | 2 +- src/v2/guide/migration.md | 8 ++++---- src/v2/guide/render-function.md | 4 ++-- src/v2/guide/single-file-components.md | 2 +- src/v2/guide/state-management.md | 2 +- src/v2/guide/transitioning-state.md | 2 +- src/v2/guide/transitions.md | 2 +- src/v2/style-guide/index.md | 2 +- themes/vue/layout/page.ejs | 2 +- writing-guide.md | 2 +- 53 files changed, 64 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 69395ba4f9..18b92c3dcf 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This site is built with [hexo](http://hexo.io/). Site content is written in Mark ## Writing -See the [Vue Docs Writing Guide](https://github.com/vuejs/vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation. +See the [Vue Docs Writing Guide](https://github.com/vuejs/v2.vuejs.rg/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation. ## Developing @@ -122,7 +122,7 @@ Bahasa Indonesia translation is maintained by [Vue.js Indonesia](https://github. ### Want to help with the translation? -If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/vuejs.org/issues/2015) issue page to inform others that you're doing the translation and go for it. +If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/v2.vuejs.rg/issues/2015) issue page to inform others that you're doing the translation and go for it. If you are more of a team player, Translation Gang might be for you. Let us know somehow that you're ready to join this international open-source translators community. Feel free to contact [Grigoriy Beziuk](https://gbezyuk.github.io) or anybody else from [the team](https://github.com/orgs/translation-gang/people). diff --git a/src/v2/cookbook/packaging-sfc-for-npm.md b/src/v2/cookbook/packaging-sfc-for-npm.md index 8c26b1c1f6..4c41517486 100644 --- a/src/v2/cookbook/packaging-sfc-for-npm.md +++ b/src/v2/cookbook/packaging-sfc-for-npm.md @@ -24,7 +24,7 @@ export default { Or even used via ` + ... diff --git a/src/v2/examples/commits.md b/src/v2/examples/commits.md index 5e8605de0d..444fd774a5 100644 --- a/src/v2/examples/commits.md +++ b/src/v2/examples/commits.md @@ -6,4 +6,4 @@ order: 1 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches. - + diff --git a/src/v2/examples/deepstream.md b/src/v2/examples/deepstream.md index c3e159cfc8..87c124737f 100644 --- a/src/v2/examples/deepstream.md +++ b/src/v2/examples/deepstream.md @@ -6,4 +6,4 @@ order: 9 > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows). - + diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md index 4fc65add3b..e22aa30678 100644 --- a/src/v2/examples/elastic-header.md +++ b/src/v2/examples/elastic-header.md @@ -4,4 +4,4 @@ type: examples order: 7 --- - + diff --git a/src/v2/examples/firebase.md b/src/v2/examples/firebase.md index f600658b4c..0972776144 100644 --- a/src/v2/examples/firebase.md +++ b/src/v2/examples/firebase.md @@ -6,4 +6,4 @@ order: 10 > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items. - + diff --git a/src/v2/examples/grid-component.md b/src/v2/examples/grid-component.md index dd4330f6e1..f71aea2a3c 100644 --- a/src/v2/examples/grid-component.md +++ b/src/v2/examples/grid-component.md @@ -6,4 +6,4 @@ order: 3 > This is an example of creating a reusable grid component and using it with external data. - + diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 9ffe5ea9a7..1881c83e4e 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > Dead simple Markdown editor. - + diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md index 3962c3c68f..f67141d670 100644 --- a/src/v2/examples/modal.md +++ b/src/v2/examples/modal.md @@ -6,4 +6,4 @@ order: 6 > Features used: component, prop passing, content insertion, transitions. - + diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md index 0cc78de91b..18ac08badf 100644 --- a/src/v2/examples/select2.md +++ b/src/v2/examples/select2.md @@ -6,4 +6,4 @@ order: 8 > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. - + diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md index f2253021a4..9c52cc1d2d 100644 --- a/src/v2/examples/svg.md +++ b/src/v2/examples/svg.md @@ -6,4 +6,4 @@ order: 5 > This example showcases a combination of custom component, computed property, two-way binding and SVG support. - + diff --git a/src/v2/examples/todomvc.md b/src/v2/examples/todomvc.md index 426ee15235..c79c1136fa 100644 --- a/src/v2/examples/todomvc.md +++ b/src/v2/examples/todomvc.md @@ -8,4 +8,4 @@ order: 11

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.

- + diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md index 14246aefa8..48d0de116b 100644 --- a/src/v2/examples/tree-view.md +++ b/src/v2/examples/tree-view.md @@ -6,4 +6,4 @@ order: 4 > Example of a simple tree view implementation showcasing recursive usage of components. - + diff --git a/src/v2/examples/vue-20-accessing-parent-component-instance/index.html b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html index b446ec77fb..44606424db 100644 --- a/src/v2/examples/vue-20-accessing-parent-component-instance/index.html +++ b/src/v2/examples/vue-20-accessing-parent-component-instance/index.html @@ -3,7 +3,7 @@ Dependency Injection Google Maps Demo - + {% endraw %} -See [this example](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo. +See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo. ## Organizing Transitions into Components diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index a693cfb8db..f292236ea7 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -1245,7 +1245,7 @@ new Vue({

One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.

-These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions): +These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-list-move-transitions): {% raw %}
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index 7c9b61424e..21cf591913 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -1755,7 +1755,7 @@ computed: { **It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `
` elements).** -By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same. +By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same. {% raw %}
{% endraw %} #### Bad diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs index 31c280fa43..78e0a6a20e 100644 --- a/themes/vue/layout/page.ejs +++ b/themes/vue/layout/page.ejs @@ -52,7 +52,7 @@ <%- partial('partials/ad-text') %> <%_ } _%> Caught a mistake or want to contribute to the documentation? - + Edit this on GitHub! Deployed on diff --git a/writing-guide.md b/writing-guide.md index 233f713ad7..072c4503a2 100644 --- a/writing-guide.md +++ b/writing-guide.md @@ -57,7 +57,7 @@ Writing documentation is an exercise in empathy. We're not describing an objecti - **Avoid abbreviations** in writing and code examples (e.g. `attribute` is better than `attr`, `message` is better than `msg`), unless you are specifically referencing an abbreviation in an API (e.g. `$attrs`). Abbreviation symbols included on standard keyboards (e.g. `@`, `#`, `&`) are OK. - **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`). -- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). ![Why the Oxford comma is important](https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/images/oxford-comma.jpg) +- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). ![Why the Oxford comma is important](https://raw.githubusercontent.com/vuejs/v2.vuejs.rg/master/src/images/oxford-comma.jpg) - **When referencing the name of a project, prioritize the broader conventions of English over internal branding conventions of that project.** For example, "webpack" and "npm" both disregard conventions such as "always start a word at the beginning of a sentence with a capital letter", "project names always use Title Case", and "acronyms are always capitalized". Instead, always write "Webpack and NPM" to provide a more consistent experience in the docs and avoid sentences like "If you don't want to use Vue CLI, you can use webpack or Rollup directly by installing them via npm or Yarn". - **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about". - **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emoji even convey different meanings in different cultures. From 0e31221f9e3b2d4375f46b70cb5600d31a36d048 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 20 Jan 2022 17:10:27 +0800 Subject: [PATCH 04/66] fix repo link --- README.md | 4 ++-- src/v2/examples/commits.md | 2 +- src/v2/examples/deepstream.md | 2 +- src/v2/examples/elastic-header.md | 2 +- src/v2/examples/firebase.md | 2 +- src/v2/examples/grid-component.md | 2 +- src/v2/examples/index.md | 2 +- src/v2/examples/modal.md | 2 +- src/v2/examples/select2.md | 2 +- src/v2/examples/svg.md | 2 +- src/v2/examples/todomvc.md | 2 +- src/v2/examples/tree-view.md | 2 +- .../index.html | 2 +- src/v2/guide/comparison.md | 2 +- src/v2/guide/components-dynamic-async.md | 4 ++-- src/v2/guide/components-edge-cases.md | 6 +++--- src/v2/guide/components.md | 4 ++-- src/v2/guide/index.md | 2 +- src/v2/guide/join.md | 2 +- src/v2/guide/migration.md | 8 ++++---- src/v2/guide/render-function.md | 2 +- src/v2/guide/single-file-components.md | 2 +- src/v2/guide/state-management.md | 2 +- src/v2/guide/transitioning-state.md | 2 +- src/v2/guide/transitions.md | 2 +- src/v2/style-guide/index.md | 2 +- themes/vue/layout/page.ejs | 2 +- writing-guide.md | 2 +- 28 files changed, 36 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 18b92c3dcf..4830ce064d 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This site is built with [hexo](http://hexo.io/). Site content is written in Mark ## Writing -See the [Vue Docs Writing Guide](https://github.com/vuejs/v2.vuejs.rg/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation. +See the [Vue Docs Writing Guide](https://github.com/vuejs/v2.vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation. ## Developing @@ -122,7 +122,7 @@ Bahasa Indonesia translation is maintained by [Vue.js Indonesia](https://github. ### Want to help with the translation? -If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/v2.vuejs.rg/issues/2015) issue page to inform others that you're doing the translation and go for it. +If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/v2.vuejs.org/issues/2015) issue page to inform others that you're doing the translation and go for it. If you are more of a team player, Translation Gang might be for you. Let us know somehow that you're ready to join this international open-source translators community. Feel free to contact [Grigoriy Beziuk](https://gbezyuk.github.io) or anybody else from [the team](https://github.com/orgs/translation-gang/people). diff --git a/src/v2/examples/commits.md b/src/v2/examples/commits.md index 444fd774a5..7acb346822 100644 --- a/src/v2/examples/commits.md +++ b/src/v2/examples/commits.md @@ -6,4 +6,4 @@ order: 1 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches. - + diff --git a/src/v2/examples/deepstream.md b/src/v2/examples/deepstream.md index 87c124737f..acae9a0be8 100644 --- a/src/v2/examples/deepstream.md +++ b/src/v2/examples/deepstream.md @@ -6,4 +6,4 @@ order: 9 > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows). - + diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md index e22aa30678..0c16def661 100644 --- a/src/v2/examples/elastic-header.md +++ b/src/v2/examples/elastic-header.md @@ -4,4 +4,4 @@ type: examples order: 7 --- - + diff --git a/src/v2/examples/firebase.md b/src/v2/examples/firebase.md index 0972776144..944602ac1e 100644 --- a/src/v2/examples/firebase.md +++ b/src/v2/examples/firebase.md @@ -6,4 +6,4 @@ order: 10 > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items. - + diff --git a/src/v2/examples/grid-component.md b/src/v2/examples/grid-component.md index f71aea2a3c..5d2825af8a 100644 --- a/src/v2/examples/grid-component.md +++ b/src/v2/examples/grid-component.md @@ -6,4 +6,4 @@ order: 3 > This is an example of creating a reusable grid component and using it with external data. - + diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 1881c83e4e..374ac9f384 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > Dead simple Markdown editor. - + diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md index f67141d670..76ab7debd4 100644 --- a/src/v2/examples/modal.md +++ b/src/v2/examples/modal.md @@ -6,4 +6,4 @@ order: 6 > Features used: component, prop passing, content insertion, transitions. - + diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md index 18ac08badf..ca2d885c61 100644 --- a/src/v2/examples/select2.md +++ b/src/v2/examples/select2.md @@ -6,4 +6,4 @@ order: 8 > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. - + diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md index 9c52cc1d2d..f153b9db52 100644 --- a/src/v2/examples/svg.md +++ b/src/v2/examples/svg.md @@ -6,4 +6,4 @@ order: 5 > This example showcases a combination of custom component, computed property, two-way binding and SVG support. - + diff --git a/src/v2/examples/todomvc.md b/src/v2/examples/todomvc.md index c79c1136fa..362cf841c1 100644 --- a/src/v2/examples/todomvc.md +++ b/src/v2/examples/todomvc.md @@ -8,4 +8,4 @@ order: 11

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.

- + diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md index 48d0de116b..4922224947 100644 --- a/src/v2/examples/tree-view.md +++ b/src/v2/examples/tree-view.md @@ -6,4 +6,4 @@ order: 4 > Example of a simple tree view implementation showcasing recursive usage of components. - + diff --git a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html index eb44f9ae94..81951e7667 100644 --- a/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html +++ b/src/v2/examples/vue-20-priority-d-rules-unintended-consequences/index.html @@ -34,7 +34,7 @@ is never applied because Vue is reusing the same element for render efficiency. To force Vue to treat these as separate elements, a unique key must be added diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md index 7ee598687f..c4b87ffd4d 100644 --- a/src/v2/guide/comparison.md +++ b/src/v2/guide/comparison.md @@ -8,7 +8,7 @@ This is definitely the most difficult page in the guide to write, but we do feel We also try very hard to avoid bias. As the core team, we obviously like Vue a lot. There are some problems we think it solves better than anything else out there. If we didn't believe that, we wouldn't be working on it. We do want to be fair and accurate though. Where other libraries offer significant advantages, such as React's vast ecosystem of alternative renderers or Knockout's browser support back to IE6, we try to list these as well. -We'd also like **your** help keeping this document up-to-date because the JavaScript world moves fast! If you notice an inaccuracy or something that doesn't seem quite right, please let us know by [opening an issue](https://github.com/vuejs/v2.vuejs.rg/issues/new?title=Inaccuracy+in+comparisons+guide). +We'd also like **your** help keeping this document up-to-date because the JavaScript world moves fast! If you notice an inaccuracy or something that doesn't seem quite right, please let us know by [opening an issue](https://github.com/vuejs/v2.vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide). ## React diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md index 18a7e37613..2580963778 100644 --- a/src/v2/guide/components-dynamic-async.md +++ b/src/v2/guide/components-dynamic-async.md @@ -194,7 +194,7 @@ new Vue({ {% endraw %} -Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components) for the complete code. +Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components) for the complete code.

Note that `` requires the components being switched between to all have names, either using the `name` option on a component, or through local/global registration.

@@ -249,7 +249,7 @@ new Vue({ }) ``` -

If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/v2.vuejs.rg/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.

+

If you're a Browserify user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/v2.vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.

### Handling Loading State diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md index 059754f0e7..71b359edc4 100644 --- a/src/v2/guide/components-edge-cases.md +++ b/src/v2/guide/components-edge-cases.md @@ -63,7 +63,7 @@ There are cases however, particularly shared component libraries, when this _mig ``` -The `` component might define a `map` property that all subcomponents need access to. In this case `` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance). +The `` component might define a `map` property that all subcomponents need access to. In this case `` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance). Keep in mind, however, that components built with this pattern are still inherently fragile. For example, imagine we add a new `` component and when `` appears within that, it should only render markers that fall within that region: @@ -154,7 +154,7 @@ Then in any descendants, we can use the `inject` option to receive specific prop inject: ['getMap'] ``` -You can see the [full example here](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-dependency-injection). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of ``. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`. +You can see the [full example here](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of ``. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`. In fact, you can think of dependency injection as sort of "long-range props", except: @@ -233,7 +233,7 @@ methods: { } ``` -See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `` component. +See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `` component. To learn more about programmatic listeners, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events). diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md index 755a7d68d8..4598b7eb1e 100644 --- a/src/v2/guide/components.md +++ b/src/v2/guide/components.md @@ -203,7 +203,7 @@ Then want to render a component for each one: > ``` -Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time, like when [fetching posts from an API](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-component-blog-post-example). +Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time, like when [fetching posts from an API](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example). That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](components-props.html). @@ -601,7 +601,7 @@ In the example above, `currentTabComponent` can contain either: - the name of a registered component, or - a component's options object -See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-dynamic-components) to experiment with the full code, or [this version](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding) for an example binding to a component's options object, instead of its registered name. +See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components) to experiment with the full code, or [this version](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components-with-binding) for an example binding to a component's options object, instead of its registered name. Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/#v-bind). diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 48dc2861b8..047220f0e1 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -20,7 +20,7 @@ If you are an experienced frontend developer and want to know how Vue compares t

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

-The easiest way to try out Vue.js is using the [Hello World example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-hello-world). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with: +The easiest way to try out Vue.js is using the [Hello World example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-hello-world). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with: ``` html diff --git a/src/v2/guide/join.md b/src/v2/guide/join.md index ab461b2635..c87118f707 100644 --- a/src/v2/guide/join.md +++ b/src/v2/guide/join.md @@ -53,7 +53,7 @@ Vue has already spread across the globe, with even the core team in at least hal I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there? -If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/v2.vuejs.rg/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. +If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/v2.vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. ### Become a Community Leader diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index 3cf1653c93..7ee8e95046 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1089,17 +1089,17 @@ Some users have enjoyed using two-way filters with `v-model` to create interesti As an example, we'll now walk the migration of a two-way currency filter: - + It mostly works well, but the delayed state updates can cause strange behavior. For example, try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component: - + This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external [`currencyValidator` object](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e): - + This increased modularity not only makes it easier to migrate to Vue 2, but also allows currency parsing and formatting to be: @@ -1110,7 +1110,7 @@ Having this validator extracted out, we've also more comfortably built it up int We're still limited however, by filters and by Vue 1.0 in general, so let's complete the upgrade to Vue 2.0: - + You may notice that: diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index f107e402f3..770bb2833a 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -642,4 +642,4 @@ For this component, `children` will give you both paragraphs, `slots().default` You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string: - + diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index ed7554cc56..02d0a4a5aa 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -21,7 +21,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m Here's an example of a file we'll call `Hello.vue`: -Single-file component example (click for code as text) +Single-file component example (click for code as text) Now we get: diff --git a/src/v2/guide/state-management.md b/src/v2/guide/state-management.md index 7a9e552855..102b14be99 100644 --- a/src/v2/guide/state-management.md +++ b/src/v2/guide/state-management.md @@ -6,7 +6,7 @@ order: 502 ## Official Flux-Like Implementation -Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/v2.vuejs.rg/master/src/images/devtools-timetravel.gif). +Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex): our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/v2.vuejs.org/master/src/images/devtools-timetravel.gif).
Watch a video explanation on Vue Mastery
diff --git a/src/v2/guide/transitioning-state.md b/src/v2/guide/transitioning-state.md index d8d6a02a3b..dd0bf5a50b 100644 --- a/src/v2/guide/transitioning-state.md +++ b/src/v2/guide/transitioning-state.md @@ -366,7 +366,7 @@ function generatePoints (stats) { {% endraw %} -See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo. +See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-state-transitions) for the complete code behind the above demo. ## Organizing Transitions into Components diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index f292236ea7..39a623ac72 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -1245,7 +1245,7 @@ new Vue({

One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.

-These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-list-move-transitions): +These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions): {% raw %}
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index 21cf591913..40caa799f0 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -1755,7 +1755,7 @@ computed: { **It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `
` elements).** -By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/v2.vuejs.rg/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same. +By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended consequences](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-priority-d-rules-unintended-consequences) if these elements should not actually be considered the same. {% raw %}
{% endraw %} #### Bad diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs index 78e0a6a20e..8714ae7a76 100644 --- a/themes/vue/layout/page.ejs +++ b/themes/vue/layout/page.ejs @@ -52,7 +52,7 @@ <%- partial('partials/ad-text') %> <%_ } _%> Caught a mistake or want to contribute to the documentation? - + Edit this on GitHub! Deployed on diff --git a/writing-guide.md b/writing-guide.md index 072c4503a2..f74b2d7ea0 100644 --- a/writing-guide.md +++ b/writing-guide.md @@ -57,7 +57,7 @@ Writing documentation is an exercise in empathy. We're not describing an objecti - **Avoid abbreviations** in writing and code examples (e.g. `attribute` is better than `attr`, `message` is better than `msg`), unless you are specifically referencing an abbreviation in an API (e.g. `$attrs`). Abbreviation symbols included on standard keyboards (e.g. `@`, `#`, `&`) are OK. - **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`). -- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). ![Why the Oxford comma is important](https://raw.githubusercontent.com/vuejs/v2.vuejs.rg/master/src/images/oxford-comma.jpg) +- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). ![Why the Oxford comma is important](https://raw.githubusercontent.com/vuejs/v2.vuejs.org/master/src/images/oxford-comma.jpg) - **When referencing the name of a project, prioritize the broader conventions of English over internal branding conventions of that project.** For example, "webpack" and "npm" both disregard conventions such as "always start a word at the beginning of a sentence with a capital letter", "project names always use Title Case", and "acronyms are always capitalized". Instead, always write "Webpack and NPM" to provide a more consistent experience in the docs and avoid sentences like "If you don't want to use Vue CLI, you can use webpack or Rollup directly by installing them via npm or Yarn". - **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about". - **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emoji even convey different meanings in different cultures. From 3e07d13496485124227b842867ea482ccd993190 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 7 Feb 2022 12:33:09 +0800 Subject: [PATCH 05/66] local build --- pre-deploy.js | 2 +- src/v2/guide/installation.md | 14 +- themes/vue/_config.yml | 2 +- themes/vue/source/js/vue.js | 20441 ++++++++++++++++-------------- themes/vue/source/js/vue.min.js | 6 +- 5 files changed, 10766 insertions(+), 9699 deletions(-) diff --git a/pre-deploy.js b/pre-deploy.js index 36b523e766..6a9129a1c4 100644 --- a/pre-deploy.js +++ b/pre-deploy.js @@ -13,7 +13,7 @@ const installation = fs.readFileSync(installPath, 'utf-8') // get latest Vue version console.log(`Checking latest Vue version...`) const localVersion = themeconfig.match(/vue_version: (.*)/)[1] -const version = execSync('npm view vue version').toString().trim() +const version = execSync('npm view vue@legacy version').toString().trim() if (localVersion === version) { console.log(`Version is up-to-date.`) diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 9e5f8a6cf9..92e0ec118a 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -2,8 +2,8 @@ title: Installation type: guide order: 1 -vue_version: 2.5.16 -gz_size: "30.90" +vue_version: 2.6.14 +gz_size: "33.46" --- ### Compatibility Note @@ -41,20 +41,20 @@ Simply download and include with a script tag. `Vue` will be registered as a glo For prototyping or learning purposes, you can use the latest version with: ``` html - + ``` For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions: ``` html - + ``` If you are using native ES Modules, there is also an ES Modules compatible build: ``` html ``` @@ -84,7 +84,7 @@ Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly sca ## Explanation of Different Builds -In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@2/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them: +In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them: | | UMD | CommonJS | ES Module (for bundlers) | ES Module (for browsers) | | --- | --- | --- | --- | --- | @@ -101,7 +101,7 @@ In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@2 - **Runtime**: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler. -- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a ` From e03a3c36cfb264fd938bc2088e93951dbbb8b6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=90=8B=E5=85=94=20Tryto?= <35431381+huibizhang@users.noreply.github.com> Date: Tue, 8 Feb 2022 14:55:26 +0800 Subject: [PATCH 07/66] fix: url of v3.x document (#2929) * fix: url of v3.x document ## fix - change url of v3.x document by `vuejs.org` instead `v3.vuejs.org` * fix: url of v3.x document * fix: url of v3.x document --- themes/vue/layout/page.ejs | 2 +- themes/vue/layout/partials/header.ejs | 2 +- themes/vue/layout/partials/sidebar.ejs | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs index 8714ae7a76..f534887a71 100644 --- a/themes/vue/layout/page.ejs +++ b/themes/vue/layout/page.ejs @@ -10,7 +10,7 @@

You’re browsing the documentation for v2.x and earlier. - For v3.x, click here. + For v3.x, click here.

<% if (page.type) { %> diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs index cf5faa5754..9e3d3113e3 100644 --- a/themes/vue/layout/partials/header.ejs +++ b/themes/vue/layout/partials/header.ejs @@ -1,7 +1,7 @@
- Click here for v3.x documentation. + Click here for v3.x documentation.