Radium

Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас

.Car {
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  border-radius: 5px;
}

border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр

  const style = {
    border: '1px solid #ccc',
    boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
  }
  return (
    <div className="Car" style={style}>
      <h3>Машиний нэр: {props.name}</h3>
      <p>Он: <strong>{props.year}</strong></p>
      <input
        type="text"
        onChange={props.onChangeName}
        value={props.name}
        className={inputClasses.join(' ')}
      />
      <button onClick={props.onDelete}>Устгах</button>
    </div>
  )

style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Өөр програмуудыг холбох. Vue -гийн хувь

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

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

    <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>

энгийн кодыг харцгаая. Кодод app нэртэй id -тай div элементэд Vue -гийн нэг хувийг тодорхойлсон байгаа.

Өөрийн директив үүсгэх

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

Өмнөх хичээлүүдийн кодод директивүүдийг ашиглаж байсан ч тэдгээрийг Vue фреймворкийн тодорхой хэрэгсэл байдлаар ойлгон хэрэглэж ирсэн. Одоо директивүүдийн талаар дэлгэрүүлэн судлаж ойлголтоо гүнзгийрүүлэх цаг болсон. Директив гэдэг нь html шаблоны дотор ашиглан хуудасны элементүүдтэй харьцан ажиллах боломжийг өгдөг тусгай атрибут юм. Өмнөх хичээлүүдэд бид v-on, v-bind гэх мэтийн директивүүдийг их олон ашигласан. Энэ хичээлээр бид өөрсдийн директивийг үүсгэн ашиглаж сурцгаах болно. Хичээлд ашиглах төсөл доорх код бүхий

<template>
  <div>
      <h2>{{ title }}</h2>  
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

<style scoped>

</style>

нэг App.vue компонентоос бүрдэнэ.

Буфер

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

RxJs сангийн хүрээнд буфер гэж юу болох талаар энэ хичээлээр авч үзье. Буфер гэдгийг утгуудыг түр зуур хадгалах сав буюу орон зайг гэж ойлгоорой.

buffer, bufferTime арга

Практик жишээгээр ухагдхууныг ойлгох нь амархан байдаг учраас шууд

Rx.Observable.interval(500)
    .buffer(Rx.Observable.interval(2000))
    .take(3)
    .subscribe(createSubscribe('buffer'));

кодыг авч үзье. Хөтөч дээр хуудсаа нээвэл консолд

үр дүнг үзүүлнэ. Код юу хийж байгааг авч үзье.

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

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

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 
Бодлого 13.054

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 
Бодлого 13.092

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

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

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