Тоон модификаторууд

Vue фреймворкийн ээлжит хичээлээр форм дээрх тоон утгын талбаруудад v-model директивийг яаж ашиглахыг үзье. Жишээ нь форм дээрээс хэрэглэгчийн насыг авах хэрэгтэй болсон гэе. Үүний тулд

<template>
  <div>
    <h2>Form inputs</h2> 
    <input type="text" v-model="age">
    <hr>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      age: 20
    }
  }
}
</script>

код байхад болох мэт.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
useState

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

React аппликашний төлөвтэй ажиллахад зориулагдсан UseState хукийн ажиллагааг

import React from 'react'

function App() {
  return (
      <div className="container">
        <h1>Тоолуур</h1>
        <button className="btn btn-success mx-3">Нэмэх</button>
        <button className="btn btn-danger">Хасах</button>
      </div>
  );
}

export default App;

кодоор судлая. Туршилтын төслийг React хук хичээлд үүсгэсэнг сануулъя. Дээрх код бол харагдах байдлыг л тодорхойлж байгаа. Харин тоолууртай ажиллахын тулд төлвийг UseState хукийг ашиглан оруулан ирье.

Формын шалгалтын бэлтгэл

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

Формд төрөл бүрийн элементүүдийг оруулахыг өмнөх хичээлүүдэд үзсэн. Формтой ажиллах ажиллагааны бас нэгэн чухал хэсэг бол түүний validation буюу шалгалтын хэсэг байдаг. Vuejs фреймворк бүгдийг хэрэгцээтэй үед нь хэрэглэх гэсэн зарчмыг баримталдаг. Өөрөөр хэлбэл фреймворкийн үндсэн пакет хамгийн хэрэгтэй суурь зүйлүүдийг агуулаад бусад шаардлагатай хэсгийг нэмэлтээр суулган ашиглах гэсэн үг юм. Формын шалгалт хийх ажиллагаа Vuejs фреймворкийн үндсэн пакетад байдаггүй бөгөөд формд шалгалт хийх хэрэгтэй бол шаардлагатай пакетыг суулгах шаардлага гарна. Энэхүү зарчим нь програмын хэмжээ, ажиллагааны хурдад сайн нөлөө үзүүлдэг сайн аргачлал юм. Хичээлээр формын шалгалтын бэлтгэл болгоод цэвэр төслийг үүсгэе.

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

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

Хичээлээр Vuex store -ийн үндсэн 4 ухагдхууны сүүлийнх болох action -ий тухай авч үзнэ. Mutation -оор Vuex store -ийн state -ийг л өөрчилдөг гэдгийг Mutations -ийг ашиглах хичээлээс мэдсэн. Үнэн хэрэгтээ mutation бол синхроноор ажиллан state -д утга олгох ердийн setter юм. mutation -д ямар нэгэн асинхроний үйл явцыг дамжуулж болдоггүй. Гэтэл програм сервер, интернет сервисүүд гэх мэт асинхрон үйл явцуудтай ажиллах шаардлага гарах нь дамжаггүй. Тэрхүү асинхрон үйл ажиллагааны үр дүнгээс хамааран state -д утга олгох ажиллагаа ихээр тохиолдох учраас асинхрон үйл явцуудтай Vuex store -ийн action нэртэй хэрэгслийг ашигладаг.

Директивийн тэмдэглэгээ

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

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

    <body>
        <div id="app">
            <h2>
                <a v-bind:href="url">E-surgalt</a>
            </h2>
            <h2>
                Тоолуур = {{ counter }}
            </h2>

            <button v-on:click="counter++">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:',
                    counter: 0
                }
            })
        </script>
    </body>
Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 16.072

g(x)=2x-3x2 нь f(x)=x2-x3 -ийн уламжлал бол -ийг ол.

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

 
Бодлого 14.080

хязгаарыг ол.

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

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