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

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) гэж бичдэг.

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

Холбоотой материалууд
Обьектууд

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

ES6 -д обьектод ямар өөрчлөлтүүд орсонг хичээлд үзэх болно. Кодод

const name = 'e-surgalt.com';
const age = 30;

хувьсагчид байгаад эдгээрийг хувьсагчийн нэртэй ижилхэн обьектын талбарт олгоё гэвэл ES5 -д

const obj = {
    name: name,
    age: age
};

гэж бичдэг. Одоо обьектыг консолд

console.log(obj);

гэж харуулъя.

useCallback

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

Хичээлээр 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;

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

useReducer

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

useContext хичээлийн жишээн дээр useReducer хукийн ажиллагааг судлая. Та redux -ийг ашиглаж байсан бол useReducer -ийн ажиллагааны зарчмыг ойлгоход хөнгөн. useReducer -ийн ажиллагааны санаа useState -ийнхтэй төстэй ч гадаад функцийн тусламжтайгаар компонентийн төлвийн өөрчлөлтийг хийдэгт оршино. useReducer -ийг ашиглан мэдээллийг нээх, хаах ажиллагааны логикийг өөрчлөн бичье.

Идэвхитэй хаягийг тэмдэглэх

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

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

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

Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

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

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

 
Зуучлагч (Mediator)

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

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

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

илэрхийллийг хялбарчил.

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

 
Бодлого 4.001

Паралелграмын AB, CD диагналуудын огтлолцлын цэг O бол векторуудын нийлбэрийг ол.

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

 
Бодлого 3.012

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

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

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