Úvod do VueJs pro začátečníky-2

Toto je pokračování mého Intro k VueJs-1 Zde budu hovořit o Vite, metodách, počítaném majetku a pozorovatelích.
1. Úvod do Viteu
Pokud používáte CDN, myslím, že je čas začít používat Vite
Chcete-li nainstalovat Vite
npm init @vitejs/app my-vue-app -- --template vue

Vidíte, když to zadáme do CLI, dává nám to spoustu možností. Můžete to použít i pro React. Právě teď vyberete Vue
Po výběru Vue uvidíte toto

Poté musíme cd do adresáře našeho projektu a spustit npm install a poté npm spustit dev

Pokud klikneme na odkaz Síť, budeme přesměrováni na stránku v prohlížeči

Pokud toto vidíte, máte nastaveno Vite. Vřele bych to doporučil nad CDN, ale zatím v žádném případě nenahrazuje Vue Cli

Pokud chceme něco tisknout znovu a znovu jako
Po instalaci Vite přejdete na App.vue. odstranit vše a pouze zkopírovat a vložit toto

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

Takto by mělo vypadat vaše označení a když používáte Vue v kódu Vs, doporučil bych používat Vue VS CodeSnippets od sarah Drasner. Pomůže vám to zvýšit vaši produktivitu

2. Vypočítaná vlastnost
Pokud musíte něco tisknout znovu a znovu, měli bychom použít vypočítanou vlastnost

<template>
<div>
{{randomMath}}
{{randomMath}}
{{randomMath}}
{{randomMath}}

</div>

</template>

<script>
export default {
  data(){
    return{

    }
  },
  computed:{
    randomMath(){
       return  Math.random()+10
    }
  },
  methods:{
    clickbtn(){
      console.log("Click event");
    }
  }

}

</script>

<style>

</style>


Mohli jsme napsat něco takového

<template>
<div>
Math.random()+10
Math.random()+10
Math.random()+10
Math.random()+10

</div>

</template>

Ale s vypočítanou vlastností je náš kód mnohem více znovupoužitelný. Pokud máme napsat 10 místo 20, musíme to napsat 4krát v Computed, stačí přejít na randomNumber(){
return Math.random()+20;
}
3.Metody
Pokud chceme spustit nějakou událost, obvykle používáme metody

<template>
<div>
{{randomMath}}
{{randomMath}}
{{randomMath}}
{{randomMath}}
<button @click="clickbtn">Click Me</button>
</div>

</template>

<script>
export default {
  data(){
    return{

    }
  },
  computed:{
    randomMath(){
       return  Math.random()+10
    }
  },
  methods:{
    clickbtn(){
      console.log("Click event");
    }
  }

}

</script>

<style>

</style>



Zde jsme přidali klikací tlačítko, pokud klikneme na tlačítko myší a zaškrtneme konzolu, dá nám kliknutou hodnotu.
Existují i ​​další události, jako je dvojité kliknutí, odchod myši s moseroverem atd.

  1. Rozdíl mezi metodou a vypočtenými vlastnostmi

Vypočítané vlastnosti se ukládají do mezipaměti na základě jejich reaktivních závislostí a vypočítaná vlastnost se změní pouze v případě, že se změní závislost. Na druhou stranu metoda běží, když dojde k aktualizaci a není uložena v mezipaměti.
Zde vezmeme vypočítanou vlastnost a metodu vracející Math.random()+10

<template>
<div>
  <div style="flex">
  <div>
    Computed property
    <div>{{randomMath}}</div>
    <div>{{randomMath}}</div>
    <div>{{randomMath}}</div>
    <div>{{randomMath}}</div>
  </div>
  </div>
 <div style="flex">
   Methods
   <div>
    {{methodNumber()}}
   </div>
   <div>
    {{methodNumber()}}
   </div>
   <div>
    {{methodNumber()}}
   </div>
   <div>
    {{methodNumber()}}
   </div>


 </div>



Nyní se podívejme na výstup


Zde vidíme, že 4krát vyvolání metody nám poskytlo 4 různé výsledky, zatímco v případě vypočítaných vlastností jsou výsledky stejné. V případě metod se vždy vygeneruje nové číslo, ale v případě počítané vlastnosti se uloží do mezipaměti. Pokud stránku obnovíme, uvidíme 4 různé hodnoty metod, ale hodnoty počítaných budou stejné.
5. Vlastnost sledování
Sleduje změny ve vlastnostech dat a vypočítaných vlastnostech a v důsledku této změny se spustí nějaký kód

<template>
<div>
  <div style="flex">
  <div>
    <button @click="volume+=2">Increase</button>
    <button @click="volume-=2">Decrease</button>
    Volume-{{volume}}
   {{alertOne}}

  </div>
  </div>
 <div style="flex">


 </div>



</div>

</template>

<script>
export default {
  data(){
    return{
            volume:0
    }
  },

  watch:{
    volume(newValue,oldValue){
      if(newValue===16 && newValue>oldValue)
      {
        alert('Very high volume can be damaging to ears')
      }
    }
  }

}

</script>

<style>

</style>

Zde vidíme, že pozorujeme objem v reálném čase a porovnáváme starou hodnotu a novou hodnotu, pokud objem dosáhne 16, je dáno varování, že je škodlivý
Nyní tedy přichází otázka, zda můžeme použít vlastnost Computed místo watch, ale nedoporučujeme to Měli bychom použít computed, když chceme tisknout stejnou věc opakovaně, a použít hodinky, když sledujeme něco v reálném čase, jako je příklad zobrazený výše, nebo možná ověření formuláře, jako když hodnota hesla je nižší.
Toto tedy uzavírá Vue-Js část 2 v další části, kde začneme s některými částmi zpracování formulářů