Програмын эхлэлийн цэг

Vue CLI хэрэгслэээр үүсгэсэн төслийн эхлэлийн цэг бол

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

кодийг агуулсан main.js файл юм. npm run serve командаар ачааллагдах боловсруулалтын сервер хандан ажиллах public хавтас доторх index.html файлд

  <body>
    <noscript>
      <strong>We're sorry but vue-lesson doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

<noscript> тегд JavaScript -ийг нээхгүй бол програм ажиллахгүй гэсэн анхааруулга гаргах хэсэг дараа нь app айдитай div элемент л байгаа. div -ийн араас багцлагдсан файлуудыг автоматаар оруулна гэсэн тайлбар бий. Хэрвээ та хөтөчийн тохиргоонд JavaScript код ажлуулахыг хаавал програм ажиллахгүй.
Vue CLI хэрэгслээр үүсгэсэн төслийн эхлэлийн цэг main.js файлд Vue -гийн шинэ хувийг өмнөх хичээлүүдэд сурсан аргаас арай өөрөөр үүсгэж байгаа. Өмнө нь бид Vue -гийн хувийн тохиргооны обьектод el: '#app' гэж хувийг холбох тегийн Id -г заадаг байсан. Vue 3.0 -аас дээшхи хувилбарт main.js файлд Vue -гийн шинэ хувийг үүсгэхдээ тохиргооны обьектын render талбарт App компонентыг виртуал DOM -д html код болгон хувиргах функцийг тодорхойлоод дараа нь mount аргад app айдитай div элементэд холбон өгнө гэдгийг параметрээр өгдөг болсон. Төслийн эхлэлийн цэг main.js файлыг өмнөх хичээлүүдэд сурсантай төстэй байдлаар

import Vue from 'vue'
import App from './App.vue'

Vue.use(VueResource)

new Vue({
  el: '#app',
  render: h => h(App),
})

гэж өөрчилье. Төслийг ажлуулбал бүгд хэвийн ажиллана. el: '#app' мөрийг өмнөх хичээлүүдээс мэднэ. Түүний дараагийн render талбарын тодорхойлолт бол шинэ зүйл. Хэрвээ та EMCA6 -гийн сумаар тодорхойлогдох функцийн бичлэгийг мэддэг бол render талбарыг параметрээр функц авдаг функцээр тодорхойлсон гэдгийг төвөггүй ойлгоно. Үүнийг арай ойлгомжтой болгох үүднээс EMCA5 -ын дүрмээр

import Vue from 'vue'
import App from './App.vue'

Vue.use(VueResource)

new Vue({
  el: '#app',
  render: function(h) {
    return h(App)
  },
})

гэж бичээд төслийг ажлуулбал бүгд хэвийн ажиллана. render талбарыг параметрээр h функцийг аваад түүнийг ажиллуулахдаа main.js файлд импортолсон App компонентийг дамжуулсан функц байдлаар тодорхойлсон. Ингэснээр webpack сан App компонентийн script тегд тодорхойлогдсон обьект болон template тегд тодорхойлогдсон хэвүүдээр html кодыг үүсгэнэ. Үүний дараа index.html файлын app айдитай div -ийн оронд функцээс буцаасан html -ийг оруулан өгөөд төслийг эхлүүлнэ. Үүнийг EMCA6 -д илүү хураангуйлан render: h => h(App) гэж бичдэг.

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

Холбоотой материалууд
DOM -ийн элементэд хандах

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

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

CSS модулууд

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

Таны програм хөгжихийн хирээр компонентуудын тоо нэмэгдэнэ. Хэрвээ компонент бүр өөрийн хэвжүүлэлтийг css өргөтгөлтэй тусдаа файлуудад хадгалан ашиглаж байвал зарим хэвүүдийн нэр давхцан хэвүүд өөрчлөгдөх магадлал бий. Учир нь css өргөтгөлтэй файлууд бусад компонентуудад нээлттэй байдаг. Үүнийг шалгах зорилгоор Car компонентийн Car.css файлд

.btn {
  color: yellowgreen;
}

хэвийг нэмэн тодорхойлоод хэвийн классийг App компонентийн Toogle car товчинд

        <button className='btn' onClick={this.toogleCarsHandler}>Toogle car</button>

тавин өгөөд хуудсаа нээвэл

Асуултын мэдээлэл

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

Өмнөх Хулганы товч даралтын боловсруулалт хичээлд асуулт, түүний хариултуудын хувилбарууд, зөв хариултын дугаар зэргийг quiz массивт тодорхойлон өгснөөр манай төслийн сорилго явуулах хуудас

r_06_05_02

байдлаар харагдах болсон.

useCallback

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

Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах

import React, {useState} from 'react'

function App() {
  const [colored, setColored] = useState(false)
  const [count, setCount] = useState(1)
    
  const styles = {
      color: colored ? 'darkred' : 'black'
  }
    
  return (
      <div className="container">
        <h1 style={styles}>Элементийн тоо: {count}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
      </div>
  );
}

export default App;

кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.

Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

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

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

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

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

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

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

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

2.0(15) үет бутархайг энгийн бутархай болго.

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

 
Бодлого 12.061

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

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

 
Бодлого 5.109

тэнцэтгэл бишийн системийг хангах x -ийн натурал утгыг ол.

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

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