Développement web avancé
Séance 2
Vue.js ?
- Framework Javascript
- "Réactif"
- Orienté composant
- Forte communauté
- Coeur du framework léger (30Ko)
- Librairies officielles
Concepts étudiés
- Variables réactives
- Directives
- Évènements et méthodes
- Hooks du cycle de vie
- Composants
- Single File Components
- Router
Page HTML & JavaScript
Objet Vue principal (new Vue(...))
- Template
- Données (variables)
- Méthodes
- Logique
<html> <head>
</head> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Introduction à Vue.js</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>Objet options
{
el: '#app',
data: {}
methods: {}
mounted() {}
computed: {}
}Données réactives 1/2
<div id="app">
{{ message }}
</div>
<script>
const vm = new Vue({
...,
data: {
message: "Hello World!"
}
})
vm.message = "Hello Novaa"Données réactives 2/2
<div id="app">
<span v-bind:title="message">{{ message }}</span>
</div>
<script>
const vm = new Vue({
...,
data: {
message: "Hello World!"
}
})
vm.message = "Hello Novaa"Directives v-*
<p v-if="display">On me voit</p>
<p v-else>On me voit plus</p><p v-show="display">On me voit</p><ul>
<li v-for="movie in movies">{{ movie }}</li>
</ul>
<ul>
<li v-for="movie in movies" v-bind:key="movie.title">
{{ movie.title }}
</li>
</ul><button v-on:click="clickMethod">Submit form</button>
<button v-on:click.prevent="clickMethod">Submit form</button><input type="text" v-model="message" />
{{message}}
...
<script>
new Vue({
...,
data: {
message: "Hello"
}
})
</script>Methods
new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
increment() {
this.counter++
}
}
})<div id="app">
{{ counter }} <button v-on:click="increment">Increment</button>
</div>new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
increment(step) {
this.counter+=step
}
}
})<div id="app">
{{ counter }} <button v-on:click="increment(4)">Increment</button>
</div>Computed properties
<div id="app">
<input type="text" v-model="message" /><br />
{{ message }}<br />
{{ message_reversed }}
</div>new Vue({
el: "#app",
data: {
message: "Hello World"
},
computed: {
message_reversed() {
return this.message.split('').reverse().join('')
}
}
})Cycle de vie
d'un composant
new Vue({
el: "#app",
mounted() {
console.log("Mounted")
},
destroyed() {
console.log("Destroyed")
}
})Composants
Vue
<div id="app">
<todo-item></todo-item>
</div>Vue.component('todo-item', {
template: '<li>Préparer mes slides</li>'
})
new Vue({
el: "#app"
})<div id="app">
<todo-item todo="Préparer mes slides"></todo-item>
</div>Vue.component('todo-item', {
props: ["todo"],
template: '<li>{{todo}}</li>'
})
new Vue({
el: "#app"
})<div id="app">
<todo-item v-bind:todo="message"></todo-item>
</div>Vue.component('todo-item', {
props: ["todo"],
template: '<li>{{todo}}</li>'
})
new Vue({
el: "#app",
data: {
message: "Hello world"
}
})<div id="app">
<todo-item v-bind:todo="message"
v-on:btnclicked="btnClickedHandler"></todo-item>
</div>Vue.component('todo-item', {
props: ["todo"],
template: `<li>{{todo}}
<button v-on:click="btnClicked">Click me</button></li>`,
methods: {
btnClicked() {
this.$emit('btnclicked')
}
}
})
new Vue({
el: "#app",
data: {
message: "Hello world"
},
methods: {
btnClickedHandler() {
console.log("Button todo clicked")
}
}
})Demo time
TD 2
https://scleriot.github.io/web-dawin/
Développement web avancé - Séance 2
By Simon Cleriot
