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Тусгай эрх авах

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

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

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

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

Өмнөх хичээлүүдэд хэрэглэгчийн оруулсан эмайл, нууц үгэнд шалгалт хийх формыг зохиогоод байгаа. Өөрөөр хэлбэл бид бүртгэлийн формийг үүсгэсэн. Одоо формдоо түүнийг илгээх товчийг нэмвэл бүрэн хэмжээний ажиллагаатай болохоор байгаа. Иймээс формийн хэвд хамгийн сүүлийн form-group класстай div -ийн ард

<template>
  <div class="container">
    <form action="" class="pt-4">
      ...    
      <button class="btn btn-success">Submit</button>            
    </form>
  </div>
</template>

bootstrap -ээр хэвжүүлсэн Submit товчийг нэмэн оруулаад хуудсаа шинэчилбэл

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

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

<template>
  <div>
      <h2>{{ title }}</h2>
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(name, index) of names" :key="index">{{ name }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello I am Vue!',
      searchName: '',
      names: ['Баатар', 'Болд', 'Цэцгээ', 'Алимаа']
    }
  }
}
</script>

кодоор авч үзье.

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

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

Хичээлээр RxJs сангийн талаар өмнөх хичээлүүдээр олон авсан мэдлэгээ бататган API контактад хандан хэрэглэгчийн мэдээллийг авах энгийн програмыг боловсруулах болно. Програмаас төрөл бүрийн хүсэлтийг илгээх боломжтой болгох зорилгоор төсөлдөө Jquery санг суулгая. Үүний тулд WebStorm текст засварлагчийн терминалыг нээгээд

npm i jquery командыг өгөөрэй.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

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

 

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

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

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