Vue Js cheat sheet, written in moroccan darija for moroccans, starting to use Vue Js, i wroth that as a note when i started learning Vue Js.

Vue Js cheat sheet.js

/********************************************
Vue Js Cheat Sheet 
Adil Zakarya, MA
/*********************************************/

// in HTML 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue JS-->


/*
ila bghina n9ado Vue App

el          :   id dyal di li fiha app
data        :   collection dyal variables
methods     :   L functions li kikhedmo fdik app
Computed    :   b7al methods walakin kankhedmo b return dyal function
watch    :   Katb9a 7adya chi variable ila tbedel Kadir function b7al chi trigger

aya 7aja kadiroha west dak div li fiha app daba
*/

<div id="app">

</div>



var app = new Vue({
    
    el : '#app',
    data:{
        'MyVar' : '',
        BoolVar :true,
        messages : ["Adil","Ali","Nada"]
        },
    methods:{
        ExFunc : function(){}
        },
    computed:{
            ExComp : function(){}        
        },
    watch:{
        MyVar : function(){}
    }
    
    }

)

/*********************************************/

// Bach nbeyno chi variable kandiro smito west {{}}
    <h1>{{MyVar}}</h1>

// ndiro binding l HTML m3a chi Variable finma tbedel 9ma dyalo f var tbedel f HTML element
    <h1 v-model="MyVar"></h1>

// bach n3ti lclass wla l ID Smiya li fch var ytbedel katkhdem m3a src dyal image 
    <h1 v-bind:id ="MyVar"></h1>

/*********************************************/
// keyboard ShortCut
    // hna Two Btns Alt o enter
    <input v-on:keyup.alt.enter="ExFunc" ></input>
    
    // hna one Btnenter
    <input v-on:keyup.enter="ExFunc" ></input>

/*********************************************/
                /*Class Binding*/                
                
// with a variable
    <h1 v-bind:id ="MyVar"></h1>

// chi element n3tiwh jouj dyal class ila kanet BoolVar true ydir lowal si nn ydir tani
    <h1 :class ="{Class1:BoolVar,Class2:!BoolVar}"></h1>

// array of class 1 o 2 ghaydaro o 3 o 4 wa7ed fihom
    <h1 :class ="[Class1, Class2, {Class3:BoolVar,Class4:!BoolVar}]"></h1>

/*********************************************/
                /*Style Binding*/

    <div :style="[testObj2, testObj, {'font-size': size + 'px'}]">test text</div>

/*********************************************/
                /*Text Directiv*/

// fblasst mankteb {{MyVar}} bach tban Ndir Hadi bach mit3aredch liya m3a framworks b7al laravel
    <div v-text="MyVar"> </div>          

/*********************************************/
                /*Text Directiv*/

// fblasst mankteb {{MyVar}} bach tban Ndir Hadi bach mit3aredch liya m3a framworks b7al laravel
    <div v-text="MyVar"> </div>          
                

/*********************************************/
//n3awd chi 7aja 5 times 
    <h1 v-for="msg in parseInt(var)" >Bla bla</h1>
// Bach n3awdo chi 7aja Kayna f array
    <h1 v-for="msg in messages" >{{msg}}</h1>
// ila bghina ndiro index
    <h4 v-for="(msg,index,key) in messages" >{{key}} - {{msg}}</h4>
    
// ila kan BoolVar True tban 
    <div v-if="BoolVar"> </div> 
    <div v-else-if="BoolVar"> </div> 
    <div v-else> </div> 
    
// ymken ndemjo for o if 
<div v-for="item in list2" v-if="item.age > 10">


// b7al v if ghi v-if kat7ayadha fkhetra o v-show ghi katkhebiha ila kan true Katben kan false katkon hiden 
    <div v-show="BoolVar"> </div>   
    
    
//filtring an array

function fun(){
    return this.items.filter(function(item){
    return item //condition li bghit ndir 3lih
    });
}


/*********************************************/
                /*storage local*/

var todos_storage = {
    fetch: function(){
      var todos = JSON.parse( localStorage.getItem('todos') || '[]');
      return todos;
    },
    save: function(todos){
      localStorage.setItem('todos', JSON.stringify(todos) );
      console.log("saved")
    }
  }


/*********************************************/
                /*component*/

Vue.component('mycomp', {
    props: ['message'],
    template: `
 <div>
 {{message}}
 </div>
`,
    data: function () {
        return {
            count: 0
        }
    }
})