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

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 директивийг ашиглана.

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

Холбоотой материалууд
Алдаа боловсруулалт

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

RxJs сангийн алдаа боловруулалтын талаар хичээлд авч үзье. Сервертэй ажиллах үеийн ямар нэгэн алдаанаас үүдэн хэрэглэгч талын код ажиллахгүй болох тохиолдол ихээр гардаг тул ийм үед алдааг барин боловсруулалт хийх зайлшгүй шаардлага гардаг. Алдааны боловруулалтыг дараах

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .subscribe((x) => {
        console.log(x);
    });

энгийн жишээн дээр харцгаая.

Препроцессор

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

react програмд css препроцессорийг /CSS preprocessor/ хэрхэн ашиглах талаар авч үзье. css препроцессор /CSS preprocessor/ гэдэг нь тусгай бичлэгийн дүрмээр бичигдсэн кодоос ердийн css кодийн генераци хийдэг програмууд юм. Sass, Less, PostCss гээд олон тооны препроцессорууд байдаг ба эдгээрийн ихэнх нь css -ийн боломжуудыг нэмэгдүүлэн кодийн удирдагыг сайжруулдаг. react-scripts -ийн 2 -оос дээшхи хувилбарт css препроцессорийг оруулан ирэх ажиллагааг амархан болгон өгсөн. react програмд css препроцессорийг ашиглахын тулд эхлээд препроцессорийг суулгах хэрэгтэй.

Гарын үйл явцын модификаторууд

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

Програмчлалын хэлүүдэд хэрэглэгчийн зүгээс үүсгэх үйл явц, түүний боловсруулалт чухал байр эзэлдэг. Үйл явцын боловсруулалтад модификаторийг ашиглан кодыг хэрхэн хураангуй болгохыг Үйл явцын модификаторууд хичээлээс мэдсэн Энэ удаад үйл явцын модификаторын бас нэг боломжийг

    <body>
        <div id="app">
            <input type="text" v-on:keyup="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        if (event.keyCode === 13)
                            alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

код дээр харцгаая. Хуудаст хэрэглэгчээс өгөгдөл авах input элемент байрлан түүнд товч дарагдах үйл явцыг v-on:keyup атрибут alertValue боловсруулагчтайгаар сонсохоор заасан.

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

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

Хичээлээр өөрийн контролийг үүсгэн түүнийг 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>

үзүүлье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 5.090

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

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

 
Бодлого 17.086

Хоёр тамирчин тойрог замаар нэгэн зэрэг гарч 3,2 км замыг туулан барианд оржээ. Тойргийг нэг тамирчин нөгөөгөөсөө 10 секундээр хурдан тойрдог. Ялагч барианд орж байхад нөгөө нь бүтэн тойрог гүйх үлдсэн байлаа. Ялагч замыг 9 мин 20 секундэд туулсан бол тойрог замын уртыг ол. Тамирчдын хурдыг тогтмол гэж үзнэ.

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

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