VueJS гэж юу болох

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

Сайт бүтээх уламжлалт технологид веб хөтөч серверт тодорхой хүсэлт (requiest) явуулаад түүнээс ирүүлсэн мэдээллийг хэрэглэгчид үзүүлэх үүргийг голлон гүйцэтгэн харин өгөгдлийн сангаас мэдээлэл татан, хуудсыг бүрдүүлэх, буцаан дамжуулах бүхий л ажлыг сервер хариуцан хийдэг. Та ямар нэгэн сайт бүтээж байсан бол яг ийм үүргийг Php хэл сервер талд гүйцэтгэдэг гэдгийг мэдэх байх. Сайтын ямар нэгэн мэдээллийг өөрчлөх хэрэгтэй болбол хөтөч серверт дахин хүсэлтийг илгээн сервер хуудсыг бүрдүүлэн хөтөчид буцааснаар сайтын агуулга өөрчлөгдөнө. Эдгээр ажиллагааг хийхэд сервер тодорхой хугацаа зарцуулах нь ойлгомжтой тул ажиллагааг хурдан болгох зорилгоор мэрэгжилтнүүд сайтад хэрэглэгч талд үзүүлж буй хуудаст javascript -ийг оруулснаар зарим нэгэн зүйлийг динамикаар буюу серверт хандахгүйгээр хийх боломжийг нэвтрүүлсэн. Үүний үр дүнд олон төрлийн ажиллагааг хөтөч дээр шууд хийн хуудсыг удирдах боломжтой Jquire гэх мэтийн сангууд бий болсон. Эдгээр сангуудад тодорхой ажиллагаануудыг хийх нэгдсэн стандарт байхгүй байсан нь асуудал болж байлаа. Жишээлбэл сайтад нэвтрэх формд логин, нууц үгээ оруулаад серверт илгээхэд тухайн асуудлын шийдлийг сан болгон өөрийнхөөрөө шийдэх жишээтэй. Ажиллагаануудыг тодорхой стандарттай болгох үүднээс javascript фреймворкууд гарч ирсэн. Олонд танигдсан фреймворкууд гэвэл Angular, React -ийг нэрлэж болно. Vue бол Angular, React -ийн сайн талуудыг өөртөө шингээсэн сурахад энгийн, маш жижигхэн фреймворк. Фреймворкийн албан ёсны сайтаас харвал

Vue фреймворк шахагдсан байдлаараа ердөө 20KB хэмжээтэй нь харагдана. Vue -г дараах байдлаар ашиглах боломжтой.

  • Өмнө нь хийгдсэн сайтын нэмэлт хэрэгслээр. Өөрөөр хэлбэл та Php дээр зохиосон сайтдаа тодорхой динамик ажиллагааг оруулъя гэвэл фреймворкийг хуудастаа оруулаад түүний боломжийг чөлөөтэй ашиглаж болно.
  • Vue фреймворкийг ашиглан бүрэн хэмжээний SPA (single page application) програмыг зохиож болно.

Одоогоор Vue -ийн Github хуудасны хэрэглэгчдийн үнэлгээ Star -ийн тоог Angular, React -ийнхтай харьцуулбал тэднээс давсан үзүүлэлттэй болоод байгаа. Та үүнийг өөрөө шалгаад үзээрэй. Vue -гийн зохиогч Evan You нь Angular2 -ын боловсруулалт дээр ажиллаж байсан мэрэгжилтэн бөгөөд өмнө нь гарсан javascript фреймворкуудын сайн талуудыг илүү хөнгөн, ашиглахад энгийн болгон шинэ фреймворкдоо оруулсан нь гарцаагүй. Дараагий хичээлүүдээр Vue -гийн боломжуудыг судлах болно.

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

Холбоотой материалууд
Төслийн бүтэц

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

