CSS классуудтай ажиллах

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

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

request_quoteТусгай эрх авах

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

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

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

  Нээгдсэн тоо: 602 Бүртгүүлэх

React компонентод параметр дамжуулах бас нэгэн аргыг авч үзье. Компонентийн хэвд jsx гэж нэрлэгддэг html маягийн бичлэгийг ашиглаж байгаа. App компонентод Car компонентийг оруулан ирэхдээ

<Car name={'Toyata Prius'} year={'2018'} />

гэж компонентийн нэрийг өөрөө хаагдсан (/> -ийг ашиглана) html тег хэлбэрээр бичин өгч байгаа.

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

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

  Нээгдсэн тоо: 1746 Бүртгүүлэх

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

тавин өгөөд хуудсаа хөтөч дээр нээвэл

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

интеграл бод

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

 

хязгаарыг бод.

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

 

утгыг ол.

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