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


فهاد الدرس السابع من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا des directives آخرين لي ماشفناهم من قبل ولي غادي يمكنونا اننا نعرضوا محتوى عبارة عن html و ايضا غادي يمكنونا من إضافة صور لل projet ديالنا.


1- عرض المحتوى لي عبارة عن html باستعمال vue js

فباش نعرض واحد ل contenu html باستعمال vue js كنمشي ل main.js كنزيد واحد propriété سميتها content ف data objet وعطيتها h3  كقيمة.

الكود لي زدنا ف main.js هو :

                                //main.js

new Vue({
    el : '#app',
    data : {
        content : '<h3>darija coding</h3>'
    },
});
                            

2- عرض المحتوى لي عبارة عن html باستعمال vue js تتمة

من بعد غادي نمشي ل index.html فباش نعرض ل h3 لي زدنا كنزيد div كنعطيها v-html لي كتمكن من عرض المحتوى لي عبارة عن html منبعد داخل directive كنعطي اسم ل propriété لي زدنا ف data objet ولي هي content.

فيلا درنا actualiser ل index.html كنحصل على هاد النتيجة :



الكود لي زدنا ف 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">
            <div v-html="content"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- عرض صور باستعمال vue js

فباش نعرض صورة باستعمال vue js كنمشي ل main.js ف data objet كنزيد واحد propriété سميتها image  وعطيتها اسم الصورة كقيمة فمتنساش تزيد الصورة داخل dossier ديال ل projet ديالك.

الكود لي زدنا ف main.js هو :

                                //main.js 

new Vue({
    el : '#app',
    data : {
        content : '<h3>darija coding</h3>',
        image : 'bootstrap.jpg'
    },
});
                            

4- عرض صور باستعمال vue js تتمة

من بعد غادي نمشي ل index.html فباش نعرض الصورة لي زدنا كنزيد img كنعطيها v-bind:src لي كتمكن من إضافة الصورة لي بغيت ل src ديال ل image منبعد داخل  directive كنعطي اسم ل propriété لي زدنا ف data objet ولي هي image.

فيلا درنا actualiser ل 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">
            <div v-html="content"></div>
            <img v-bind:src="image" alt="">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>