Хөтөч дээр ажилладаг програмын чухал хэсэг бол хуудасны хэвжүүлэлт байдаг гэдгийг бүгд мэднэ. Хуудасны харагдах хэлбэр, өнгөний зөв сонголт нь таны програмыг бусдаас ялгаруулан харагдуулах нэг гол хүчин зүйл гэдгийг санаарай.

Vue -гийн компонентод хэвүүдийг /css style/ яаж ашиглах талаар үзье. Тухайлбал компонентийн style хэсгийг хэрхэн ашиглах тухай юм. Үүний тулд төслийн компонентуудийн кодыг доорх байдлаар хураангуйлая.
App.vue файл.

<template>
  <div>
    <app-counter></app-counter>
    <app-car></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

Жич: Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжин програмчлалын хэлүүдийн рейтенгд нилээд дээгүүр байранд орж ирэх болсон. Иймээс дэлхийн чиг хандлагаас хоцрохгүйн тулд хэлийг судлан суралцахад манай сайт таныг дэмжин ажиллана. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

Аливаа зүйлийг сурахад хүнээс багагүй хүч, хөдөлмөр шаардана. Манай хүмүүс яаж хурдан сурах, яаж амар хийх талаар их асуудаг. Хурдан сурах нь тухайн хүнээс л хамаарана. Хүн бол толгой, тархи, санаа бодлыг нь ольчихдог машин техник биш гэдгийг л ойлгоорой. Суралцахад тэвчээр, тогтмол үзэх, чин хүсэл зориг байх хэрэгтэй. Тэгэхгүй бол сайн үр дүнд найдах бараг хэрэггүй. Сайтын хичээлүүд практик ашиглалтад түлхүү анхаарсан тул шууд ашиглах эсхүл гэрын авлаг байдлаар ашиглахад зориулагдсан. 

Энэ удаад Миксин /Mixin/ гэж юу болох, ямар хэрэгтэй, түүнийг хэрхэн ашиглахыг авч үзнэ. Үүний тулд Жагсаалтыг шүүх хичээлийн жишээнд өөрчлөлтийг хийн өргөжүүлье. Төслийн components хавтаст List.vue нэрээр

<template>
  <h1>List</h1>
</template>

<script>
export default {
  
}
</script>

кодтой компонентийг үүсгээд програмын эхлэлийн цэг main.js файлд компонентийг app-list нэрээр глобал байдлаар

import Vue from 'vue'
import App from './App.vue'
import List from './components/List.vue'

Vue.filter('uppercase', value => value.toUpperCase())

Vue.component('app-list', List)

new Vue({
  el: '#app',
  render: h => h(App),
})

бүртгүүлье.

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд

<template>
  <div class="container pt-2">
    <div class="form-group">
      <label for="name">Машины нэр</label>
      <input type="text" id="name" class="form-control" v-model.trim="carName">
    </div>
    <div class="form-group">
      <label for="year">Машины он</label>
      <input type="text" id="year" class="form-control" v-model.number="carYear">
    </div>
    <button class="btn btn-success" @click="createCar">Машин үүсгэх</button>    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        carName: '',
        carYear: 2020
      }
    },
    methods: {
      createCar () {
        console.log('Машин үүсгэх')
      }
    }
   }
</script>

кодыг оруулан өгье.

Програмийн хэрэглэгч талын интерфейсийг css -ээр хэвжүүлэн ашиглахад эвтэйхэн, ойлгомжтой болгодог. Иймээс энэ хичээлээс react компонентийн элементүүдийг хэрхэн хэвжүүлэх талаар авч үзье. Манай төслийн интерфейс

зурагт үзүүлсэн хэлбэртэй болоод байгаа.