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


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