Аргад параметрүүд дамжуулах

Хичээлээр үйл явцын талаар дэлгэрүүлэн авч үзье. Үүний тулд Үйл явдал нэмэх хичээлийн кодыг нэг тоолууртай түүнийг нэмэгдүүлэх нэг товчтой болгон

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

өөрчилсөн. Хөтөч дээр хуудсаа нээгээд Нэмэгдүүлэх товчийг дарвал тоолуурын утга нэгээр нэмэгдэж байгаа эсэхийг шалган үзээрэй.

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

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

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

Холбоотой материалууд
Анхдагч параметрүүд

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

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

const func = (a) => {
    return a;
};

console.log(func());

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

DOM -ийн элементэд хандах

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

html хуудас бүхэлдээ DOM /document object model/ буюу хуудасны обьектын моделоос бүрддэг. Хуудас дээрх элементүүдэд хандан тэдгээрийг удирдах асуудал хэрэглэгч талын хуудастай ажиллах ажиллагаанд чухал байр суурийг эзэлдэг. Иймээс VueJs -ээр html хуудасны элементүүдэд хэрхэн хандахыг авч үзье. Html элементүүдэд хандах ref буюу reference гэдэг бүтэц бий. Хичээлд

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="updateFirstTitle">Гарчиг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue -гийн хувь'
                },
                methods: {
                    updateFirstTitle(){
                        this.title = "Шинэ гарчиг"
                    }
                }
            })
        </script>        
    </body>

h2 гарчиг түүний утгыг солих Гарчиг өөрчлөх товч бүхий хуудсыг ашиглана. Гарчиг өөрчлөх товчийг дарахад title хувьсагчийн утгыг Шинэ гарчиг болгон өөрчлөх updateFirstTitle функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

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

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

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

Бүтцийн задаргаа

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

ES6 -д шинээр гарч ирсэн бүтцийн задаргаа (destructuring assignment) ойлголтын талаар хичээлд авч үзье. Хичээлийн сэдвийг ойлгохын тулд  

let obj = {
    name: 'e-surgalt.com',
    age: 20
};

let name = obj.name;
let age = obj.age;

console.log('name: ' + name, 'age: ' + age);

name, age талбаруудтай обьектыг үүсгэе. obj обьектын талбаруудыг тусдаа хувьсагчуудад авахын тулд өмнө нь дээрх кодод бичигдсэн аргыг ашигладаг байсан. Терминалаас webpack -ийг ажлуулаад хуудсаа хөтөч дээр нээн консолын цонхыг харвал

Үүргийн гинж…

Төлөв байдлын үүргийн гинж (Chain of responsibility) загварчлалын хэв шаардлагыг хэд хэдэн обьектууд боловсруулах боломжийг олгодог тул шаардлагын…

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

 
Алдааны боловсруулалтад…

Онцгой нөхцлийг дуудсан кодийг try блок эсхүл онцгой нөхцлийг боловсруулах catch блокгүй try..catch бүтцэд байршуулсан бол систем тохирох…

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

 
Дэвсгэр компонент

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж…

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

 
Үржэх дүрэм

Үржих үйлдэлд байр сэлгэх, бүлэглэх, гишүүнчлэн үржүүлэх гэсэн дүрмүүд үйлчилдэг. Эдгээрийг эхнээс нь сайн ойлгон цээжлэх хэрэгтэй.  

…

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

 
Төлөв (State)

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

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

 
Шулуунтай харьцангуй…

Тэгш хэм гэдэг нь тухайн обьект эсхүл түүний хэсэг тэгш хэмийн төв гэж нэрлэдэг тодорхой цэг, тэнхлэг, хавтгайтай…

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

 
Алдааны классийг…

Хэрвээ системийн өөрийн дотоод онцгой нөхцлийн төрлүүд тохиромжгүй бол бид өөрсдөө төрлүүд үүсгэж болно. Бүх онцгой нөхцлийн суурь…

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

 
Цэсийн хэрэгжүүлэлт

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг…

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

 
Нэг ба…

Математикийн үйлдлүүдэд нэг ба тэг тоонууд онцгой шинжүүдтэй. Үржих үйлдэлд нэг ба тэг

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

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

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

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

 
Бодлого 11.033

бол утгыг ол.

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

 
Бодлого 3.146

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

Түлхүүр: Язгуурыг шинэ үл мэдэгдэгчээр орлуулах.

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

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