Интерполяц

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello {{ name }}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name: 'Vue !!!'
                }
            })
        </script>        
    </body>
</html>

кодыг авч үзье.

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

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

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

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

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

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

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

Цаг хугацаа Date обьект

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

JavaScript -д он сар өдөр болон цагтай ажиллахад зориулагдсан Date гэдэг тусгай обьект байдаг. Обьектыг JavaScript -ийн бараг бүх хувилбарууд дэмждэг болохоор түүний зохицох эсэхт санаа зоволтгүй ашиглах боломжтой. Ихэнх программчлалын хэлүүдийн адилаар JavaScript цаг хугацааг шууд утгаар нь биш Unix цаг тоолол буюу 1970 оны 1-р сарын 1 ний 0 цаг 0 минутаас хойш өнгөрсөн секундын тоо хэлбэрээр тооцдог. Утгын бүх хэсгүүд тэгээс эхэлсэн индекстэй байдгаараа Date обьект онцлогтой.

Промисээс стрим үүсгэх

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

Энэ хичээлд стримийг үүсгэж болдог RxJs сангийн Promise /промис/ бүтцийн талаар авч үзье. Promise үгийн орчуулгыг мэдэхгүй тул промис гээд явах нь илүү. Промис JavaScript -ын ES6 хувилбарт бий болсон асинхрон кодтой ажиллахад их эвтэйхэн бүтэц юм. RxJs нь JavaScript -ын хэрэгслүүдийг илүү сайжруулсан сан тул бид програмдаа промисоос стримийг үүсгэх боломжтой. Промисын талаарх мэдлэгээ сэргээхийн тулд index.js файлд бидэнд ямар нэгэн промис үүсгэн өгөх

function delay(ms = 1000) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms);
    });
}
Директивүүдийн амьдралын цикл

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

Директивийн амьдралын циклүүдийг /үе/ мэдэж байх хэрэгтэй. Өөрийн директив үүсгэх хичээлд директивийг үүсгэх шатанд ажиллах арга bind -ийг мэдэн авсан. Аргаар директивийн инициализацийг хийн түүнийг виртуал DOM дахь элементэд холбох бөгөөд энэ үед тухайн директив бодит DOM -ийн модонд орж ирээгүй байдаг. Директивийн амьдралын циклүүдийг төслийн color.js файлд тодорхойлсон обьектын кодод нэмье.

export default {
  bind(el, bindings, vnode) {
    console.log('bind')
    el.style.color = 'green'
  },
  inserted(el, bindings, vnode) {
    console.log('inserted')
  },
  update(el, bindings, vnode, oldVnode) {
    console.log('update')
  },
  componentUpdated(el, bindings, vnode, oldVnode) {
    console.log('componentUpdated')
  },
  unbind() {
    console.log('unbind')
  }
}
Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Хоёр тойрог гадна талаараа шүргэлцсэн. Нэг тойргийн шүргэгч нь нөгөө тойргийнхоо төвийг дайран гарсан. Шүргэлтийн цэгээс хоёрдахь тойргийн төв хүртэлх зай нь энэ тойргийн радиусаас 3 дахин урт. Нэгдүгээр тойргийн урт хоёрдугаар тойргийн уртаас хэд дахин их вэ?

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

 
Бодлого 3.058

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

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

 
Бодлого 2.140

бол илэрхийллийн утгыг ол.

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

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