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

منذ 5 سنوات imadbelasri Vuejs
VS

فهاد  الدرس الرابع من دورة 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>
                                                        
                                                    

دروس ذات صلة

VS

دورة vue js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة vue js للمبتدئين غادي نشوفوا واحد المقدمة على vuejs من بعد غادي نشوفو كيفاش...


VS

دورة vuejs للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة vuejs للمبتدئين غادي نشوفوا كيفاش نزيدو les directives ف vue js ف les dire...


VS

دورة vuejs للمبتدئين الدرس الثالث

فهاد الدرس الثالت من دورة vuejs للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا المزيد من les di...


VS

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

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


VS

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

فهاد الدرس الخامس من دورة vue js للمبتدئين غادي نشوفوا كيفاش نقادو آلة حاسبة ولي غادي تكون تطبيق لدا...


VS

دورة VUE JS للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة VUE JS للمبتدئين غادي نكملو الألة الحاسبة ديالنا فغادي نشوفوا كيفاش غادي ن...


VS

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

فهاد الدرس السابع من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا des directives آخرين...


VS

دورة VUE JS للمبتدئين الدرس الثامن

فهاد الجزء الثمن من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا واحد الحاجة مهمة ف...


VS

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

فهاد الدرس التاسع من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد لحاج...


VS

دورة VUE JS للمبتدئين الدرس العاشر

دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد ل propriété وحدة اخرى لي هي watch....