Динамик атрибутууд

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>

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

Хуудсыг хөтөч дээр нээвэл

холбоос гарч ирэх хэдий ч шаблоны компиляцийн алдааг консолд үзүүлнэ. Холбоос дээр дарвал хуудасыг олохгүй. Эндээс ямар нэгэн атрибутад динамикаар өгөгдөл оруулахдаа давхар хаалтыг {{ url }} хэлбэрээр ашиглаж болохгүй нь тогтоогдлоо. VueJs -ээр хуудасны атрибутад динамик өгөгдөл оруулахдаа директивийг ашигладаг. Хуудас дээрх холбоосын href атрибутад динамикаар утга олгохдоо v-bind директивийг

            <h2>
                <a v-bind:href="url">{{ url }}</a>
            </h2>

ашиглана. Vue фреймворкийн бүх директивууд v гэсэн угтвартай байдаг. Энэ нь ямар нэгэн нэр, атрибутуудтай зөрчил үүсгэхгүй зорилготой. Директивийг ашиглахдаа v-bind гэж бичээд тодорхой утгыг атрибуттай холбохын тулд : тавиад атрибутынхаа нэрийг href өгөөд утгыг /url/ заан өгнө. v-bind директивээр атрибутыг тодорхой утгатай холбохдоо давхар хаалтыг ашиглахгүй шууд нэрийг бичиж байгааг анхаарна уу. Одоо хуудсаа нээвэл ямар нэгэн алдаа заахгүй

бөгөөд https: холбоос дээр дарвал сайтад шилжилт хийгдэнэ. VueJs -ээр хуудасны атрибутыг динамик өгөгдөлтэй холбохдоо v-bind директивийг ашиглана.

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

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

Компонентийн бусад амьдралын циклүүдийг судлахын өмнө функционал компонентийг ердийн буюу Component классаас удамшсан компонент болгож суръя. Манай төслийн Car компонент jsx кодийг буцаах ердийн функц хэлбэрийн хэрэгжүүлэлттэй.

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

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

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

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

const func = (a) => {
    return a;
};
console.log(func());

Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал

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

Сүүлийн жилүүдэд 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 фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн хувьд утгыг ол

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

 

тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.

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

 

тэнцэтгэл b -ийн ямар утганд биелэх вэ?

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