template шинж

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 айдитай divtitle талбарт үзүүлж байгаа.

Хуудсыг нээвэл

Vue програм текстийг үзүүлнэ. Энд хүртэлх хичээлүүдэд Vue -гийн тохиргооны обьектод el талбарыг заавал тодорхойлон түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг заан өгч байсан. Vue -ийн хувийн инициализацийг хийх өөр арга бий. Үүний тулд кодыг

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                }
            });
            vue.$mount('#app')
        </script>        
    </body>

гэж өөрчилье. Кодоос el: '#app' мөрийг хасаад Vue -ийн шинэ хувийг vue хувьсагчид авсан. Дараа нь Vue -гийн обьектын тусгай mount аргыг дуудахдаа түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг дамжуулна. Хуудсаа шинэчилбэл

бүгд хэвийн ажиллана. Програмын инициализац зөв хийгдэж байгааг шалгах үүднээс үзүүлэх текстийг өөрчилсөн болно. Эндээс Vue -ийн хувийн инициализацийг mount аргаар хийж болох нь. Үнэн хэрэгтээ mount аргыг дуудалгүй el: '#app' мөрийг заан инициализац хийхэд Vue -гийн обьект өөрийн mount аргад хандан app айдитай элементэд инициализацийг хийдэг.
Үүнээс гадна Vue -ийн тохиргооны обьектод template талбарт хуудасны шаблоныг заан өгч бас болдог. Жишээ нь

    <body>
        <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                },
                template: '<h1>{{ title }}</h1>'
            });
            vue.$mount('#app')
        </script>        
    </body>

Энд app айдитай элементэд байсан html кодыг хасаад javascript кодод Vue -ийн тохиргооны обьектод template талбарт хуудасны html кодыг өгөөд дараа нь mount аргаар app айдитай элементэд инициализац хийсэн. Хуудсыг нээвэл

бүгд хэвийн ажиллана. Ялгах үүднээс хуудаст үзүүлэх текстийг h1 тегээр үзүүлсэн. Хуудасны хэвийг template талбараар дамжуулах энэ аргад тодорхой хязгаарлалт байдаг. Хэрвээ шаблонд олон тооны html элементүүд орохоор бол тэдгээрийг ямар нэгэн суурь элементэд оруулан багцлах хэрэгтэй. Жишээ нь

    <body>
        <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                },
                template: '<div><h1>{{ title }}</h1><p>Өдрийн мэнд</p></div>'
            });
            vue.$mount('#app')
        </script>        
    </body>

template талбараар дамжуулах html кодод title талбараас гадна p тегэд текстийг нэмэн үзүүлэх тул тэдгээрийг нэгтгэсэн div тегд оруулсан. Хуудасны ажиллагааг шалгавал

бүгд хэвийн ажиллана. Хэрвээ шаблоныг нэгтгэсэн div тегд авахгүй бол хуудасны ажиллагаанд алдаа өгнө. Үүнийг өөрсдөө шалгаарай.

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

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

Хэрэглэгч талын хуудасны боловсруулалтад javascript дэвшилтэд буюу реактив фреймворкуудыг ашиглах нь улам өргөн болж байгаа тул ойрын жилүүдэд энэ чиглэлийн програм зохиогчдын эрэлт өндөр болох нь гарцаагүй. Иймээс програмчлалын мэрэгжлээр суралцаж байгаа болоод ажиллаж буй залуучууд Angular, React, Vue зэрэг фреймворкуудын ажиллагааг судлан суралцахыг зөвлөе. Фреймворкуудийн ажиллагаанууд өөр өөрийн онцлогтой хэдий ч ерөнхий зарчим бараг ижил тул аль нэгийг нь сурсан байхад бусдыг нь амархан сурна. VueJs -ийн бусдаасаа ялгарах онцлог гэвэл суурь пакет жижигхэн, суралцахад хөнгөнд оршино. Энэ нь фреймворкийн функционал муу гэсэн үг биш гэдгийг сануулъя.VueJs -ээр хамгийн өндөр шаардлага тавьдаг хэрэглэгчийн хэрэгцээг ч хангах програмыг төвөггүй боловсруулж чадна.

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

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

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

Бид Дадлага. /Төсөл үүсгэх/ хичээлээр өмнөх хичээлүүдэд үзсэн онолын мэдлэгээ батагах үүднээс төслийг үүсгэсэн. Одоо дадлагын төслийн зохион байгуулалтыг хариуцах суурь компонентийг үүсгэе. Энэ компонент сайтад үзүүлэх хуудасны бүх элементүүдийг багцлан агуулах юм. Энэхүү суурь компонент бусад компонентуудийг багцлах тул дээд түвшингийн компонент гэж үзэж болно.

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

JavaScript –ийн зориулалт

Ямарч програм хангамжийн хөгжлийн хандлага нь аюулгүй байдлыг хангасан интерактив ажиллагаатай, ажиллахад эвтэйхэн интерфейстэй байхад оршино. Энэ нь хэрэглэгч тухайн програмыг үр дүнтэй ашиглах үндэс болохоос гадна програм боловсруулагчдын ашигт ажиллагааг өндөрсгөн улмаар өрсөлдөх чадварыг дээшлүүлнэ.
Энэ хандлага нь интернет програмчлалыг тойрч гарахгүй нь тодорхой. Сүүлийн жилүүдэд интернет програмчлал асар хурдтай хөгжиж байна. Интернетэд сайтад байрлуулсан маш их хэмжээний мэдээллийг хэрэглэгчид хүргэхэд хуудсыг үзэж байгаа хүнтэйгээ шууд харьцахгүйгээр төсөөлөхөд бэрхшээлтэй. Сайтад үзүүлж байгаа материалыг хэрэглэгчид хир зэрэг чанартай талбарлахаас тухайн сайтын үр өгөөж шууд хамаарна. HTML хэл нь статик веб хуудсыг үүсгэх боломжийг бүрдүүлдэг. Веб хуудсанд динамик байдлыг бий болгох олон технологийн нэг нь JavaScript юм.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

функцийн интервал дахь хамгийн бага утгыг ол.

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

 

Зөв дөрвөн өнцөгт пирамидын өндөр 4. Хажуу ирмэг суурийн хавтгайд 30 градусын өнцгөөр налсан бол пирамидын хажуу ирмэгийг ол.

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

 

бол M·N=?

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