jQuery në Vue.js dom manipulim me shembuj

E di që lëvizja në një kornizë si Vue.js mund të jetë e frikshme. Më pëlqen shumë jQuery, sintaksa është kaq e lehtë për t'u mësuar dhe lexuar, gjë që e bën të dobishëm për çdo zhvillues që ta marrë atë shpejt dhe të zhvillohet.

Çështja kryesore me të është, pasi një faqe interneti fillon të ketë shumë manipulime, ajo bëhet e çrregullt shumë shpejt dhe mbajtja e gjendjes së faqes në internet bëhet shumë e ndërlikuar.

Vue.js e ndihmon shumë këtë pasi është i drejtuar nga të dhënat, kështu që i jep projektit shumë strukturë dhe e bën atë që dom të reagojë bazuar në ndryshimet e të dhënave në vend që të zgjedhë elementët HTML dhe të përditësohet vetë.

Një tjetër plus i madh për të zgjedhur Vue.js është se është shumë e lehtë për t'u mësuar. Në përvojën time, është korniza më e lehtë Javascript për të mësuar. E njëjta gjë ishte për mua kur doli jQuery!

Unë do të supozoj se keni disa njohuri për Vue.js, nëse jo, do t'ju rekomandoja të lexoni udhëzuesin në "faqen e internetit të Vue". Është shumë e lehtë për t'u ndjekur.

Këtu janë disa shembuj të thjeshtë të asaj që mund të bëni me Vue.js kur luani me DOM:

1. Fshehja / Shfaqja e elementeve

Më poshtë kur klikohet butoni, duam që ai të ndërrojë elementin <span>.

jQuery:

<button id="toggle-btn">Show/Hide</button>
<span id="here">
    I'm here
</span>
    
$(function() {
$('#toggle-btn').click(function(){
    $('#here').toggle();
  });
});

Vue:

<template>
  <div>
      <button @click="toggle">Show/Hide</button>
      <span v-show="show">I'm here</span>
  </div>
</template>
<script>
export default {
  name: 'toggle',
   data: function () {
    return {
      show: true
    };
   },
   methods: {
     toggle() {
       this.show = !this.show;
     }
   }
}
</script>

Ne duhet të vendosim veçorinë e të dhënave "show" në të kundërtën e asaj që ishte. v-show në elementin span do të fshihet/shfaqet automatikisht kur të ndryshojë vetia e shfaqjes! E ftohtë, e drejtë.

2. Çaktivizimi i kushtëzuar

Këtu duam që butoni të çaktivizohet nëse përdoruesi ka vendosur një moshë nën 18 vjeç.

jQuery:

<div>
  <input id="age" type="number" placeholder="Age" />
  <button disabled="true" id="btn" onclick="alert('Buy stuff')">
      Buy stuff
  </button>
</div>
<script>
  $(function() {
  
    $('#age').on('input', function() {
        const age = parseInt($(this).val());
        if (age >= 18) {
          $("#btn").removeAttr("disabled");
        } else {
           $("#btn").attr("disabled", true);
        }
    });
  });
</script>

Vue:

<template>
  <div>
      <input v-model.number="age" type="number" placeholder="Age" />
      <button :disabled="underAge" id="btn" onclick="alert('Buy stuff')">Buy stuff</button>
  </div>
</template>
<script>
export default {
  name: 'conditional-disabling',
   data: function () {
    return {
      age: null
    };
   },
  computed: {
    underAge: function () {
      return this.age < 18;
    }
  }
}
</script>

Këtu po përdor një veti të llogaritur. Vetitë e llogaritura janë kaq të fuqishme në Vue, ato mund të zvogëlojnë numrin e rreshtave të kodit dhe të ndihmojnë me lexueshmërinë. Sa herë që përditësohen të dhënat e "moshës", vetia e llogaritur "UnderMoge" do të përditësohet automatikisht, si magji!

Nëse dëshironi të lexoni më shumë rreth pajisjeve të llogaritura, unë kam shkruar një artikull për të.

Në elementin e butonit, do të vini re se atributi i çaktivizuar është i prefiksuar me një dy pika (:), kjo ju lejon të lidhni informacionin e të dhënave vue.js me të. Kjo mund të jetë çdo gjë nga sa vijon:

• Të dhënat
• Rekuizita (të dhëna nga prindi)
• Rekuizita të llogaritura
• Metodat

3. Looping dhe shtimi në lista

Le të bëjmë një listë të vogël detyrash dhe të tregojmë se sa e lehtë është në Vue.js. Përdoruesi thjesht mund të shkruajë një artikull në një kuti teksti dhe të klikojë butonin "Shto". Kjo më pas do të shtojë një element <li> në <ul>.

jQuery:

<button id="btn">Add</button>
  
 <ul id="todo-list">
  </ul>
  
