Өөрийн контролийг үүсгэх

Хичээлээр өөрийн контролийг үүсгэн түүнийг v-model директивт хэрхэн тавин өгөхийг сурцгаая. Үүний тулд төслийн components хавтаст Onoff нэртэй

<template>  
  <div>
    <button class="on">On</button>
    <button class="off">Off</button>
  </div>    
</template>

<script>
  export default {
    data () {
      return {
        enabled: false
      }
    }
  }
</script>

<style scoped>
  button {
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    margin-right: 20px;
    outline: none;
  }

  button:active {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
  }

  .on.active {
    background: green;
    color: #fff;
  }

  .off.active {
    background: red;
    color: #fff;
  }
</style>

код бүхий компонентийг үүсгээд түүнийг app компонентод бүртгүүлээд шаблонд

<template>
  <div>
    <h2>Form inputs</h2>

    <app-onoff></app-onoff>
  </div>
</template>

<script>
import Onoff from '@/components/Onoff'
export default {
  data () {
    return {
    }
  },
  components: {
    appOnoff: Onoff
  }
}
</script>

үзүүлье.

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

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

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

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

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

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

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

Үйл явдал (events) – гэдэг нь хэрэглэгчийн үйлдлийн үр дүнд хуудас болон цонхны байдалд гарсан өөрчлөлтийг мэдэгдэхийг хэлнэ. Хэрэглэгч хуудастай ажиилах явцад эсвэл  хуудасны төлөвт өөрчлөлт гарах үед үйл явдал буюу event үүснэ. Энэ нь хулганыг хөдөлгөх, хулганы товч дээр дарах, гараас текст оруулах зэрэг байж болно. Хуудасны төлөвт өөрчлөлт гарах гэдэгт хуудас, обьект эсвэл зураг ачааллах, хуудас дээр алдаа гарах, нэг элементээс нөгөө элементэд фокус шилжих гэх мэт байж болно.

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

Хичээлээр 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 -гийн нэг хувийг тодорхойлсон байгаа.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

илэрхийллийг хялбарчил.

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

 

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

 

Задаргааны сүүлээсээ 3 дахь гишүүний бином коэффициент 45 бол задаргааны 6-р гишүүнийг ол.

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