HTML код үзүүлэх

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

    <body>
        <div id="app">
            <h2>
                {{ link }}
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    link: '<a href="https:">E-surgalt</a>'
                }
            })
        </script>
    </body>

гаргах гээд үзье. Хуудсаа хөтөч дээр нээвэл

бидний тооцож байснаас өөр үр дүнг үзүүлнэ. Хөтөч link -д тодорхойлон өгсөн мөрийг хуудаст холбоос байдлаар биш зүгээр л  Html кодыг агуулсан мөр хэлбэрээр үзүүлсэн. Vue тохиргооны обьектод тодорхойлогдсон Html кодыг хуудаст зөв хэлбэрээр боловсруулахад v-html директивийг

    <body>
        <div id="app">
            <h2 v-html="link"></h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    link: '<a href="https:">E-surgalt</a>'
                }
            })
        </script>        
    </body>

хуудасны шаблоны тегд дээрх байдлаар ашиглана. Кодод h2 тегд v-html директивийг заагаад түүний утгаар Html кодыг агуулан буй хувьсагчийг өгсөн. Ингэснээр v-html директив link хувьсагчийн утгыг h2 тегд холбон өгснөөр Vue тухайн хувьсагчийн агуулгыг компиляц хийн шаблонд оруулна гэдгийг мэднэ. Одоо хуудсыг шинэчилбэл

link -д тодорхойлсон Html холбоосыг хуудаст зөв байдлаар үзүүлэх бөгөөд холбоос дээр дарвал E-surgalt сайтад шилжилт хийгдэнэ. v-html директив бэлэн тодорхойлогдсон Html кодыг хуудаст үзүүлэх үүрэгтэй ч түүнийг ашиглахдаа маш нямбай хандах ёстойг анхааруулъя. Жишээ нь та серверээс ямар нэгэн бэлэн html кодыг аван хуудаст v-html директивийг ашиглан харуулдаг байлаа гэхэд хорлогчид үүнийг ашиглан хуудаст хортой кодыг оруулан ирж мэднэ. Хэдийгээр Vue фреймворк v-html директивт тодорхой хэмжээний хамгаалалтыг оруулсан байдаг ч түүнийг ашиглахдаа маш нямбай хандахыг зөвлөе. Иймээс v-html директивийг програмдаа ашиглахын оронд Vue фреймворкийн өөр боломжуудыг түлхүү ашиглах нь илүү. Гэхдээ Vue фреймворкт Html кодыг хуудаст оруулан ирэх боломж байдгийг мэдэж байх хэрэгтэй.

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

Холбоотой материалууд
Өөрийн хук зохиох

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

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.

Компонентын нэр

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

Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө

            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.

Директивийн параметрүүд

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

Хичээлээр директивийн боломжуудыг хэрхэн өргөжүүлэхийг авч үзье. Эхлээд төслийн кодыг багахан цэгцлэе. Хичээлд Өөрийн директив үүсгэх , Директивийн амьдралын цикл хичээлийн жишээг ашиглах тул хичээлүүдийг үзэхийг зөвлөе. Директивийн амьдралын циклийг шалгахаар App компонентод нэмсэн товчнуудыг хасан

<template>
  <div>
      <h2 v-colored>{{ title }}</h2> 
  </div>
</template>

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

кодтой болгосон.

Хариултын боловсруулалт

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

Хичээлээр хэрэглэгч сорилгын асуултын хариугаар сонгосон хувилбарын шалгалтын логикийн боловсруулалтыг хийе. Шалгалтыг Quiz компонентийн onAnswerClickHandler аргад

  const onAnswerClickHandler = (answerId) => {
    console.log("Хариултын Id:", answerId);
    if (quiz[activeQuestion].rightAnswerId === answerId) {
      const timeout = window.setTimeout(() => {
        if (isQuizFinished()) {
          console.log("Finished");
        } else {
          setActiveQuestion(activeQuestion + 1)      
        }
        window.clearTimeout(timeout);
      }, 1000);
    } else {
      
    }        
  };

  const isQuizFinished = () => {
    return activeQuestion === quiz.length - 1
  }

гэж хэрэгжүүлье. Дэлгэц дээрх асуулт бол quiz массивийн activeQuestion индекстэй элемент бөгөөд rightAnswerId талбарт зөв хариултын дугаар байгаа. Энэ утгыг onAnswerClickHandler функцэд параметрээр ирсэн answerId /хэрэглэгч сонгосон хариултын id/ -тэй тэнцэж буйг шалгана.

Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

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

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

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

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

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

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

илэрхийллийг хялбарчил.

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

 
Бодлого 2.115

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

 
Бодлого 9.163

prob09_163_01Зурагт өгсөн ABC гурвалжны AN=9, BM=12 байх медианууд перпендикуляр ба O цэгт огтлолцох бол ONCM дөрвөн өнцөгтийн талбайг ол.

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

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