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Бүртгүүлэх

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

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

Сүүлийн жилүүдэд Angular, React, Vue гэх мэт Javascript сангуудын хөгжлөөр интернет програмчлалд динамик ажиллагаагтай сайт боловсруулах шинэ давалгаа үүссэн. Энэ нийтлэлээр Angular гэж юу вэ, юунд хэрэгтэй, ямар асуудлыг шийдэхэд бидэнд туслахыг тодруулъя. Angular бол Google компани боловсруулсан нээлттэй эх код бүхий JavaScript сан буюу фреймворк. Angular фреймворкийг ашиглан Single page application / нэг хуудас програм/ гэж нэрлэдэг динамик програмыг бүтээдэг. Энгийнээр хэлбэл Single page application гэдэг нь интернет дэх ердийн сайт боловч сайт ердөө нэг л хуудсаас бүрдэнэ. Энэ бол техникийн талаасаа ойлголт. Single page application хэрхэн ажилладаг, ердийн сайтуудаас ямар давуу талтайг Angular -ын албан ёсны веб сайтаас https://angular.io харж болно.

  Нээгдсэн тоо: 423 Төлбөртэй

Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

  Нээгдсэн тоо: 3706 Төлбөртэй

DOM (Document Object Model) буюу хуудасны обьектын модел гэдгийг хуудсыг тегүүдийн мод хэлбэрээр зохион байгуулах гэж ойлгоход болно. DOM модельд хуудастай хэрхэн ажиллахыг ойлгох явдал бол Javascript программчлалын үндсэн суурь байдаг. Javascript хэлний ихэнх үйлдлүүд HTML хуудастай голлон ажилладаг. Иймд Javascript -ын программ веб хуудастай ажиллана гэдгийг DOM той ажиллах гэж л ойлгоорой. Хуудастай ажиллах ямарч үйлдэл DOM -ын тохирох аргыг л дуудах юм.
DOM-моделоор хуудсыг үелэл гэж ойлгоно. HTML тэг болгон тусдаа зангилаа буюу мөчир элементийг үүсгэдэг. Үүнийг жишээн дээр авч үзвэл ойлгомжтой.

Энгийн DOM

Эхлээд доорх хуудасны DOM -ыг авч үзье.

<html>
    <head>
        <title>Гарчиг</title>
    </head>
    <body>
        Хуудасны бие
    </body>
</html>

Хамгийн гадна талын тег бол <html> тул түүнээс мод ургаж эхэлнэ. <html> -ийн дотор <head>, <body> гэсэн хоёр зангилаа байгаа тул эдгээр нь дараагийн зангилаа буюу <html> -ийн мөчир болно.

  Нээгдсэн тоо: 304 Төлбөртэй

Сайтын чиглүүлэгчид байхгүй эсхүл хуудас олдоогүй гэх мэтийн тохиолдолд хэрэглэгчдийг тохирох хуудаст шилжүүлэх хэрэгтэй болдог. Үүнийг redirect буюу шилжүүлэлт гэдэг. Vuejs -ийн шилжүүлэлтийн механизм хэрхэн ажилладагийг энэ хичээлээр авч үзье. Үүний тулд програмийн чиглүүлэгчдийн тодорхойлолтод

...
export default new VueRouter({
  routes: [
    {
      path: '',  
      component: Home
    },
    ...
    {
      path: '/none',
      redirect: '/cars'
    }
  ],
  ...
})

none гэсэн чиглүүлэгчийг үүсгээд түүнд хандвал cars хуудаст шилжүүлнэ гэдгийг redirect: '/cars' гэж заан өгье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

функцийн уламжлалыг тооц.

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

 

утгыг ол.

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

 

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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