Post обьектыг үүсгэх

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд

<template>
  <div class="container pt-2">
    <div class="form-group">
      <label for="name">Машины нэр</label>
      <input type="text" id="name" class="form-control" v-model.trim="carName">
    </div>
    <div class="form-group">
      <label for="year">Машины он</label>
      <input type="text" id="year" class="form-control" v-model.number="carYear">
    </div>
    <button class="btn btn-success" @click="createCar">Машин үүсгэх</button>    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        carName: '',
        carYear: 2020
      }
    },
    methods: {
      createCar () {
        console.log('Машин үүсгэх')
      }
    }
   }
</script>

кодыг оруулан өгье.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Цэс нээх хаах компонент

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

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд түүн дотор цэсний шилжилтийн компонентийн MenuToggle хавтасыг үүсгээрэй. Компонентийн хавтаст

import React from "react";
import classes from "./MenuToggle.module.css";

const MenuToggle = (props) => {
  const cls = [classes.MenuToggle, "fa"];
  if (props.isOpen) {
    cls.push("fa-times");
    cls.push(classes.open);
  } else {
    cls.push("fa-bars");
  }

  return <i className={cls.join(" ")} onClick={props.onToggle} />;
};

export default MenuToggle;

template шинж

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

VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай div -д title талбарт үзүүлж байгаа.

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

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

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

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

useRef

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

олон гишүүнтийг үржигдхүүн болгон задал.

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

 
Бодлого 3.110

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

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

 
Бодлого 17.098

Тоног төхөөрөмжийн сайжруулалтын үр дүнд ажилчны хөдөлмөрийн бүтээмж жилд хоёр удаа нэг ижил хувиар дээшилжээ. Хэрвээ ажилчин нэг ижил хугацаанд өмнө нь 2500 х.н харин одоо 2809 х.н бутээгдхүүн хийдэг болсон бол хөдөлмөрийн бүтээмж өсөх бүрдээ хэдэн хувиар өссөн бэ?

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

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