Сүүлийн жилүүдэд React, Angular, Vue зэрэг javascript фреймворкууд веб програмчлалд хүчтэй түрэн орж ирсэн. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг тул хэрэглэгч талын хуудас дангаараа бие даан ажиллах нэг хуудаст аппликашн буюу SPA болсноор сервер болон сүлжээний ачааллыг бууруулах, хэрэглэгчийн ажиллах орчинг маш эвтэйхэн болгох боломжийг бүрдүүлэн өгдөг. Энэ удаад жагсаалтыг шүүх шүүлтүүрийг хэрхэн хэрэгжүүлэхийг

<template>
  <div>
      <h2>{{ title }}</h2> 
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(name, index) of names" :key="index">{{ name }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello I am Vue!',
      searchName: '',
      names: ['Баатар', 'Болд', 'Цэцгээ', 'Алимаа']
    }
  }
}
</script>

кодоор авч үзье.

Сайтад тавигдаж буй Vue фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

class түлхүүр үгээр үүсгэгддэг react компонентод байдаг бас нэгэн онцлогийг авч үзье. Өмнөх хичээлүүдэд бид App компонентийн төлвийг state обьектоор тодорхойлон ашигласан. react компонентийн төлвийг өөрөөр тодорхойлж болдогийг мэдэж байх хэрэгтэй. Javascript -ийн class түлхүүр үгээр үүсгэсэн класс байгуулагч /constructor/ гэсэн тусгай аргатай байдаг.

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="radio"> instagram
    </label>
    <label>
      <input type="radio"> twitter
    </label>    
    <label>
      <input type="radio"> facebook
    </label>    

  </div>
</template>

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

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал