diff --git a/src/v2/api/index.md b/src/v2/api/index.md
index f855cdbe40..9cbcb5ee89 100644
--- a/src/v2/api/index.md
+++ b/src/v2/api/index.md
@@ -2533,4 +2533,4 @@ Used to denote a `` element as a scoped slot, which is replaced by [`s
## Rendu côté serveur
-- Veuillez vous référer à la [documentation du package vue-server-renderer](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer).
+- Veuillez vous référer à la [documentation du package vue-server-renderer](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer).
\ No newline at end of file
diff --git a/src/v2/cookbook/avoiding-memory-leaks.md b/src/v2/cookbook/avoiding-memory-leaks.md
index cd4fc7a061..4020d2f924 100644
--- a/src/v2/cookbook/avoiding-memory-leaks.md
+++ b/src/v2/cookbook/avoiding-memory-leaks.md
@@ -41,7 +41,7 @@ new Vue({
methods: {
initializeChoices: function () {
let list = []
- // lets load up our select with many choices
+ // lets load up our select with many choices
// so it will use a lot of memory
for (let i = 0; i < 1000; i++) {
list.push({
@@ -123,7 +123,7 @@ new Vue({
## Details about the Value
-Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
+Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
Consider the types of devices your users may be using and what their normal flow will be. Could they use memory constrained laptops or mobile devices? Do your users typically do lots of in-application navigation? If either of these are true, then good memory management practices can help you avoid the worst case scenario of crashing a user’s browser. Even if neither of these are true, you can still potentially have degradation of performance over extended usage of your app if you are not careful.
diff --git a/src/v2/cookbook/client-side-storage.md b/src/v2/cookbook/client-side-storage.md
index 646edd808f..88eabca262 100644
--- a/src/v2/cookbook/client-side-storage.md
+++ b/src/v2/cookbook/client-side-storage.md
@@ -22,12 +22,14 @@ This example has one form field bound to a Vue value called `name`. Here's the J
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data: {
- name:''
+ name: ''
},
mounted() {
- if(localStorage.name) this.name = localStorage.name;
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
},
watch: {
name(newName) {
@@ -37,7 +39,7 @@ const app = new Vue({
});
```
-Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
+Focus on the `mounted` and `watch` parts. We use `mounted` to handle loading the value from localStorage. To handle writing the data base, we watch the `name` value and on change, immediately write it.
You can run this yourself here:
@@ -75,12 +77,16 @@ Now we've got two fields (again, bound to a Vue instance) but now there is the a
const app = new Vue({
el:'#app',
data: {
- name:'',
- age:0
+ name: '',
+ age: 0
},
mounted() {
- if(localStorage.name) this.name = localStorage.name;
- if(localStorage.age) this.age = localStorage.age;
+ if (localStorage.name) {
+ this.name = localStorage.name;
+ }
+ if (localStorage.age) {
+ this.age = localStorage.age;
+ }
},
methods: {
persist() {
@@ -106,15 +112,15 @@ As mentioned above, Local Storage only works with simple values. To store more c
Cats
- {{cat}}
+ {{ cat }}
-
+
-
+
-
+
```
@@ -122,14 +128,14 @@ This "app" consists of a simple list on top (with a button to remove a cat) and
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data: {
- cats:[],
- newCat:null
+ cats: [],
+ newCat: null
},
mounted() {
-
- if(localStorage.getItem('cats')) {
+
+ if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) {
@@ -140,13 +146,16 @@ const app = new Vue({
methods: {
addCat() {
// ensure they actually typed something
- if(!this.newCat) return;
+ if (!this.newCat) {
+ return;
+ }
+
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();
},
removeCat(x) {
- this.cats.splice(x,1);
+ this.cats.splice(x, 1);
this.saveCats();
},
saveCats() {
diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md
index 9eb6530e55..93539d561d 100644
--- a/src/v2/cookbook/debugging-in-vscode.md
+++ b/src/v2/cookbook/debugging-in-vscode.md
@@ -24,6 +24,16 @@ Go to `config/index.js` and find the `devtool` property. Update it to:
devtool: 'source-map',
```
+With Vue CLI 3 you need set `devtool` property inside `vue.config.js`:
+
+```js
+module.exports = {
+ configureWebpack: {
+ devtool: 'source-map'
+ }
+}
+```
+
### Launching the Application from VS Code
Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome** for the environment. Replace content of the generated launch.json with the following two configurations:
@@ -53,19 +63,19 @@ Click on the Debugging icon in the Activity Bar to bring up the Debug view, then
1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
-
+ 
2. Open your favorite terminal at the root folder and serve the app using Vue CLI:
-```
-npm start
-```
+ ```
+ npm start
+ ```
3. Go to the Debug view, select the **'vuejs: chrome'** configuration, then press F5 or click the green play button.
4. Your breakpoint should now be hit as the new instance of Chrome opens `http://localhost:8080`.
-
+ 
## Alternative Patterns
diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md
new file mode 100644
index 0000000000..8f44dcf28e
--- /dev/null
+++ b/src/v2/cookbook/dockerize-vuejs-app.md
@@ -0,0 +1,134 @@
+---
+title: Dockerize Vue.js App (EN)
+type: cookbook
+order: 13
+---
+
+## Simple Example
+
+
So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container.
+
+Let's start by creating a `Dockerfile` in the root folder of our project:
+
+```docker
+FROM node:9.11.1-alpine
+
+# install simple http server for serving static content
+RUN npm install -g http-server
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+
+# install project dependencies
+RUN npm install
+
+# copy project files and folders to the current working directory (i.e. 'app' folder)
+COPY . .
+
+# build app for production with minification
+RUN npm run build
+
+EXPOSE 8080
+CMD [ "http-server", "dist" ]
+```
+
+It may seem reduntant to first copy `package.json` and `package-lock.json` and then all project files and folders in two separate steps but there is actually [a very good reason for that](http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/) (spoiler: it allows us to take advantage of cached Docker layers).
+
+Now let's build the Docker image of our Vue.js app:
+
+```bash
+docker build -t vuejs-cookbook/dockerize-vuejs-app .
+```
+
+Finally, let's run our Vue.js app in a Docker container:
+
+```bash
+docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app
+```
+
+We should be able to access our Vue.js app on `localhost:8080`.
+
+## Real-World Example
+
+In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app which is perfectly ok for quick prototyping and _may_ even be ok for simple production scenarios. After all, the documentation says:
+
+> It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning.
+
+Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/) and that is exactly what we are going to do next: we are about to leverage NGINX to serve our vue.js app because it is considered to be one of the most performant and battle-tested solutions out there.
+
+Let's refactor our `Dockerfile` to use NGINX:
+
+ ```docker
+# build stage
+FROM node:9.11.1-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginx:1.13.12-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+Ok, let's see what's going on here:
+* we have split our original `Dockerfile` in multiple stages by leveraging the Docker [multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/) feature;
+* the first stage is responsible for building a production-ready artifact of our Vue.js app;
+* the second stage is responsible for serving such artifact using NGINX.
+
+Now let's build the Docker image of our Vue.js app:
+
+```bash
+docker build -t vuejs-cookbook/dockerize-vuejs-app .
+```
+
+Finally, let's run our Vue.js app in a Docker container:
+
+```bash
+docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app
+```
+
+We should be able to access our Vue.js app on `localhost:8080`.
+
+## Additional Context
+
+If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that.
+
+Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords:
+* Microservices
+* DevOps
+* Continuous Delivery
+
+Let's see how these concepts actually affect our decision of dockerizing our Vue.js app.
+
+### Effects of Microservices
+
+By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.
+
+So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service.
+
+### Effects of DevOps
+
+The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers").
+
+So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a deveveloper's laptop, the production environment or any environment we may think of.
+
+### Effects of Continuous Delivery
+
+By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters).
+
+So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence.
+
+## Alternative Patterns
+
+If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need.
+
+Common alternatives are:
+* leveraging an all-in-one platform like [netlify](https://www.netlify.com/);
+* hosting your SPA on [Amazon S3](https://aws.amazon.com/s3/) and serving it with [Amazon CloudFront](https://aws.amazon.com/cloudfront/) (see [this](https://serverless-stack.com/chapters/deploy-the-frontend.html) link for a detailed guide).
\ No newline at end of file
diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md
index cc090d0e01..1a66e80aae 100644
--- a/src/v2/cookbook/form-validation.md
+++ b/src/v2/cookbook/form-validation.md
@@ -54,19 +54,28 @@ The final thing to note is that each of the three fields has a corresponding `v-
``` js
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:null,
- age:null,
- movie:null
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ age: null,
+ movie: null
},
methods:{
- checkForm:function(e) {
- if(this.name && this.age) return true;
+ checkForm: function (e) {
+ if (this.name && this.age) {
+ return true;
+ }
+
this.errors = [];
- if(!this.name) this.errors.push("Name required.");
- if(!this.age) this.errors.push("Age required.");
+
+ if (!this.name) {
+ this.errors.push('Name required.');
+ }
+ if (!this.age) {
+ this.errors.push('Age required.');
+ }
+
e.preventDefault();
}
}
@@ -122,26 +131,33 @@ While the change here is small, note the `novalidate="true"` on top. This is imp
``` js
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:null,
- email:null,
- movie:null
+ el: '#app',
+ data: {
+ errors: [],
+ name: null,
+ email: null,
+ movie: null
},
- methods:{
- checkForm:function(e) {
+ methods: {
+ checkForm: function (e) {
this.errors = [];
- if(!this.name) this.errors.push("Name required.");
- if(!this.email) {
- this.errors.push("Email required.");
- } else if(!this.validEmail(this.email)) {
- this.errors.push("Valid email required.");
+
+ if (!this.name) {
+ this.errors.push("Name required.");
+ }
+ if (!this.email) {
+ this.errors.push('Email required.');
+ } else if (!this.validEmail(this.email)) {
+ this.errors.push('Valid email required.');
+ }
+
+ if (!this.errors.length) {
+ return true;
}
- if(!this.errors.length) return true;
+
e.preventDefault();
},
- validEmail:function(email) {
+ 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,}))$/;
return re.test(email);
}
@@ -197,29 +213,36 @@ Note the set of inputs covering the five different features. Note the addition o
``` js
const app = new Vue({
- el:'#app',
+ el: '#app',
data:{
- errors:[],
- weapons:0,
- shields:0,
- coffee:0,
- ac:0,
- mousedroids:0
+ errors: [],
+ weapons: 0,
+ shields: 0,
+ coffee: 0,
+ ac: 0,
+ mousedroids: 0
},
- computed:{
- total:function() {
- // must parse cuz Vue turns empty value to string
- return Number(this.weapons)+
- Number(this.shields)+
- Number(this.coffee)+
+ computed: {
+ total: function () {
+ // must parse because Vue turns empty value to string
+ return Number(this.weapons) +
+ Number(this.shields) +
+ Number(this.coffee) +
Number(this.ac+this.mousedroids);
}
},
methods:{
- checkForm:function(e) {
+ checkForm: function (e) {
this.errors = [];
- if(this.total != 100) this.errors.push("Total must be 100!");
- if(!this.errors.length) return true;
+
+ if (this.total != 100) {
+ this.errors.push('Total must be 100!');
+ }
+
+ if (!this.errors.length) {
+ return true;
+ }
+
e.preventDefault();
}
}
@@ -237,16 +260,16 @@ In my final example, we built something that makes use of Ajax to validate at th
``` js
function main(args) {
-
return new Promise((resolve, reject) => {
-
// bad product names: vista, empire, mbp
- let badNames = ['vista','empire','mbp'];
- if(badNames.includes(args.name)) reject({error:'Existing product'});
- resolve({status:'ok'});
-
+ const badNames = ['vista', 'empire', 'mbp'];
+
+ if (badNames.includes(args.name)) {
+ reject({error: 'Existing product'});
+ }
+
+ resolve({status: 'ok'});
});
-
}
```
@@ -280,22 +303,24 @@ There isn't anything special here. So let's go on to the JavaScript.
const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
const app = new Vue({
- el:'#app',
- data:{
- errors:[],
- name:''
+ el: '#app',
+ data: {
+ errors: [],
+ name: ''
},
methods:{
- checkForm:function(e) {
+ checkForm: function (e) {
e.preventDefault();
+
this.errors = [];
- if(this.name === '') {
- this.errors.push("Product name is required.");
+
+ if (this.name === '') {
+ this.errors.push('Product name is required.');
} else {
- fetch(apiUrl+encodeURIComponent(this.name))
+ fetch(apiUrl + encodeURIComponent(this.name))
.then(res => res.json())
.then(res => {
- if(res.error) {
+ if (res.error) {
this.errors.push(res.error);
} else {
// redirect to a new URL, or do something on success
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index 6b9058668d..704331cd95 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -149,22 +149,22 @@ import { shallowMount } from '@vue/test-utils'
describe('Foo', () => {
it('restitue un message et répond correctement à la saisie de l\'utilisateur', () => {
- const wrapper = shallowMount(Foo, {
- data: {
- message: 'Hello World',
- username: ''
- }
- })
-
- // vérifie si le message est restitué
- expect(wrapper.find('.message').text()).toEqual('Hello World')
-
- // vérifie que `error` est rendue
- expect(wrapper.find('.error').exists()).toBeTruthy()
-
- // met à jour `username` et vérifie que `error` n'est plus rendu
- wrapper.setData({ username: 'Lachlan' })
- expect(wrapper.find('.error').exists()).toBeFalsy()
+ const wrapper = shallowMount(Foo, {
+ data: {
+ message: 'Hello World',
+ username: ''
+ }
+ })
+
+ // vérifie si le message est restitué
+ expect(wrapper.find('.message').text()).toEqual('Hello World')
+
+ // vérifie que `error` est rendue
+ expect(wrapper.find('.error').exists()).toBeTruthy()
+
+ // met à jour `username` et vérifie que `error` n'est plus rendu
+ wrapper.setData({ username: 'Lachlan' })
+ expect(wrapper.find('.error').exists()).toBeFalsy()
})
})
```
@@ -224,7 +224,7 @@ describe("Foo", () => {
À noter :
-Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallowMount(Foo)` dans chaque test. Un autre avantage important : quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés dans cette `factory`.
+Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallowMount(Foo)` dans chaque test. Un autre avantage important : quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés une fois.
## Pour aller plus loin
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md
index 4ae47a9f08..102a1d3907 100644
--- a/src/v2/guide/comparison.md
+++ b/src/v2/guide/comparison.md
@@ -22,7 +22,7 @@ Ayant un champ d'action similaire, nous avons passé plus de temps à affiner ce
Ceci étant dit, il est inévitable que la comparaison puisse paraitre biaisée en faveur de Vue pour certains utilisateurs de React, puisque beaucoup des sujets explorés sont subjectifs dans une certaine mesure. Nous reconnaissons l'existence de préférences techniques différentes, et cette comparaison va avoir pour principal but de décrire pourquoi vous pourriez potentiellement préférer Vue s'il s'avère que vos préférences coïncident avec les nôtres.
-La communauté React [a été sollicitée](https://github.com/vuejs/vuejs.org/issues/364) pour nous aider à atteindre cette neutralité, avec des remerciements en particulier à Dan Abramov de l'équipe React. Il a été extrêmement généreux en accordant son temps et son expertise pour nous aider à remanier ce document jusqu'à ce que le résultat final [convienne](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740) aux deux parties.
+Plusieurs des sections plus bas peuvent être incorrectes du fait de la récente mise à jour de React 16+. Nous avons planifié de travailler avec la communauté React pour retravailler ces sections dans un futur proche.
### Performance à l'exécution
@@ -216,15 +216,9 @@ Il semble aussi y avoir une différence de philosophie dans le design des APIs q
## Polymer
-Polymer est encore un autre projet sponsorisé par Google qui a également été une source d'inspiration pour Vue. Les composants de Vue peuvent être grosso modo comparés à ceux des éléments personnalisés de Polymer et les deux fournissent un style de développement vraiment similaire. La plus grosse différence est que Polymer est construit sur la base des dernières fonctionnalités de *Web Components* et requiert donc des *polyfills* complexes pour fonctionner (avec des performances dégradées) dans les navigateurs qui ne supportent pas ces fonctionnalités nativement. En revanche, Vue fonctionne sans aucune dépendance dans tous les navigateurs après IE9.
+Polymer est encore un autre projet sponsorisé par Google qui a également été une source d'inspiration pour Vue. Les composants de Vue peuvent être grosso modo comparés à ceux des éléments personnalisés de Polymer et les deux fournissent un style de développement vraiment similaire. La plus grosse différence est que Polymer est construit sur la base des dernières fonctionnalités de Web Components et requiert donc des polyfills complexes pour fonctionner (avec des performances dégradées) dans les navigateurs qui ne supportent pas ces fonctionnalités nativement. En revanche, Vue fonctionne sans aucune dépendance dans tous les navigateurs après IE9.
-Avec Polymer 1.0, l'équipe a également créé un système de liaison de données vraiment limité afin de compenser les performances. Par exemple, les seules expressions supportées dans les templates Polymer sont les négations booléennes et l'appel de simples méthodes. Son implémentation des propriétés calculées n'est pas non plus très flexible.
-
-Les éléments personnalisés de Polymer sont créés dans des fichiers HTML, ce qui vous limite à du simple JavaScript/CSS (et les fonctionnalités supportées par les navigateurs actuels). En comparaison, les fichiers de composant unique de Vue vous permettent facilement d'utiliser ES2015+ et le préprocesseur CSS de votre choix.
-
-Quand vous déployez en production, Polymer recommande de tout charger à la volée avec des imports HTML, en s'appuyant sur l'implémentation dans les navigateurs de la specicification, et du support de HTTP/2 côté client et côté serveur. Cela peut ou non être faisable en fonction de l'audience ciblée ou de l'environnement serveur. Au cas où vous ne souhaiteriez pas cela, vous pouvez utiliser un outil appelé Vulcanizer pour empaqueter vos éléments Polymer. De ce côté, Vue peut combiner ses fonctionnalités de composant asynchrone avec la fonctionnalité de scission de code de webpack pour facilement découper des parties du paquetage (« bundle ») applicatif afin qu'elles soient chargées à la volée. Cela assure l'entière compatibilité avec les vieux navigateurs en conservant une excellente performance au chargement.
-
-Il est aussi totalement possible d'offrir une intégration profonde entre Vue et les specs des Web Components, Custom Elements, Shadow DOM — cependant, nous attendons toujours que les spécifications murissent et soient largement implémentées dans tous les navigateurs majeurs avant de sérieusement nous pencher sur la question.
+Avec Polymer, l'équipe a également créé un système de liaison de données vraiment limité afin de compenser les performances. Par exemple, les seules expressions supportées dans les templates Polymer sont les négations booléennes et l'appel de simples méthodes. Son implémentation des propriétés calculées n'est pas non plus très flexible.
## Riot
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index b55eef4800..7290a862ab 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -185,7 +185,7 @@ new Vue({
posts: [
{ id: 1, title: 'Mon initiation avec Vue' },
{ id: 2, title: 'Blogger avec Vue' },
- { id: 3, title: 'Pourquoi Vue est tellement cool' },
+ { id: 3, title: 'Pourquoi Vue est tellement cool' }
]
}
})
@@ -629,4 +629,4 @@ Il doit être noté que **cette limitation _n'_affecte _pas_ les templates sous
C'est tout ce que vous avez besoin de savoir à propos des cas particuliers pour le moment. Vous voilà arrivé à la fin de l'_Essentiel_ de Vue. Félicitations ! Il reste encore beaucoup à apprendre, mais d'abord, nous vous recommandons de faire une pause pour jouer avec Vue par vous-même et construire quelque chose d'amusant.
-Une fois que vous vous sentirez à l'aise avec les connaissances que vous venez fraichement d’acquérir, nous vous recommandons de revenir pour lire le guide complet à propos des [Composants dynamiques et asynchrones](components-dynamic-async.html) ainsi que les autres pages de la partie Composants en détails de la barre de navigation latérale.
+Une fois que vous vous sentirez à l'aise avec les connaissances que vous venez fraichement d’acquérir, nous vous recommandons de revenir pour lire le guide complet à propos des [Composants dynamiques et asynchrones](components-dynamic-async.html) ainsi que les autres pages de la partie Composants en détails de la barre de navigation latérale.
\ No newline at end of file
diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md
index 6e452b4deb..f39b8ff804 100644
--- a/src/v2/guide/events.md
+++ b/src/v2/guide/events.md
@@ -204,7 +204,7 @@ Pour résoudre ce problème, Vue propose des modificateurs d'évènements pour `
```
-Contrairement aux autres modificateurs, qui sont exclusifs aux évènements natifs du DOM, le modificateur `.once` peut également être utilisé pour les [évènements des composants](components.html). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquiétez pas pour le moment.
+Contrairement aux autres modificateurs, qui sont exclusifs aux évènements natifs du DOM, le modificateur `.once` peut également être utilisé pour les [évènements des composants](components-custom-events.html). Si vous n'avez pas encore lu la section concernant les composants, ne vous en inquiétez pas pour le moment.
> Nouveau en 2.3.0+
diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
index 921c26542e..3ea00711ed 100644
--- a/src/v2/guide/index.md
+++ b/src/v2/guide/index.md
@@ -32,8 +32,12 @@ ou:
La page d'[installation](installation.html) vous offre d'autres manières d'installer Vue. Notez que nous **ne** recommandons **pas** aux débutants de commencer avec `vue-cli`, surtout si vous n'êtes pas encore familier avec les outils de *build* basés sur Node.js.
+Si vous préférez quelque chose de plus intéractif, vous pouvez également consulter [cette série de tutoriels sur Scrimba](https://scrimba.com/playlist/pXKqta), ce qui vous donnera un mélange de démonstration visuelle et de jeu avec le code que vous pourrez mettre en pause à n'importe quel moment.
+
## Rendu déclaratif
+
+
Au cœur de Vue.js, il y a un système qui va nous permettre de faire le rendu des données déclarativement dans le DOM en utilisant simplement cette syntaxe de template :
``` html
@@ -105,6 +109,8 @@ Si vous ouvrez votre console JavaScript une nouvelle fois et entrez `app2.messag
## Conditions et boucles
+
+
Il est assez simple de permuter la présence d'un élément :
``` html
@@ -189,6 +195,8 @@ Dans la console, entrez `app4.todos.push({ text: 'Nouvel élément' })`. Vous de
## Gestion des entrées utilisateur
+
+
Afin de permettre aux utilisateurs d’interagir avec votre application, nous pouvons utiliser la directive `v-on` pour attacher des écouteurs d’évènements qui invoquent des méthodes sur nos instances de Vue :
``` html
@@ -265,6 +273,8 @@ var app6 = new Vue({
## Composer avec des composants
+
+
Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de plus grosses applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interfaces applicatives peuvent être abstraits en un arbre de composants.

diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md
index 3f87631587..137d9285b9 100644
--- a/src/v2/guide/installation.md
+++ b/src/v2/guide/installation.md
@@ -57,7 +57,7 @@ $ npm install vue
## CLI
-Vue.js offre une [CLI](https://github.com/vuejs/vue-cli) (interface en ligne de commande) officielle pour mettre rapidement en place les bases d'une application monopage ambitieuse. Il offre une série de builds pré-configurés pour un workflow frontend moderne. Cela ne prend que quelques minutes pour commencer et lancer des rechargements à chaud, de l'analyse syntaxique à la sauvegarde, et des builds prêts pour la production. Consultez [la documentation Vue CLI](https://github.com/vuejs/vue-cli/blob/dev/docs/README.md#introduction) pour plus de détails.
+Vue.js offre une [CLI officielle](https://github.com/vuejs/vue-cli) (« interface en ligne de commande ») pour mettre rapidement en place les bases d'une application monopage ambitieuse. Il offre une série de builds pré-configurés pour un workflow frontend moderne. Cela ne prend que quelques minutes pour commencer et lancer des rechargements à chaud, de l'analyse syntaxique à la sauvegarde, et des builds prêts pour la production. Consultez [la documentation Vue CLI](https://cli.vuejs.org) pour plus de détails.
Utiliser la CLI nécessite des connaissances préalables en Node.js et les outils de build associés. Si vous êtes nouveau sur Vue ou les outils de build front-end, nous vous recommandons fortement de parcourir le guide sans aucun outil de build avant d'utiliser l'interface CLI.
diff --git a/src/v2/guide/join.md b/src/v2/guide/join.md
index 8cd7226f4b..c476e63ad0 100644
--- a/src/v2/guide/join.md
+++ b/src/v2/guide/join.md
@@ -14,8 +14,8 @@ Maintenant nous allons voir ensemble ce que la communauté peut faire pour vous
- [Forum](https://forum.vuejs.org/french) : Le meilleur endroit pour poser des questions et obtenir des réponses à propos de Vue et de son écosystème.
- [Chat](https://discordapp.com/channels/325477692906536972/360669119948783616) | [En](https://chat.vuejs.org/) : Un endroit où les développeurs peuvent se rencontrer et discuter en temps réel.
-- [Meetups](https://www.vuemeetups.org): Envie de rencontrer des utilisateurs de Vue.js enthousiastes comme vous ? Intéressé pour devenir un leader de communauté ? Nous avons l'aide et le support qu'il vous faut juste ici !
-- [GitHub](https://github.com/vuejs) : Si vous avez un bogue à reporter ou une demande de nouvelle fonctionnalité à faire, les rapports de bogue (« issues ») GitHub sont là pour ça. Les propositions de fusion (« pull requests ») sont également les bienvenues !
+- [Meetups (EN)](https://www.vuemeetups.org): Envie de rencontrer des utilisateurs de Vue.js enthousiastes comme vous ? Intéressé pour devenir un leader de communauté ? Nous avons l'aide et le support qu'il vous faut juste ici !
+- [GitHub (EN)](https://github.com/vuejs) : Si vous avez un bogue à reporter ou une demande de nouvelle fonctionnalité à faire, les rapports de bogue (« issues ») GitHub sont là pour ça. Les propositions de fusion (« pull requests ») sont également les bienvenues !
### Explorer l'écosystème
diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md
index dafbf4b26d..0e7259ceb4 100644
--- a/src/v2/guide/migration.md
+++ b/src/v2/guide/migration.md
@@ -364,7 +364,7 @@ computed: {
Devient dans une méthode :
``` js
-template: '
message : {{ getTimeMessage }}
',
+template: '
message : {{ getTimeMessage() }}
',
methods: {
getTimeMessage: function () {
return Date.now() + this.message
diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md
index 881895aba7..b6a441c7f4 100644
--- a/src/v2/guide/transitions.md
+++ b/src/v2/guide/transitions.md
@@ -955,7 +955,7 @@ Jusqu'à présent, nous avons réalisé des transitions pour :
Alors, qu'en est-il lorsque nous avons une liste complète d'éléments où nous voulons faire un rendu simultané, par exemple avec `v-for` ? Dans ce cas, nous allons utiliser le composant ``. Cependant avant de plonger dans un exemple, il y a quelques éléments importants à connaitre sur ce composant :
- Contrairement à ``, il rend un élément réel : par défaut un ``. Vous pouvez modifier l'élément rendu avec l'attribut `tag`.
- - [Les modes de transition](#Les-modes-de-transition) ne sont pas disponibles car nous ne pouvons plus alterner entre des éléments mutuellement exclusifs.
+- [Les modes de transition](#Les-modes-de-transition) ne sont pas disponibles car nous ne pouvons plus alterner entre des éléments mutuellement exclusifs.
- Les éléments à l'intérieur **doivent toujours avoir** un attribut `key` unique
### Transitions de liste entrantes/sortantes
diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md
index e399cbf119..ea7cddd46e 100644
--- a/src/v2/guide/unit-testing.md
+++ b/src/v2/guide/unit-testing.md
@@ -131,4 +131,4 @@ it('met à jour le message rendu quand `vm.message` est mis à jour', done => {
Nous prévoyons de travailler sur une collection de fonctions utilitaires de tests communs pour rendre encore plus simple le rendu de composants avec différentes contraintes (par ex. des rendus peu profonds ignorant les composants enfants) et faire des assertions sur le code en sortie.
-Pour des informations plus pointues sur les tests unitaires avec Vue, jeter un œil à [vue-test-utils](https://vue-test-utils.vuejs.org/fr/) et notre entrée des tutoriels à propos des [tests unitaires de composants Vue](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html).
\ No newline at end of file
+Pour des informations plus pointues sur les tests unitaires avec Vue, jeter un œil à [vue-test-utils](https://vue-test-utils.vuejs.org/fr/) et notre entrée des tutoriels à propos des [tests unitaires de composants Vue](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html).
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml
index a7f928612c..4ced977b33 100644
--- a/themes/vue/_config.yml
+++ b/themes/vue/_config.yml
@@ -27,8 +27,6 @@ gold_sponsors:
img: htmlburger.png
- url: https://chaitin.cn/en/
img: chaitin.png
- - url: https://anymod.com
- img: anymod.png
- url: https://www.frontenddeveloperlove.com/
img: frontend-love.png
- url: https://onsen.io/vue/
@@ -43,22 +41,22 @@ gold_sponsors:
img: icons8.png
- url: https://vuejobs.com/?ref=vuejs
img: vuejobs.png
- - url: https://leanpub.com/vuejs2
- img: tmvuejs2.png
- url: https://codepilot.ai
img: codepilot.png
- url: https://teamextension.io/
img: teamextension.png
- - url: https://jsguru.io/
- img: jsguru.png
- url: http://aaha.co/
img: aaha.png
- url: https://www.valuecoders.com
img: valuecoders.png
- url: https://www.nsoft.com/careers/
img: nsoft.png
- - url: https://www.pubnub.com/vue-js/
- img: pubnub.png
+ - url: https://www.vuemastery.com/
+ img: vuemastery.png
+
+silver_sponsors:
+ - url: https://dopamine.bg/
+ img: dopamine.png
silver_sponsors:
- url: https://dopamine.bg/
diff --git a/themes/vue/layout/partials/ecosystem_dropdown.ejs b/themes/vue/layout/partials/ecosystem_dropdown.ejs
index dd57e0326a..c9348a214b 100644
--- a/themes/vue/layout/partials/ecosystem_dropdown.ejs
+++ b/themes/vue/layout/partials/ecosystem_dropdown.ejs
@@ -5,6 +5,7 @@