CLI ямар хэрэгтэй вэ?

Хичээлээр Vue CLI гэж юу болох, юунд ашиглах, яагаад мэдэх хэрэгтэй тухай авч үзье. Vue CLI бол VueJS төслийг маш хурдан, эвтэйхэн байдлаар үүсгэн ашиглахад зориулагдсан хэрэгсэл. Бид өмнөх хичээлүүдэд html файлд VueJS санг оруулаад түүнийг ашиглаж болж байхад VueJS дээр бүтэн төсөл үүсгэх ямар шаардлагатай гэж бодож байж болно.

VueJS сангаар html -ийн элементүүдийг динамикаар удирдан өөрчлөхийн дээр түүнийг ашиглан том хэмжээний програмыг боловсруулж болох хүчирхэг хэрэгсэл. Эндээс том хэмжээний програмын кодын зохион байгуулалтыг хэрхэн үүсгэх вэ гэсэн асуулт гарч ирнэ. Том програмын ажиллагаануудыг сайн задлахын тулд тэдгээрийг төрөл бүрийн компонентуудад хуваах хэрэгцээ бий болох учраас бүх кодыг нэг javascript файлд агуулах боломжгүй болдог. Харин Vue CLI хэрэгслээр үүсгэсэн VueJS төсөл модулуудыг автоматаар ачааллах, төрөл бүрийн препроцессорууд дэмжих, сервертэй мэдээлэл солилцох API -тай ажиллах бэлэн сервесүүд гэх мэтээр олон боломжуудыг өгнө. Иймээс дараагийн хичээлүүдээр Vue CLI хэрэгслийг хэрхэн суулган ашиглахыг үзэх болно. Хэрэгслийг өөрөө сулгаж болох ч хугацаа, хүч хөдөлмөрийг хэмнэх үүднээс VueJS -ийн боловсруулагчид бидний өмнөөс бүхнийг бэлтгэн өгсөнг ашиглах нь илүү.  
Цаашхи хичээлүүдийн жишээг Vue CLI төслийг ашиглан хийх тул хэрэгслийг суулгах хэрэгтэй. Үүнээс гадна цаашид тодорхой сан, хэрэгслүүдийг суулгахад танд Node.js програм хэрэгтэй болно. Хэрвээ таны компьютерт Node.js суугаагүй бол зааврыг үзэн заавал суулгарай.

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

Холбоотой материалууд
Actions -ийг ашиглах

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

Хичээлээр Vuex store -ийн үндсэн 4 ухагдхууны сүүлийнх болох action -ий тухай авч үзнэ. Mutation -оор Vuex store -ийн state -ийг л өөрчилдөг гэдгийг Mutations -ийг ашиглах хичээлээс мэдсэн. Үнэн хэрэгтээ mutation бол синхроноор ажиллан state -д утга олгох ердийн setter юм. mutation -д ямар нэгэн асинхроний үйл явцыг дамжуулж болдоггүй. Гэтэл програм сервер, интернет сервисүүд гэх мэт асинхрон үйл явцуудтай ажиллах шаардлага гарах нь дамжаггүй. Тэрхүү асинхрон үйл ажиллагааны үр дүнгээс хамааран state -д утга олгох ажиллагаа ихээр тохиолдох учраас асинхрон үйл явцуудтай Vuex store -ийн action нэртэй хэрэгслийг ашигладаг.

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

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

Хэрэглэгч талын хуудасны элементүүдийг удирдах бас нэгэн арга бол 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>

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

Төслийн бүтэц

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

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

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

Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Хоёр ажилчин хамтарч ажиллавал даалгаварыг 2 цаг 48 минутад биелүүлж чадна. Дангаараа ажиллавал нэгдүгээр ажилчин хоёрдугаараасаа 4 цаг 12 минутын өмнө даалгаврыг биелүүлнэ. Тэгвэл тэд дангаараа ажиллавал: Нэгдүгээр ажилчин цагт, хоёрдугаар ажилчин цагт даалгаврыг гүйцэтгэнэ.

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

 
Бодлого 12.051

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

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

 
Бодлого 9.074

Тойргийн диаметрт тулсан багтсан өнцөг хэдэн градустай тэнцэх вэ?

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

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