Хичээлээр өөрийн контролийг үүсгэн түүнийг v-model директивт хэрхэн тавин өгөхийг сурцгаая. Үүний тулд төслийн components хавтаст Onoff нэртэй

<template>  
  <div>
    <button class="on">On</button>
    <button class="off">Off</button>
  </div>    
</template>

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

<style scoped>
  button {
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    margin-right: 20px;
    outline: none;
  }

  button:active {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
  }

  .on.active {
    background: green;
    color: #fff;
  }

  .off.active {
    background: red;
    color: #fff;
  }
</style>

код бүхий компонентийг үүсгээд түүнийг app компонентод бүртгүүлээд шаблонд

<template>
  <div>
    <h2>Form inputs</h2> 

    <app-onoff></app-onoff>
  </div>
</template>

<script>
import Onoff from '@/components/Onoff'
export default {
  data () {
    return {
    }
  },
  components: {
    appOnoff: Onoff
  }
}
</script>

үзүүлье.

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 болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжснөөр интернетэд сууриласан програм, сайтын хэрэглэгч талын интерфесийг javascript -ээр бүтээх хандлага давамгайлах болоод байгаа. Ялангуяа SPA буюу нэг хуудас аплликашн технологи маш эрчимтэй орон ирсэн. Энэ хандлага ирээдүйдээ ч нилээд олон жил байр сууриа алдахгүй болов уу. Иймээс програмчлалын чиглэлээр суралцаж байгаа болон ажиллаж буй залуучууд javascript хэлийг эзэмшсэн өөрийн ажлын хэрэгсэл болгохыг хичээнгүйлэн зөвлөе.  

Энэ хичээлд ES6 -д шинээр бий болсон бүтэц буюу сумаар тодорхойлогдох функцтэй танилцая. Энэ нь өмнө байсан функцуудын нэгэн адил функц ч гэсэн зарим нэгэн онцлогтойг жишээгээр харцгаая. Өмнөх хувилбарт функцийг

const original = function () {
    return 100;
};

console.log(original());

дээрх байдлаар function түлхүүр үгийг ашиглан зарладаг. Кодод 100 утгыг буцаах функцийг зарлаад түүнийг original тогтмолд олгоод дараа нь түүнийг консолд үзүүлэхээр дуудсан.