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

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

فهاد الدرس الثاني من دورة vuejs للمبتدئين غادي نشوفوا كيفاش نزيدو les directives ف vue js ف les directives كيمكنونا اننا نستهدفوا les actions الخاصين ب des éléments html.
فمثلا يلا بغيت فاش يكليكي المستخدم على واحد ل bouton كنخدم ب directive v-on:click لي كتعني فاش نضغط على ال bouton غادي تنفذ واحد ل action فغادي نشوفو هادشي كامل  فهاد الدرس.


1- directive v-if ف vue js

ف directive v-if بحال if فاللغات الاخرى  كتمكن من عرض واحد الحاجة يلا كان واحد الشرط صحيح فالمثال لي عندنا ف main.js زدنا ف data واحد ل  propriété  name وزدنا ايضا propriété show لي عطيناها false.
الكود ديال main.js بعد التعديل هو :

                                                    
                                                        //main.js

new Vue({
    el : '#app',
    data : {
        message : "bonjour",
        name : 'samadi',
        show : false,
    }
});
                                                    
                                                

2- directive v-if ف vue js تتمة

من بعد ف index.html زدت كود لي فيه كنتحقق يلا كانت show يعني كتساوي true كن afficher h3 فيها ل message زائد name مكانتش لي كنتحقق منها ب v-else كنعرض au revoir.
فدبا يلا فتحت index.html فالمتصفح غادي نلقى au revoir حيت show كتساوي false.



الكود لي زدنا ف 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>
</head>
<body>
    <div id="app">
        <div class="container">
            <h3 class="text-center text-info">{{message}}</h3>
            <h3 class="text-center text-danger" v-if="show">{{message}} {{name}}</h3>
            <h3 class="text-center text-danger" v-else>au revoir.</h3>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                                                        
                                                    

3- directive v-on:click ف vue js

فكيف قلنا فالمقدمة directive v-on:click كتعني فاش نضغط على ال bouton غادي تنفذ واحد ل action.
فالمثال لي عندنا زدنا bouton ولي زدنالو directive v-on:click ولي فاش كنضغط عليه كترد show يساوي true وبالتالي bonjour samadi كتعرض عوض au revoir كيف كنشوف الصورة :



 الكود لي زدنا ف 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>
</head>
<body>
    <div id="app">
        <div class="container">
            <h3 class="text-center text-info">{{message}}</h3>
            <button class="btn btn-primary" v-on:click="show = true">click</button>
            <h3 class="text-center text-danger" v-if="show">{{message}} {{name}}</h3>
            <h3 class="text-center text-danger" v-else>au revoir.</h3>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                                                        
                                                    

4- directive v-bind ف vue js

ف directive v-bind كتمكن باش نزيد شي حاجة لواحد ل élément فالمثال لي عندنا غادي نخدمو ب v-bind:style لي كتمكن من إضافة style css ل élément html.
أول حاجة كنمشي ل main.js دائما ف data object كنزيد propriété سميتها divStyle ممكن تسميها لي بغيتي فيها لون خلفية أصفر و padding.
الكود ديال main.js بعد التعديل هو :

                                                        
                                                            new Vue({
    el : '#app',
    data : {
        message : "bonjour",
        name : 'samadi',
        show : false,
        divStyle : {
            'background-color':'#FFF333',
            'padding' : '10px'
        }
    }
});
                                                        
                                                    

5- directive v-bind ف vue js تتمة

من بعد ف index.html زدت ل div الرئيسي v-bind:style  لي عطيتها اسم ل propriété لي هو divStyle ولي كتزيد style css ل div.
فدبا يلا درت تحديث للمتصفح غادي نحصل على هاد النتيجة :




 الكود لي زدنا ف 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>
</head>
<body>
    <div id="app">
        <div class="container" v-bind:style="divStyle">
            <h3 class="text-center text-info">{{message}}</h3>
            <button class="btn btn-primary" v-on:click="show = true">click</button>
            <h3 class="text-center text-danger" v-if="show">{{message}} {{name}}</h3>
            <h3 class="text-center text-danger" v-else>au revoir.</h3>
        </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....