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

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

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

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

үзье.

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

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

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

Холбоотой материалууд
Компонентууд ямар хэрэгтэй вэ?

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

Програмын төслийг боловсруулахдаа системийн ажиллагааг бие даасан, бие биеэсээ үл хамаарах хэсгүүдэд хуваан хэсэгчлэн кодлон тестлэхийг сайн практик гэж үздэг. Vuejs санд энэ аргачлалыг хэрэгжүүлэх суурь технологи бол компонент юм. Ер нь Vue -гийн төсөл төрөл бүрийн компонентуудаас бүрддэг тул хичээлийн материалыг сайтар судлан ойлгон авахыг хичээгээрэй. Хичээлээр компонент гэж юу болох, ямар хэрэгтэй гээд компоненттой холбоотой асуудлуудыг авч үзье. Асуудлыг энгийнгээс эхлэн ойлгох үүднээс

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Компонент</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
            })
        </script>        
    </body>
</html>

агуулга бүхий html файлыг авч үзье. Файлд app айдитай div блок түүнтэй холбосон Vue -гийн хувийг үүсгэсэн кодыг бид өмнөх хэсгээс мэднэ. 

Дээд түвшингийн компонентууд

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

Дээд түвшингийн компонент гэж юу болох тэдгээрийг хэрхэн үүсгэн ашиглахыг авч үзье. Үүний тулд төслийн Car компонентийн кодийг дараах байдлаар

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>
          Устгах
        </button>
      </div>
    );
  }
}

export default Car;

өөрчилье.

Функц ба хувьсагч

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

Функцын тухай ойлголт

Функц – гэдэг нь программын дурын хэсгээс дуудан ажлуулах боломжтой Javascript кодын хэсэг. Функцыг ашиглахын тулд түүнийг эхлээд тодорхойлох хэрэгтэй. Функц давтагдахгүй нэртэй байх ёстой. Нэр өгөх дүрэм нь хувьсагчийн нэрийг өгөх дүрэмтэй ижилхэн. Функцыг тодорхойлох бичлэг нь ерөнхийдээ доорх хэлбэртэй байна.

function <функцын нэр> ([<параметрүүдийн жагсаалт>])
{
     JavaScript оператор;
     JavaScript оператор;
     . . .
     JavaScript оператор;

     [return <Буцаах утга>]
}

Цаг хугацаа Date обьект

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

JavaScript -д он сар өдөр болон цагтай ажиллахад зориулагдсан Date гэдэг тусгай обьект байдаг. Обьектыг JavaScript -ийн бараг бүх хувилбарууд дэмждэг болохоор түүний зохицох эсэхт санаа зоволтгүй ашиглах боломжтой. Ихэнх программчлалын хэлүүдийн адилаар JavaScript цаг хугацааг шууд утгаар нь биш Unix цаг тоолол буюу 1970 оны 1-р сарын 1 ний 0 цаг 0 минутаас хойш өнгөрсөн секундын тоо хэлбэрээр тооцдог. Утгын бүх хэсгүүд тэгээс эхэлсэн индекстэй байдгаараа Date обьект онцлогтой.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?

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

 
Бодлого 3.047

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

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

 
Бодлого 6.064

b1=3, bn=96, Sn=189 геометр прогресийн 8-р гишүүнийг ол.

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

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