Сүүлийн үед веб програмчлалд хүчтэй орж ирж буй javascript фреймворкуудын нэг бол яах аргагүй VueJs сан. Javascript -ийг ашиглахгүйгээр вебэд суурилсан програмыг динамик болгох аргагүй тул хөтөчийн хэлийг үзэн судлах зайлшгүй шаардлагатай гэж үзэн Vue фреймворкийн хичээлүүдийг цувралаар нийтэлж байгаа билээ. Хичээлүүдийг Vue фреймворкийн үндсэн ойлголтууд багц хичээлээс бүгдийг үзээрэй. Vue CLI -ийг суулган түүгээр шинэ төслийн генераци хийхэд төслийн нэрээр хавтас үүсгэдэг гэдгийг CLI суулган төсөл үүсгэх хичээлд үзсэн. Vue CLI -ийн үүсгэсэн хавтасыг код засварлагч дээр нээвэл

дээрх зурагт үзүүлсэн бүтэцтэй харагдана. Хавтаст доторх файлууд ямар үүрэгтэй, зориулалттай болохыг авч үзье.
Жич: Vue CLI хэрэгслийг маш хурдтай хөгжүүлж байгаа учраас зарим зүйлүүд хичээлийнхтэй тохирохгүй байх магадлалтай тул хэрэгслийн албан ёсны сайтаас хамгийн сүүлийн мэдээллийг тогтмол авч байхыг сануулъя.

v-show ба v-if директивүүд

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

Хэрэглэгч талын хуудасны элементүүдийг удирдах бас нэгэн арга бол v-if директивийг ашиглах юм. Хуудас дахь элементүүдийг удирдах ажиллагааг хөнгөн эвтэйхэн хийдэг нь раектив фреймворкуудын нэг давуу тал бөгөөд хичээлээр v-if директивийн ажиллагааны онцлогийг

    <body>
        <div id="app">
            <h1 v-if="isVisible">Гарчиг 1</h1>
            <h2 v-else style="color: red">Гарчиг 2</h2>
            <hr>
            <button @click="isVisible = !isVisible">Сэлгэгч</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>

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

Динамик өгөгдлийг харуулах

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

Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>1+1</strong></p>
</div>

export default car

гэж өөрчлөөд хуудсаа харвал

useRef

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

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

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

Алдааны боловсруулалтад…

Онцгой нөхцлийг дуудсан кодийг try блок эсхүл онцгой нөхцлийг боловсруулах catch блокгүй try..catch бүтцэд байршуулсан бол систем тохирох…

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

 
Дэвсгэр компонент

Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад

дээрх байдлаар харагдаж…

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

 
Үржэх дүрэм

Үржих үйлдэлд байр сэлгэх, бүлэглэх, гишүүнчлэн үржүүлэх гэсэн дүрмүүд үйлчилдэг. Эдгээрийг эхнээс нь сайн ойлгон цээжлэх хэрэгтэй.  

…

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

 
Төлөв (State)

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

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

 
Шулуунтай харьцангуй…

Тэгш хэм гэдэг нь тухайн обьект эсхүл түүний хэсэг тэгш хэмийн төв гэж нэрлэдэг тодорхой цэг, тэнхлэг, хавтгайтай…

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

 
Алдааны классийг…

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

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

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

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг…

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

 
Нэг ба…

Математикийн үйлдлүүдэд нэг ба тэг тоонууд онцгой шинжүүдтэй. Үржих үйлдэлд нэг ба тэг

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

 
Давталт (Iterator)

Давталт (Iterator) паттерн нийлмэл обьектын бүх элементүүдэд тэдгээрийн дотоод бүтцийг задлахгүйгээр хандах абстракт интерфейсийг тодорхойлдог. C# хэл дээр…

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

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

бол b, c, d -г ол.

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

 
Бодлого 3.106

|5x+4|=10 тэгшитгэлийг бод.

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

 
Бодлого 2.133

илэрхийллийн утгыг ол.

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

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