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


فهاد الدرس الثالت من دورة vuejs للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا المزيد من les directives من بعد غادي نشوفوا كيفاش نربطو القيم لي كندخلو فالفورم مع les variables لي كنزيدو فل data objet.


1- DIRECTIVE V-BIND:CLASS ف VUE JS

فغادي نشوفوا  v-bind:class منبعد ما شفنا v-bind-style ف v-bind:class كتمكن باش نزيد class لواحد ل élément html.
غادي نمشي ل main.js غادي نزيد propriété ف data objet سميناها objet عطيتها true.
الكود لي زدنا ف main.js هو :

                                /main.js

new Vue({
    el : '#app',
    data : {
        message : 'bonjour',
        bg : true
    }
});
                            

2- DIRECTIVE V-BIND:CLASS ف VUE JS تتمة

منبعد ف index.html كنزيد class css سميتها bg عطيتها لون خلفية أزرق ف div الرئيسي كندير v-bind:class  و كنعطيها اسم la classe لي هو bg فكتعطيني هاد النتيجة :



فل class كتزاد محد bg لي ف data objet عندها true يلا درنا 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>
    <style>
        .bg{
            background-color:aquamarine;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container" v-bind:class="{bg:bg}">
            <h3 class="text-center text-info">{{message}}</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-MODEL ف VUE JS

ف v-model كتمكن باش نربط propriété ف data objet بحقل فالمثال لي عندنا زدنا propriété name خليناها خاوية.

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

                                //main.js

new Vue({
    el : '#app',
    data : {
        name : ''
    }
});
                            

4- DIRECTIVE V-MODEL ف VUE JS تتمة

منبعد ف index.html غادي نزيدو champ عطيناه v-model لي خدات لإسم ديال ل propriété name لي زدنا ف data objet.

فدبا ربطنا ما بين propriété name والحقل ديالنا فاي حاجة دخلتها فالحقل غادي تزاد ف 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">
                <label for="name">Nom*</label>
                <input type="text" name="name" v-model="name"class="form-control">
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                                

5- عرض القيمة المخزنة ف name

فباش نعرض القيمة لي دخلت فالحقل كيكفي باش نستعمل {{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">
                <label for="name">Nom*</label>
                <input type="text" name="name" v-model="name"class="form-control">
                {{name}}
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>