Гарын үйл явцын модификаторууд

Програмчлалын хэлүүдэд хэрэглэгчийн зүгээс үүсгэх үйл явц, түүний боловсруулалт чухал байр эзэлдэг. Үйл явцын боловсруулалтад модификаторийг ашиглан кодыг хэрхэн хураангуй болгохыг Үйл явцын модификаторууд хичээлээс мэдсэн Энэ удаад үйл явцын модификаторын бас нэг боломжийг

    <body>
        <div id="app">
            <input type="text" v-on:keyup="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        if (event.keyCode === 13)
                            alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

код дээр харцгаая. Хуудаст хэрэглэгчээс өгөгдөл авах input элемент байрлан түүнд товч дарагдах үйл явцыг v-on:keyup атрибут alertValue боловсруулагчтайгаар сонсохоор заасан.

Vue -гийн тохиргооны обьектын methods талбарт тодорхойлогдсон alertValue функц input элемент дээр Enter товчийг дарахад түүний утгыг дэлгэц дээр alert функцээр үзүүлнэ. Хөтөч дээр хуудсаа нээгээд input элементийн талбарт ямар нэгэн зүйлийг оруулаад Enter товчийг дарвал

гэж харуулна. Үүнийг VueJs -ийн үйл явцын enter модификаторыг ашиглан

    <body>
        <div id="app">
            <input type="text" v-on:keyup.enter="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

хураангуйлж болно. Кодод модификаторын бичлэгийн дүрмээр v-on:keyup -ын араас цэг тавиад enter модификаторыг заасан тул alertValue -д тодорхойлогдсон функцэд Enter товчийг дарсан эсэхийг шалгах шаардлагагүй болсон. Хуудсаа шинэчлээд ажиллагааг шалгавал код яг өмнөх шигээ л ажиллана. Үүнээс гадна үйл явцад төрөл бүрийн модификаторуудыг

    <body>
        <div id="app">
            <input type="text" v-on:keyup.enter.space="alertValue">
        </div>
        ...
    </body>

нэмж болно. Жишээ нь дээрх кодод input элементийн товч дарагдах үйл явцад enter, space модификаторуудыг өгсөн. space бол хоосон тэмдэгт оруулах товч. Одоо хуудсаа шинэчлээд input элементийн талбарт Сайн байн уу үгийг оруулаад Enter товчийг дарах үйлдлийг хийвэл хоосон тэмдэгт оруулах бүрд дэлгэц дээр input элементийн талбарын тухайн үеийн утгыг үзүүлэх бөгөөд Ok товчийг даран цааш өгөгдлийг үргэлжлүүлэн оруулаад Enter дарахад дэлгэцэнд Сайн байн уу үгийг үзүүлнэ. Энэ нь input элементийн товч дарагдах үйл явц enter, space модификаторуудаар тухайн товчнуудын даралтыг мэдэрч байгааг илэрхийлнэ. Үйл явцын сонсогчид цэгээр таслаад фреймворкд байдаг модификаторуудыг хэдийг ч өгч болно. Vue фреймворкийн сайтаас модификаторуудын талаар дэлгэрүүлэн үзээрэй.

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

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

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

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

Өмнөх хичээлүүдээр директивийг үүсгэн бүртгүүлэхийг сурсан. Директивийг main.js файлд

Vue.directive('colored', ColorDirective)

гэж бүртгүүлсэн. Төслийн хэмжээнд глобал хэлбэрээр ашиглагдах директивийг дээрх аргаар бүртгүүлдэг. Үүнээс гадна компонент дотор директивийг

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

VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай divtitle талбарт үзүүлж байгаа.

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

Интернетэд сууриласан хөтөч дээр ажилладаг програмуудыг боловсруулахад javascript хэл чухал үүрэгтэй бөгөөд сүүлийн жилүүдэд javascript фреймворкуудын хөгжлийн үр дүнд нэг хуудаст програмчлалын аргачлал улам хүчтэй орж ирэх боллоо. Програмчлалын чиглэлээр сурч, ажиллаж байгаа залуучуудад зориулан Vuejs фреймворкийн хичээлүүдийг бэлтгэн оруулж байгаагийн ээлжит хичээлээр эцэг компонентоос хүүхэд компонентод параметрийг дамжуулахын зэрэгцээ хүүхэд компонентод үүссэн үйл явцыг эцэг компонент мэдэх асуудлыг хэрхэн шийдэхийг авч үзье. Үүний тулд Car компонентийн кодыг

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
    <button @click="changeName">Нэрийг өөрчлөх</button>
  </div>
</template>

<script>
  export default {
    props: {
      carName: {
        type: String,
        default: 'Нэр байхгүй'
      },
      carYear: Number
    },
    methods: {
      changeName() {
        this.carName = 'Prius'
      }
    },
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1.
2. x1, x2, x3 арифметик прогрес үүсгэх бол
3. Уул прогрессын ялгавар
4.

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

 

sin90 -ийг олно уу.

Жич: Хатуу самар даа. Сурагчид барна гэхэд хүнд болов уу. ЕБС-ийн хүрээний аргаар л бодолтыг хийж байгаа тул бодолтыг харвал гайгүй ч юм шиг санагдаж магадгүй гоё бодлого.

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

 

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

Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай. 

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