Post обьектыг үүсгэх

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул 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>

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

Материалыг бүртгэлтэй хэрэглэгч үзнэ.

how_to_regБүртгүүлэх

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

  Нээгдсэн тоо: 529 Нийтийн

Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон react дээр төслийг үүсгэе. Төслөө бид үе шаттайгаар өргөжүүлэх бөгөөд эхний ээлжинд компонент хэсэгт сурсан зүйлээ бататган авах болно. Цаашид судлах зүйлүүдийг төсөлдөө нэмэх байдлаар явах юм. Өөрөөр хэлбэл энэ төсөл манай туршилтын талбар болно.

  Нээгдсэн тоо: 431 Нийтийн

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

  Нээгдсэн тоо: 1009 Нийтийн

Бодит ажилд нэг чиглүүлэгчээр шилжсэн хуудаснаас тухайн чиглүүлэгчид агуулагдах давхар чиглүүлэгчээр дамжин шинэ хуудас нээх хэрэгцээ их гардаг. Жишээ нь машины мэдээллийг харуулж буй Car компонентийн үзүүлж буй хуудаснаас тухайн машины талаар илүү дэлгэрэнгүй мэдээллийг харуулах хуудаст шилжих хэрэгтэй болсон гэе. Үүнийг VueJs -д давхар чиглүүлэгчийг ашиглан хийдэг. Car компонентоос өөр хуудаст шилжилт хийх гэж байгаа тул түүний шаблонд

<template>
  <div>
    <h1>Car id {{ id }}</h1>
    <button class="btn btn-sm btn-primary mb-2" @click="backToCars">Back</button>
    <br>
    <button class="btn btn-info mt-2">Full info</button>
  </div>
</template>

дахин нэг товчийг нэмэн өгье.

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

  Нээгдсэн тоо: 827 Бүртгүүлэх

Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 197

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 279

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 236

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 342

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 385

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 401

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 466

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 525

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 561

 
Энэ долоо хоногт

Кубын ирмэг a. Дээд талын төвийг суурийн оройтой холбоход үүсэх пирамидийн бүтэн гадаргуун талбайг ол.

Нээгдсэн тоо : 1491

 

A=(-2; 3; 5), B=(4; -1; 7) векторууд өгөгджээ. 3A-2B векторын координатуудын нийлбэрийг ол.

Нээгдсэн тоо : 1073

 

Утасны лавлах номыг дэлгэн 7 цифрээс бүрдсэн дугаарыг санамсаргүйгээр байдлаар сонгоход дугаарын сүүлийн дөрвөн цифрүүд ижил байх хувилбарын тоог ол.

Нээгдсэн тоо : 302