<script>
  $(function() {
  
     $('#btn').click(function () {
        const item = $('#item').val();
        $("#todo-list").append('<li>' + item + '</li>');
        
         // Reset Value
        $('#item').val("");
     });
  });
</script>

Vue:

<template>
  <div>
      <input v-model="item" type="text" placeholder="item" />
      <button @click="addItem">Add</button>
      <ul>
         <li v-for="todo in todos" :key="todo">
           {{ todo }}
         </li>
      </ul>
  </div>
</template>
<script>
export default {
  name: 'to-do',
   data: function () {
    return {
      todos: [],
      item: ""
    };
   },
   methods: {
     addItem() {
       this.todos.push(this.item);
       this.item = "";
     }
   }
}
</script>

Cfare po ndodh? Nëse shikoni elementin <li>, do të vini re një atribut v-for. Kjo thjesht do të qarkullojë mbi grupin dhe do të vazhdojë të krijojë <li>elemente për numrin e artikujve në grup, kështu që gjithçka që na duhet është të shtojmë artikuj në grupin todos.

Kjo ndodh kur klikohet butoni. Ne kemi bashkangjitur metodën "addItem" duke përdorur @click, më pas thjesht shtyjmë të dhënat e artikullit në grup.

Kllapat kaçurrelë {{todo}}, thjesht do të shfaqin artikullin e fshirë si tekst të thjeshtë. Sa e lehtë është kjo!

Le të themi, kur faqja ngarkohet, ne tashmë kemi disa punë që duam të shfaqim. Kjo do të kërkonte vetëm një ndryshim të vogël në Vue. Vue ka konceptin e "ngjarjeve të ciklit jetësor".

mounted()  {
      this.todos.push("Pick up dry cleaning", "Water the plants");
  }

Kjo eshte! Asnjë ndryshim tjetër. Ju mund ta zëvendësoni këtë listë të koduar me një telefonatë API.

3.1 Lista e objekteve të grupit

Ju gjithashtu mund të përdorni v-for, për një grup objektesh. Le të krijojmë një listë të vendeve.

<template>
  <div>
      <select>
        <option  v-for="country in countries" :value="country.id" :key="country.id">
          {{ country.name }}
        </option>
      </select>
  </div>
</template>
<script>
export default {
  name: 'countries',
   data: function () {
    return {
      countries:[]
    };
   },
  mounted()  {
      this.countries.push({ id: 1, name: "UK"});
      this.countries.push({ id: 2, name: "USA"});
  }
}
</script>

Ngjashëm me listën e detyrave, ne po krijojmë elementet <option> brenda <select>. Siç e shihni për atributin e vlerës që po përdorim country:id dhe për tekstin, ne po përdorim country.name.

:key është një gjë Vue. Nëse keni një objekt grupi, Vue rekomandon përdorimin e atributit kyç pasi ndihmon me performancën. Më shumë në "faqen e internetit Vue" nëse dëshironi të mësoni më shumë rreth saj.

4. CSS e kushtëzuar

Le të krijojmë një formë të thjeshtë, e cila kur kontrolloni ose hiqni një kuti kontrolli, ndryshon ngjyrën e emrit të një përdoruesi, duke përdorur një klasë CSS.

jQuery:

<style>
  .inactive {
    color: red;
  }
  .active {
    color: green;
  }
</style>
  
<span class="active" id="user">David Smith</span>
<input id="activecb" type="checkbox" checked="true" />
  
<script>
  $(function() {
$('#activecb').click(function () {
     const isActive =  $('#activecb').is(":checked");
     if (isActive) {
        $('#user').addClass('active');
        $('#user').removeClass('inactive');
     } else {
        $('#user').removeClass('active');
        $('#user').addClass('inactive');
     }
   });
});
</script>

Vue:

<template>
  <div>
      <span :class="userClass">David Smith</span>
      <input type="checkbox" v-model="active" />
  </div>
</template>
<script>
export default {
  name: 'user-css',
   data: function () {
    return {
      active: true
    };
   },
   computed: {
     userClass: function() {
       return this.active ? "active" : "inactive";
     }
   }
}
</script>
<style scoped>
  .inactive {
      color: red;
    }
    .active {
      color: green;
    }
</style>

Ashtu si shembulli me aftësi të kufizuara, unë kam lidhur një mbështetëse të llogaritur me elementin <span> duke përdorur :class. Kjo ndryshon çdo herë sepse është duke pritur për ndryshime në të dhënat aktive.

konkluzioni

Shpresojmë, ky artikull ju jep disa ide se pse përdorimi i Vue.js mund të ndihmojë aplikacionin tuaj dhe se si bërja e faqes suaj të internetit të drejtuar nga të dhënat mund të ndihmojë manipulimet dhe lexueshmërinë tuaj të DOM.

Ky artikull sapo ka gërvishtur sipërfaqen e asaj që mund të bëjë Vue.js. Shpresojmë, kjo mund t'ju japë një fillim të mirë në udhëtimin tuaj në Vue.