Интерполяц

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello {{ name }}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name: 'Vue !!!'
                }
            })
        </script>        
    </body>
</html>

кодыг авч үзье.

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

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

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

Холбоотой материалууд
Модулийг ашиглан оптимизаци хийх

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

Манай хичээлийн жишээ бага болохоор Vuex store -ийн хэмжээ жижиг байгаа. Төслийг хөгжүүлэхийн хирээр компонентуудын тоо өсөхийн зэрэгцээ Vuex store -д тодорхойлогдох зүйлүүд нэмэгдэн ирэх нь ойлгомжтой. Эндээс state, mutation, getters, actions -д олон тооны зүйлүүдийг тодорхойлон өгснөөр файлын хэмжээ томрох, кодийг ойлгоход хүндрэлтэй болон ирнэ. Иймээс Vuex store -ийг төрөл бүрийн модулд хуваан жижиглэх арга байдгийг хичээлээр авч үзье.

useRef

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

VueJS гэж юу болох

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

Сүүлийн жилүүдэд сайт боловсруулах ажиллагаанд раектив буюу дэвшилтэд Angular, React гэх мэтийн javascript сангууд маш хүчтэй түрэн орж ирэх болсон. Үүний нэг бол Vue фреймворк бөгөөд сайтад энэхүү дэвшилтэд технологи ямар боломжтой, бусдаас ямар давуу талуудтай, ямар зориулалттай болохыг цуврал хичээлүүдээр толилуулна. Эхлээд Javscript фреймворкууд яагаад ийм хүчтэй түрэн орж байгаа талаар ярилцая.

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

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

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 6.052

Арифметик прогресын 3-р гишүүн 5, 7-р гишүүн 13 бол эхний 10 гишүүний нийлбэрийг ол.

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

 
Бодлого 3.134

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

Жич: Тэгшитгэлийг заавал бодох гээд үзээрэй. Иймэрхүү бодлого ЭЕШ -д бараг ирэхгүй ч математикийг ганцхан ЭЕШ -аар хязгаарлавал та өөрийгөө хөгжүүлэхээ боомилсонтой адил.

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

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