Интерполяц

Хичээлээр 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Тусгай эрх авах

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

Холбоотой материалууд
RxJs санг суулгах

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

Сүүлийн жилүүдэд интернетэд сууриласан програмуудын хэрэглэгч талын хуудсыг javascript сангуудыг ашиглан боловсруулах хандлага эрчимтэй хөгжиж байна. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг нь сервер талын ачааллаг бууруулах, програмыг ажиллагааг илүү динамик, интерактив болгох, сервертэй өгөгдөл солилцох ажиллагаа зэргийг илүү хөнгөн хялбар болгоход чухал хэрэгтэй зүйл. Одоо цагт хэрэглэгчдийн компьютеруудын хүчин чадал, өгөгдөл боловсруулах хурд гээд бүхий л нөөцүүүд хангалттай сайжирсан нь нэг хуудаст программ буюу SPA -г боловсруулан ашиглах таатай нөхцлийг бүрдүүлсэн. Javascript хэлний боломжийг бүрэн ашиглан төрөл бүрийн өгөгдлүүдтэй их эвтэйхэн ажиллах боломжиг RxJs сан олгодогийг та хичээлүүдээс мэдэх болно.

Хичээлд RxJs санг компьютертаа суулган, туршилтын төслийг үүсгэхийг авч үзэцгээе. Хичээлд WebStorm засварлагчийг ашиглах ч та өөрийн дуртай засварлагчийг ашигласан ч болно.

Роутерийг тохируулах

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

Vuejs фреймворкт роутингийг /чиглүүлэгч/ хийдэг vue router пакетыг vue-router -ийг суулгах хичээлээр төсөлдөө нэмэн суулгасан. Одоо хэрэглэгчийн сонгосон хаягаас хамааран дэлгэц дээр үзүүлэх хуудсуудыг бэлтгэх хэрэгтэй. Иймээс төслийн src хавтаст pages хавтасыг үүсгээд түүнд роутерийн утгаас хамааран үзүүлэх хуудас буюу компонентуудыг үүсгэн өгье. pages хавтаст

<template>
  <h1>Home page</h1>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

Үйл явц нэмэх

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

Төлөв үүсгэх хичээлд App компонентийн бүх төлвүүдийг нэг дор state обьектод багцалсан. react -ийн төлвүүдтэй хэрхэн ажиллахыг харахын тулд App компонентод товч оруулаад түүн дээр дарахад h1 гарчигаар үзүүлэх текстийг солигдох ажиллагааг оруулъя. Үүний тулд App компонентийн кодод h1 гарчигийн доор

        <h1>
          {this.state.pageTitle}
        </h1>
        <button>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />

button тегээр Гарчиг өөрчлөх нэртэй товчийг нэмэн оруулаад хуудсаа харвал

Энгийн шүүлтүүр үүсгэх

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

VueJs фреймворкийн шүүлтүүр ойлголтын тухай авч үзье. Хэрвээ та Angular фреймворкийг судалж байсан бол Pipe гэдэг ухагдхууныг мэдэх байх. VueJs фреймворкийн шүүлтүүр бол Pipe -тай ижил бөгөөд ямар нэгэн мөр эсхүл компонентийн хэв /шаблон/ дэх элементүүдийн харагдах байдлыг өөрчлөн үзүүлэх тусгай хувиргагч юм. Үүнийг дараах жишээн дээр авч

<template>
  <div>
      <h2>{{ title }}</h2> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }  
}
</script>

үзье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

a ба b катеттай тэгш өнцөгт гурвалжин ерөнхий тэгш өнцөгтэй квадратыг багтаасан бол квадратын периметрийг ол.

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

 
Бодлого 15.055

функцийн графикийн (0,-1) цэгт татсан шүргэгч шулуун ба координатын тэнхлэгүүдээр хашигдсан мужийн талбайг ол.

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

 
Бодлого 5.078

тэнцэтгэл бишийн хамгийн их бүхэл шийдийг ол.

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

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