Радио товч

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

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Компонентыг бүртгүүлэх

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

Програмчлалын хэл сурах нь нилээд шургуу, тэсвэр, хатуужил шаардах ажил. Өнөө үед програмчлалын хэлүүд обьект хандлагат зарчмыг бараг бүгд нэвтрүүлсэн болохоор хэлүүд бичлэгийн хувьд их ижилхэн болсон.   Дээрээс нь програмчлалын суурь бүтцүүд бүх хэлний хувьд ижил байдаг тул зарим хүмүүс програмчлалын хэлийг сурахад амархан хөнгөн гэж ярьж тайлбарлаж байдаг. Энэ бол их өнгөц хандлага гэдгийг сануулъя. Програмчлалын үндсэн суурь технологи, ажиллагааны зарчмыг зөв ойлгохын тулд нилээд гүн судалгаа хийх зайлшгүй шаардлагатай. Иймээс сйатад нийтлэгдэж буй програмчлалын хэлний хичээлүүдийг бүгдийг нь алгасалгүй үзэж судлахыг зөвлөе.

Vuejs - д компонент үүсгэсний дараа түүнийг бүртгүүлэх хэрэгтэй болдог. Энэ хичээлээр компонентүүдийг бүртгүүлэх аргуудын талаар авч үзнэ. Яагаад компонентийг бүртгүүлэх шаардлагатайг ойлгохын тулд Компонентууд ямар хэрэгтэй вэ? хичээлд my-counter компонент үүсгэсэн

Getters -ийг ашиглах

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

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг 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 файлыг үүсгэе.

Node -ийг суулгах

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

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

Амьдрах цикл

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

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

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="title = 'Гарчигийг өөрчлөв'">Гарчигийг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хуудаст title талбарыг үзүүлээд Гарчигийг өөрчлөх товчийг дарахад title талбарын утгыг өөрчлөнө. Бид ажиглалт хийж болох эхний үе шат бол Vue програмын инициализац юм. new Vue({ ... }) командаар Vue програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

тэнцэл бишийг бод.

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

 
Бодлого 4.034

B(5;3) цэгт төгсгөлтэй AB вектор (3;1) гэсэн кординаттай бол A цэгийн абцисс, ординатын нийлбэрийг ол.

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

 
Бодлого 14.084

prob14_84_01 функцийн хязгаарыг ол.

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195