كيفاش نصاوب Note App ب Vuejs

imadbelasri Vuejs
VS

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس البسيط الهدف ديالنا ماشي Note App بل هو نزيدو نشوفو حوايج جداد ف Vuejs فيلا مكنتيش شفتي الدرس لي قبل من هدا شوفو باش تاخد معلومات إضافية على ل framework.


نظرة سريعة بالفيديو


1- الملف script.js

أول حاجة غادي تزيد مشروع جديد فين ما بغيتي و سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.html و style.css و script.js من بعد فتحو ف navigateur من بعد غادي تمشي للملف  script.js كنديرinstantiation  ديال ل objet من la classe Vue منبعد داخل l'objet كنعطي ل el لي هو element مول ل id app من بعد ف data كنديكلاري les variables لي عندي كاين جدول غادي يكونوا فيه les notes و note لي غادي تاخد القيمة لي دخل المستخدم فالحقل منبعد كاين l'objet methods عندي فيه les fonctions لي غادي نحتاج كاين addNote ولي ملي كنكليكي على  bouton ajouter كتزيد ل objet فالجدول notes لي كياخد الnote لي دخل المستخدم فالحقل منبعد كاين removeNote لي كتمسح note اختارها المستخدم باستخدام ل index ديالها الكود ديال الملف هو :

                                                    
                                                        new Vue({
    el: "#app",
    data: {
        notes: [],
        note: ''
    },
    methods: {
        addNote: function() {
            this.notes.push({ note: this.note });
            this.note = '';
        },
        removeNote: function(index) {
            this.notes.splice(index, 1);
        }
    }
});
                                                    
                                                

2- الملف index.html

فالملف index.php غادي تزيد فيه الكود لي فيه الفورم لي كتمكن المستخدم باش يدخل note فف Vuejs كنحدد ال partie لي غادي نتحكم فيها ب Vuejs بإعطاءها ال id app وهو لي هضرنا عليه فالملف script.js فهنا عطيناه ل div لي عندها ل class row منبعد عندي الفورم لي كنحدد ملي يديرلها المستخدم submit كنمنعها باش تدير refresh ب  directive v-on:submit.prevent من بعد عندي input text لي كنخدم بل
v-model  باش كنربطها ب variable note لي زدنا ف script.js منبعد عندي  bouton ملي كنكليكي عليها كتنفد fonction addNote ملي كيتزادو les notes كن tester ب v-if يلا كان الجدول notes عامر كنخدم v-for لي بحالها بحال foreach ف php باش كنعرض les notes ديالي ف liste وعندي حدا كل note bouton لي كتمكن من مسحها ملي كنضغط عليها كتاخد ل index ديال ال note وكتصيفطو لل fonction removeNote لي كتمسحها و منساش tag transition لي كتمكني باش نعطي للزيادة والمسح ديال les notes واحد l'effet de transition ومنساش v-else لي يلا مكنت عندي حتى شي note كنعرض ميساج بلي حتى شي note مكاينة الكود ديال الملف هو :

                                                        
                                                            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#">Vuejs-Note</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Accueil <span class="sr-only"></span></a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="row" id="app">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3">
                            <h3 class="text-info text-center">Notebook</h3>
                            <form class="form" style="padding:10px;" v-on:submit.prevent>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-10">
                                            <input type="text" placeholder="Entrer votre note" v-model="note" class="form-control">
                                        </div>
                                        <div class="col-md-2">
                                            <button class="btn btn-success btn-md" v-on:click="addNote">+</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="row">
                                <div class="col-md-12">
                                    <div v-if="notes.length">
                                        <transition-group name="list" tag="ul">
                                            <li v-for="(nt,index) in notes" class="list-group-item" v-bind:key="nt">{{nt.note}}<button class="btn btn-danger btn-xs pull-right" v-on:click="removeNote(index)"><span class="fa fa-trash"></span></button></li>
                                        </transition-group>
                                    </div>
                                    <div v-else>
                                        <p class="text-info">Aucun note trouvée.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="script.js"></script>
</body>

</html>
                                                        
                                                    

3- الملف style.css

فيه غادي يكونوا les styles ديالنا لي غادي نضيفوا بهم تغييرات على design ديال la page ديالنا الكود ديال الملف هو:

                                                        
                                                            body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.panel {
    background: beige;
}

#result {
    height: 40px;
    width: 150px;
    background: #8D8D81;
    color: #ffffff;
    padding: 10px;
    border-radius: 2px;
}

.btn {
    padding-left: 10px;
    padding-right: 10px;
}

.list-enter-active,
.list-leave-active {
    transition: all 1s;
}

.list-enter,
.list-leave-to
/* .list-leave-active below version 2.1.8 */

{
    opacity: 0;
    transform: translateY(30px);
}
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...