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 -гийн боломжуудыг судлах болно.

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

Холбоотой материалууд
Үйл явцын модификаторууд /тохируулагч/

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

VueJs -ийн хуудсанд үйл явц нэмэх ажиллагааны дараагийн боломж бол үйл явцын модификатор буюу тохируулагч юм. Орчуулга сайнгүй болсон байх талтай тул модификатор гэдгээр нь ойлговол зүгээр. Хичээлээр модификаторууд ямар хэрэгтэй, юу хийдэг талаар авч үзье. Жишээ нь E-surgalt сайтад шилжих холбоосыг агуулсан

    <body>
        <div id="app">
            <h2>
                <a href="https:" target="_blank">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            ...
        </script>
    </body>

хуудас байлаа гэж бодъё. Хөтөч дээр хуудсыг нээгээд холбоос дээр дарвал E-surgalt сайтыг шинэ цонхонд нээнэ.

Радио товч

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

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="radio"> instagram
    </label>
    <label>
      <input type="radio"> twitter
    </label>    
    <label>
      <input type="radio"> facebook
    </label>    

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал

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

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

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

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

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

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

r_07_02_01

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 16.072

g(x)=2x-3x2 нь f(x)=x2-x3 -ийн уламжлал бол -ийг ол.

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

 
Бодлого 14.080

хязгаарыг ол.

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

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