Tuto VueJS

Structure de VueJS

Vue d'ensemble de la structure d'une application VueJS. Dans cet exemple et dans le but de simplifier la vision des choses, tout le code se trouve sur la même page web (exemple index.html) et la librairie VueJS est appelée de manière distante. Ainsi vous pouvez simplement copier et coller directement le code dans une simple page html et l'exécuter directement à partir de votre navigateur. Seule condition, être connecter à internet.

Exemple basique de la structure d'une application VueJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Structure VueJS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    </head>
    <body>
        <div id="app">
            {{uneSimpleFonction()}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    uneSimpleVariable: 'Pommes',
                    unSimpleObjet: {nom: "Gates", prenom: "Bill"},
                    unSimpleTableau: ["lundi", "mardi"]
                },
                methods:{
                    uneSimpleFonction: function () {
                        return this.unSimpleObjet.prenom + " " + this.unSimpleObjet.nom + " mange des pommes tous les " + this.unSimpleTableau[0]
                    }
                },
                created(){

                },
                beforeMount(){

                },
                mounted() {

                },
                beforeUpdate(){

                },			
                computed: {

                }
            });
        </script>
    </body>
</html>

Afficher une variable en VueJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Structure VueJS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    </head>
    <body>
        <div id="app">
            {{uneSimpleVariable}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    uneSimpleVariable: 'Hello world'
                }
            });
        </script>
    </body>
</html>

Afficher un élément d'un objet dans VueJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Structure VueJS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    </head>
    <body>
        <div id="app">
            {{unSimpleObjet.prenom}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    unSimpleObjet: {nom: "Gates", prenom: "Bill"}
                }
            });
        </script>
    </body>
</html>

Afficher un élément d'un tableau dans VueJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Structure VueJS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    </head>
    <body>
        <div id="app">
            {{unSimpleTableau[0]}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    unSimpleTableau: ["lundi", "mardi"]
                }
            });
        </script>
    </body>
</html>

Retourner le résultat d'une fonction dans VueJS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Structure VueJS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    </head>
    <body>
        <div id="app">
            {{uneSimpleFonction()}}
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    uneSimpleVariable: 'Hello world'
                },
                methods:{
                    uneSimpleFonction: function () {
                        return this.uneSimpleVariable
                    }
                }
            });
        </script>
    </body>
</html>