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

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 функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

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

how_to_regБүртгүүлэх

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

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

Өмнөх хичээлүүдээр vue -гийн хувийн $http системийн хувьсагчийг ашиглан серверт өгөгдөл нэмэх post, татан авах get аргуудыг үзсэн. Үүнээс гадна системийн $http хувьсагчид өгөгдлийг засварлах put, өгөгдлийг устгах delete гэдэг аргууд байдаг бөгөөд бидний үзсэн аргуудтай яг адилаар ажилладаг.
Энэ хичээлээр vue-resource сангийн нэг төрлийн обьектуудтай ажилладаг хэрэгслүүдийн талаар авч үзье.

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

Програмын бүтээгдхүүнүүд интернетэд суурилсан буюу хөтөч дээр ажиллах хандлага улам дэлгэрсээр байгаа нь  javascript хэлийг судлан эзэмших шаардлагыг улам нэмэгдүүлсээр байгаа. Хэлний боловсруулагчид javascript хэлний бичлэгийн дүрмийг өргөн тархсан програмчлалын хэлүүдтэй улам төстэй болгож байгааг ES6 -д классууд хэрхэн өөрчлөгдсөн дээр авч үзье. ES5 -д классыг хэрхэн үүсгэж байсанг

function Car(name) {
    this.name = name;
}

Car.prototype.logName = function () {
    console.log(this.name);
};

let car = new Car('Toyota');
car.logName();

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

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

JavaScript –ийн зориулалт

Ямарч програм хангамжийн хөгжлийн хандлага нь аюулгүй байдлыг хангасан интерактив ажиллагаатай, ажиллахад эвтэйхэн интерфейстэй байхад оршино. Энэ нь хэрэглэгч тухайн програмыг үр дүнтэй ашиглах үндэс болохоос гадна програм боловсруулагчдын ашигт ажиллагааг өндөрсгөн улмаар өрсөлдөх чадварыг дээшлүүлнэ.
Энэ хандлага нь интернет програмчлалыг тойрч гарахгүй нь тодорхой. Сүүлийн жилүүдэд интернет програмчлал асар хурдтай хөгжиж байна. Интернетэд сайтад байрлуулсан маш их хэмжээний мэдээллийг хэрэглэгчид хүргэхэд хуудсыг үзэж байгаа хүнтэйгээ шууд харьцахгүйгээр төсөөлөхөд бэрхшээлтэй. Сайтад үзүүлж байгаа материалыг хэрэглэгчид хир зэрэг чанартай талбарлахаас тухайн сайтын үр өгөөж шууд хамаарна. HTML хэл нь статик веб хуудсыг үүсгэх боломжийг бүрдүүлдэг. Веб хуудсанд динамик байдлыг бий болгох олон технологийн нэг нь JavaScript юм.

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

JavaScript –д массивыг обьект байдлаар үүсгэж болдог. Энэ аргаар массив үүсгэхэд конструкторт зөвхөн ганцхан тоон төрлийн параметр (массивын элементийн тоо) хэрэгтэй болно. Хэрвээ нэгээс илүү болон тоон бус төрлийн нэг параметр дамжуулбал эдгээрийг массивын элемент гэж үзэх бөгөөд хооронд нь таслалаар зааглана. Мөн түүнчлэн нэг ч параметр дамжуулахгүй байж болно. Тэгвэл хоосон массив үүснэ. Энэ обьектыг стандарт аргаар үүсгэнэ.

<массивын_нэр> = new Array(<элементийн тоо>);
<массивын_нэр> = new Array(<массивын элементүүд>);

Массив үүсгэх жишээнүүд

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

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