Өөрийн директив үүсгэх

Өмнөх хичээлүүдийн кодод директивүүдийг ашиглаж байсан ч тэдгээрийг Vue фреймворкийн тодорхой хэрэгсэл байдлаар ойлгон хэрэглэж ирсэн. Одоо директивүүдийн талаар дэлгэрүүлэн судлаж ойлголтоо гүнзгийрүүлэх цаг болсон. Директив гэдэг нь html шаблоны дотор ашиглан хуудасны элементүүдтэй харьцан ажиллах боломжийг өгдөг тусгай атрибут юм. Өмнөх хичээлүүдэд бид v-on, v-bind гэх мэтийн директивүүдийг их олон ашигласан. Энэ хичээлээр бид өөрсдийн директивийг үүсгэн ашиглаж сурцгаах болно. Хичээлд ашиглах төсөл доорх код бүхий

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

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

<style scoped>

</style>

нэг App.vue компонентоос бүрдэнэ.

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

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

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

  Нээгдсэн тоо: 1448 Бүртгүүлэх

ES6 хувилбарт бий болсон шинэ боломжуудыг судлах бэлтгэлийг Орчны тохиргоо хичээлээр үзсэн. Энэ хичээлээс ES6 хувилбарын шинэ боломжуудын талаар авч үзэж эхлэх ба хамгийн энгийн нь болох хувьсагчдад бий болсон шинэчлэлээс эхлэе.

const түлхүүр үг.

Javascript -ийн өмнөх хувилбаруудад хувьсагчийг var түлхүүр үгээр

var q = 1;
q = 2;
q = 'w';

үүсгээд цааш утгыг q = 2;, төрлийг q = 'w'; өөрчлөхөд ямар нэгэн асуудал үүсдэггүй. Гэвч Javascript -д утгыг нь солих боломжгүй тогтмол утга байдаггүй байсныг const түлхүүр үгээр зарлах боломжийг EcmaScript 6 -д бидэнд олгосон. Хэрвээ const түлхүүр үгээр

const MY_CONST = 1;
MY_CONST = 2;

MY_CONST тогтмолыг зарлаад дараа нь түүний утгыг өөрчлөх гэвэл webstorm тогтмолд утга олгох оролдлого хийлээ гэсэн алдааг заана. index.js файлын компиляцийг хийх гээд үзье.

  Нээгдсэн тоо: 536 Бүртгүүлэх

Jsx нь html -тэй төстэй харагдах ч ердийн javascript бичлэг болох, хэрхэн ажилладагийг JSX хичээлээс мэдсэн тул Jsx -ээр хуудасны тэмдэглээг хийхэд ямар хязгаарлалт үйлчилдэг талаар авч үзье.

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

  Нээгдсэн тоо: 1002 Бүртгүүлэх

html хуудас бүхэлдээ DOM /document object model/ буюу хуудасны обьектын моделоос бүрддэг. Хуудас дээрх элементүүдэд хандан тэдгээрийг удирдах асуудал хэрэглэгч талын хуудастай ажиллах ажиллагаанд чухал байр суурийг эзэлдэг. Иймээс VueJs -ээр html хуудасны элементүүдэд хэрхэн хандахыг авч үзье. Html элементүүдэд хандах ref буюу reference гэдэг бүтэц бий. Хичээлд

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="updateFirstTitle">Гарчиг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue -гийн хувь'
                },
                methods: {
                    updateFirstTitle(){
                        this.title = "Шинэ гарчиг"
                    }
                }
            })
        </script>        
    </body>

h2 гарчиг түүний утгыг солих Гарчиг өөрчлөх товч бүхий хуудсыг ашиглана. Гарчиг өөрчлөх товчийг дарахад title хувьсагчийн утгыг Шинэ гарчиг болгон өөрчлөх updateFirstTitle функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

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

Сайн тайлбартай программын код бичих бол программ зохиох соёлоос гадна кодыг ойлгомжтой болгох үндсэн арга. Иймд та программчлалын хэлийг үзэж эхлэх үеэсээ тайлбарыг ашиглаж сурахыг хичээгээрэй. Эхлэн суралцаж байхад том хэмжээний код бараг бичдэггүй болохоор тайлбарыг нэг их анзаардаггүйгээс болоод кодод тайлбар хийхгүй бичээд сурах гээд байх муу талтай. Энэ бол маш буруу барил гэдгийг танд сануулъя. Та том хэмжээний ажил гүйцэтгэх үедээ голдуу багаар ажиллах тул таны кодыг бусад хамтран ажиллагсад ойлгох шаардлага гарч болохыг санах хэрэгтэй. Том хэмжээний кодод тайлбар хийхгүй бол хэсэг хугацааны дараа та өөрөө ч ойлгохгүй байдал үүсч болохыг сануулъя. За ингээд хичээлээ эхлэе.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

Талууд нь 5; 12; 13 нэгж урттай гурвалжны хэлбэрийг тогтоогоорой.

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

 

Призмд багтсан V эзэлхүүнтэй дөрвөн өнцөгт зөв пирамидийн оройнууд дээд суурийн төв болон доод суурийн талуудын дундаж цэгүүд харгалзах бол призмийн эзэлхүүнийг ол.

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