Динамик чиглүүлэгч

Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон

<template>
  <div>
    <h1>Cars page</h1>
    <ul>
      <router-link 
        tag="li" 
        v-for="car in 5" 
        :to="'/car/' +car"
        :key=car 
      >
        <a>Car {{car}} </a>
      </router-link>
    </ul>
  </div>
</template>

гэж өөрчилье.

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

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

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

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

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

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

r_07_02_01

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

Аргад параметрүүд дамжуулах

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

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

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

өөрчилсөн. Хөтөч дээр хуудсаа нээгээд Нэмэгдүүлэх товчийг дарвал тоолуурын утга нэгээр нэмэгдэж байгаа эсэхийг шалган үзээрэй.

CSS классуудтай ажиллах

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

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

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

React хук

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

React 16.8 хувилбараас компонентийг Component классаас удамшуулахгүйгээр энгийн функц хэлбэрээр буюу функционал компонентийг бичих боломж бий болсон.
React компонентийн ажиллагааны үндэс бол төлвийн удирдлагад оршдог. Өөрөөр хэлбэл компонентийн төлвийг тодорхойлсон обьектийн аль нэгэн эсхүл бүхэлд нь өөрчлөлт ороход React энэ төлвөөс хамааралтай дэлгэцийн хэсгийг дахин зурдаг. Бид өмнөх хичээлүүдэд ашиглаж байсан Component классаас удамшсан компонентийн төлвийг өөрчлөхдөө this.setState({ pageTitle: newTitle }) гэх байдлаар setState аргыг ашиглаж байсан.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэгшитгэлийн хувьд утгыг ол

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

 
Бодлого 12.061

тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.

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

 
Бодлого 16.046

тэнцэтгэл b -ийн ямар утганд биелэх вэ?

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

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