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Бүртгүүлэх

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

Холбоотой материалууд
Set , WeakSet обьектууд

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

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

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

useMemo

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

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
  
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.

Хүүхэд компонент хоорондын холбоо

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

Өмнөх хичээлүүдэд бид эцэг болон хүүхэд компонентууд хоорондын харилцан ажиллагааг судалсан. Одоо хүүхэд компонентууд буюу нэг түвшингийн компонентууд хоорондоо хэрхэн харьцах талаар үзье. Үүний тулд төслийн components хавтаст

<template>
  <div>
    <h1>Тоолуур: {{ counter }}</h1>
  </div>  
</template>

<script>
export default {
  props: ['counter']    
}
</script>

кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.

Mutations -ийг ашиглах

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

vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 
Бодлого 13.054

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 
Бодлого 13.092

функцийн хамгийн бага утгыг ол.

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

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