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


فهاد الدرس التاسع من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد لحاجة لي هي مهمة ف vue js لي هي ل computed property لي هي بحال ل methods لي شفنا قبل غير الفرق هو أن les fonctions داخل ل computed كيتنفذوا اتوماتيكيا.


1- إضافة ل compueted property ل main.js

فغادي نمشي ل main.js غادي نحتفظ بنفس les propriétés لي كانوا عندي ف الدرس السابق لي هما name و age.
غادي نزيد computed منبعد data داخل ل computed غادي نزيد fonction لي سميتها getNameAge لي كت retourner name & age.
الكود لي زدنا هو :

                                //main.js 

new Vue({
    el : '#app',
    data : {
        name : ' ',
        age : ' '
    },
    computed : {
        getNameAge(){
            return this.name + this.age;
        }
    }
});
                            

2- تنفيذ ل fonction لي زدت ف computed

فباش ن afficher name و age غادي نرجع ل index.html غادي نزيد فورم فيها جوج دالحقول كل واحد مرتبط ب propriété لي هما name و age.
منبعد كنفذ ل fonction بهاد الطريقة  {{getNameAge}} ولي فاش كنبدا نكتب داخل الحقل كنشوف الإسم والسن كيتعرضوا فنفس الوقت كيف كنشوف الصورة :
 

الكود لي زدنا ف index.html هو :

                                //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">
            <input type = "text" v-model = "name" /> <br/><br/>
            <input type = "text" v-model = "age"/> <br/><br/>
            <h1>{{getNameAge}}</h1>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- إضافة ل get & set

فل get & set كيمكنوني انني نسترجع واحد القيمة وايضا نغيرها فداخل ل fonction getNameAge لي غادي نحولوها ل objet فيه جوج ديال les fonctions.
كنزيد ل fonction get لي فقط كترجع  name & age وكنزيد set لي كتاخد  name لي دخلنا فالحقل وكتعطيه ل propriété name ونفس الشي بالنسبة ل age.
فدبا ندخل القيم فالحقول غادي نحصل على نفس النتيجة السابقة.
الكود لي زدنا ف main.js :


                                new Vue({
    el : '#app',
    data : {
        name : 'samadi',
        age : 30
    },
    computed : {
        getNameAge : {
            get(){
               return this.name + ' ' + this.age;
            },
            set(name,age){
                this.name = name;
                this.age =  age;
            }
        }
    }
});