Skip to content

docs(crash-course): Update to script setup (en, fr and zh) #2643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 1, 2025
Merged

docs(crash-course): Update to script setup (en, fr and zh) #2643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a1ece2
docs(crash-course): Update to script setup (en)
sofuxro Mar 28, 2025
86c0917
Update a-crash-course.md
sofuxro Mar 28, 2025
b6a0149
docs(crash-course): Update to script setup (fr)
sofuxro Mar 28, 2025
4bc9644
docs(crash-course): Update to script setup (zh)
sofuxro Mar 28, 2025
4d28e5a
Merge pull request #1 from sofuxro/patch-2
sofuxro Mar 31, 2025
3005822
Merge pull request #2 from sofuxro/patch-3
sofuxro Mar 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 29 additions & 43 deletions docs/fr/guide/essentials/a-crash-course.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,16 @@ Commençons par un simple composant TodoApp avec une seule tâche :
<div></div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
todos: [
{
id: 1,
text: 'Apprendre Vue.js 3',
completed: false,
},
],
};
},
};
<script setup>
import { ref } from 'vue'

const todos = ref([
{
id: 1,
text: 'Apprendre Vue.js 3',
completed: false
}
])
</script>
```

Expand Down Expand Up @@ -116,33 +110,25 @@ Si nous exécutons ce test, il échouera. Modifions `TodoApp.vue` pour avoir les
</div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
newTodo: '',
todos: [
{
id: 1,
text: 'Apprendre Vue.js 3',
completed: false,
},
],
};
},

methods: {
createTodo() {
this.todos.push({
id: 2,
text: this.newTodo,
completed: false,
});
},
},
};
<script setup>
import { ref } from 'vue'

const newTodo = ref(''),
const todos = ref([
{
id: 1,
text: 'Apprendre Vue.js 3',
completed: false
}
])

const createTodo = () => {
todos.value.push({
id: 2,
text: newTodo.value,
completed: false
})
}
</script>
```

Expand Down
66 changes: 26 additions & 40 deletions docs/guide/essentials/a-crash-course.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,16 @@ We will start off with a simple `TodoApp` component with a single todo:
<div></div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
todos: [
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
]
}
<script setup>
import { ref } from 'vue'

const todos = ref([
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
}
])
</script>
```

Expand Down Expand Up @@ -117,32 +111,24 @@ If we run this test, it will obviously fail. Let's update `TodoApp.vue` to have
</div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
newTodo: '',
todos: [
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
]
}
},

methods: {
createTodo() {
this.todos.push({
id: 2,
text: this.newTodo,
completed: false
})
}
<script setup>
import { ref } from 'vue'

const newTodo = ref(''),
const todos = ref([
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
])

const createTodo = () => {
todos.value.push({
id: 2,
text: newTodo.value,
completed: false
})
}
</script>
```
Expand Down
66 changes: 26 additions & 40 deletions docs/zh/guide/essentials/a-crash-course.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,16 @@
<div></div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
todos: [
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
]
}
<script setup>
import { ref } from 'vue'

const todos = ref([
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
}
])
</script>
```

Expand Down Expand Up @@ -116,32 +110,24 @@ test('creates a todo', () => {
</div>
</template>

<script>
export default {
name: 'TodoApp',

data() {
return {
newTodo: '',
todos: [
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
]
}
},

methods: {
createTodo() {
this.todos.push({
id: 2,
text: this.newTodo,
completed: false
})
}
<script setup>
import { ref } from 'vue'

const newTodo = ref(''),
const todos = ref([
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
])

const createTodo = () => {
todos.value.push({
id: 2,
text: newTodo.value,
completed: false
})
}
</script>
```
Expand Down