دورة VUEJS للمبتدئين الدرس الرابع


فهاد  الدرس الرابع من دورة VUEJS للمبتدئين  غادي نشوفوا كيفاش نزيدو les méthodes لل projet ديالنا كما غادي نشوفوا كيفاش ن exécuter des méthodes فاش يكون شي événement. 


1- DIRECTIVE V-FOR ف VUE JS

قبل مانشوفوا les méthodes غادي نشوفوا آخر directive لي هي v-for ولي باينة شنو كتدير فكتمكني انني ندير boucle على واحد ل array ون afficher les données لي فيها.

غادي نمشي ل main.js غادي نزيد ف data objet واحد ل array لي زدت فيها أسماء.

الكود ديال main.js بعد التعديل :

                                //main.js 

new Vue({
    el : '#app',
    data : {
        names : ['samadi','amine','halim','karim']
    }
});
                            

2- عرض الأسماء بل boucle v-for

منبعد ف index.html كنزيد ul وفل li كنزيد ل v-for لي كنعطيها ل array names وكنعطي ل variable name لي غادي تساوي كل قيمة فل array منبعد كن afficher الأسماء ب

{{name}}

وكنحصل على هاد النتيجة :

                       


الكود ديال index.html بعد التعديل :

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="form-group">
                <ul class="list-group">
                    <li class="list-group-item" v-for="name in names">{{name}}</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- التعامل مع les méthodes ف vue js

فباش نزيد les méthodes عندي objet سميتو methods ولي كيكون دائما بعد data فيه كنزيد les fonctions ديالي.

ف main.js كنزيدو فيه كنزيد fonction سميتها addName كتدير إضافة اسم لل array names فيلا مكنتيش كتعرف javascript شوف دورة المبتدئين ف javascript .

الكود ديال main.js بعد التعديل :

 

                                //main.js

new Vue({
    el : '#app',
    data : {
        names : ['samadi','amine','halim','karim']
    },
    methods : {
        addName(){
            this.names.push('jamal');
        }
    }
});
                            

4- التعامل مع les méthodes ف vue js تتمة

فباش ن executer la fonction زدنا bouton ف index.html وعطيناه v-on:click لي سبق وشفناها قبل وزدنا فوسطها ل fonction addName ولي كتعني ملي نكليكي على ل bouton نفذها.

فدبا يلا ضغطت على ل bouton غادي يتزاد jamal ل array وغادي نحصل على هاد النتيجة :




الكود ديال index.html بعد التعديل :

                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="form-group">
                <button class="btn btn-primary" v-on:click="addName">click</button>
                <ul class="list-group">
                    <li class="list-group-item" v-for="name in names">{{name}}</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>