Нүүр » Программчлал » Javascript » template шинж

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 тегд авахгүй бол хуудасны ажиллагаанд алдаа өгнө. Үүнийг өөрсдөө шалгаарай.

 

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

Math обьект

Математикийн тогтмолууд болон математик тооцоолол хийх аргууд болон шинжүүдийг агуулсан дотоод обьект юм. Array, Date обьектуудаас ялгаатай нь хуулбар үүсгэх…

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

Жагсаалттай ажиллах

Интернетэд суурилсан технологи програм бүтээх ажилд зонхилох байр суурийг эзлэх болоод байгааг хүн бүр мэднэ. Учир нь интернет өнөөдөр асар…

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

Angular фреймворк

Сүүлийн жилүүдэд Angular, React, Vue гэх мэт Javascript сангуудын хөгжлөөр интернет програмчлалд динамик ажиллагаагтай сайт боловсруулах шинэ давалгаа үүссэн. Энэ…

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

CSS классуудтай ажиллах

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн…

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