مەن Vue ئۈگۈنۈش قارارىغا كەلدىم !

مەن ھازىرغا قەدەر پىروگرامما تىلىنى ئۆزۈمنىڭ ھاجىتىدىن چىققۇدەك ئۆگەنسەم بولدى، ھەممىنى ئۆزۈم 0 دىن باشلاپ يېزىشىم كېرەك دىگەندەك مۇتەسسىپ خىياللار بىلەن Bootstrap تىن باشقا ھېچقانداق رامكىنى تۇتۇپ تۇرۇپ ئۆگۈنۈپ باقمىغان، مەيلى باشقىلارغا بىرەر بەت سىستىمىسى يېزىپ بىرەي ياكى ئۆزۈمگە يازاي پەقەتلا رامكا ئىشلەتمەي ئىپتىدائىي ھالەتتە يازاتتىم. ئەمما يېقىندىن بويان windows قا كۆزنەك پىروگگىراممىسى يېزىشنى ئۆگەنمەكچى بولۇپ ئىزدەنسەم، C# تىن باشقا يەنە نۇرغۇن يېڭى تېخنىكا بىلىملەرنى ئىگەللىشىم كىرەككەن، قارىسام بۇنىڭغا يەنە نۇرغۇن ۋاقىت كېتىدىكەن، شۇڭا نەچچە ۋاقىتتىن بېرى ئۆگەنگەن web پىروگراممىسى تۈزۈش بىلىملىرى (HTML,CSS,JS) دىن پايدىلىنىپلا windows قا كۆزنەك پىروگگىراممىسى يازغىلى بولماسمۇ دىگەن خىيال كاللامغا كەشتى، شۇنىڭ بىلەن توردىن ئىزدىنىش ئارقىلىق Electron دەپ ئاتىلىدىغان بىر رامكىنىڭ بارلىقىنى بىلىدىم، (بۇ توغۇرلۇق كىيىن تەپسىلى يازما يوللايمەن) بۇ رامكا ئارقىلىق HTML,CSS,JS دىن پايدىلىنىپلا Mac os بىلەن Windows قا بىرلا ۋاقىتتا يۇمشاق دىتال يازغىلى بولىدىكەن، ئەمما ئارقا بۆلەك (服务端） گە php ئىشلەتكىلى بولمايدىكەن، بۇ Node.js ئاساسىدا يېزىلغان رامكا ئىكەن، شۇڭا ئارقا بۆلەككە Node.js نى ئىشلىدىكەنمىز، مۇشۇ ئارقىلىق كومپىيوتىر بىلەن ئۇچۇر ئالماشتۇرش، بۇيرۇق بىرىش، ساندان مەشغۇلاتى قاتارلىقلارنى قىلىدىكەنمىز، شۇنىڭ بىلەن Node.js نىڭ مۇناسىۋەتلىك بۆلەكلىرىنى تىز سۈرئەتتە ئىگەللەپ چىقتىم، ئاندىن Electron ئۆگۈنۈشنى باشلىدىم، HTML,CSS,JS,Node.js نى بىلسەكلا electron ئارقىلىق ئالما ۋە ۋىندوۋىس كومپىيوتىرغا يۇمشاق دىتال يازغىلى بولىدىكەن، ئەمما بۇيەردە بىر مەسىلە كۆرۈلدى، يەنى بۇرۇن توربەت يازغان ۋاقتىمىزدا سانداندىكى ئۇچۇرنى PHP ئارقىلىق ئۇقۇپ ئالاتتۇق، ھەم HTML بەتتە يەنە شۇ PHP ئارقىلىق ھاسىللاپ كۆرسىتەتتۇق، چۈنىكى PHP بولسا HTML بىلەن كۈشلۈك ماسلىشالايتى، HTML بەتنىڭ خالىغان يىرىگە PHP كودلىرىنى خالىغانچە قىستۇرۇپ مەزمۇن ھاسىللايتۇق، ئەمما Electron نىڭ php بىلەن ھېچقانداق مۇناسىۋىتى يوق ئىكەن، بۇ ئارقىلىق يۇمشاق دىتال ياساش جەريانىدا مەيلى Sqlite بولسۇن ياكى Mysql بولسۇن پەقەت Node.js نىڭ مۇناسىۋەتلىك قىستۇرمىلىر ئارقىلىقلا ساندان مەشغۇلاتى قىلىدىكەنمىز، سانداندىن ئۇقۇپ ئالغان ئۇچۇرلارنى ئىكران يۈزىدە كۆرسۈتۈش ئۈچۈن كۆپ مىقتاردا ئىپتىدائىي ھالەتتىكى Dom مەشغۇلاتى قىلىشقا توغرا كىلىدىكەن، مۇشۇ مەسىلە ناھايىتى كۆپ ۋاقىتنى ئىسراپ قىلىۋىتىدىكەن، ئاددى بىر ئىقتىدارنى ئەمەلگە ئاشۇرۇش ئۈچۈنمۇ ناھايىتى كۆپ ۋاقىت سەرىپ قىلىشقا توغرا كىلىدىكەن، مەسىلەن تۆۋەندىكىدەك:

<div class="goods-container" id="goodsBox"></div>

<script>
    // 对象数组
    const goods = [
        { id: 1, name: '手机', price: 3999 },
        { id: 2, name: '平板', price: 2599 },
        { id: 3, name: '耳机', price: 299 }
    ];

    const box = document.getElementById('goodsBox');
    let html = '';

    goods.forEach(item => {
        html += `
            <div class="goods-item">
                <p>商品：${item.name}</p>
                <p>价格：${item.price}元</p>
            </div>
        `;
    });

    box.innerHTML = html;
</script>

ئەگەر ئۇچۇر ئاز، بەت يۈزى مۇرەككەپ بولمىسىغۇ مەيلى، ئەگەر ئازراقلا مۇرەككەپ، ئۇچۇر كۆپرەك بولۇپ قالسا ئادەمنى ھەقىقەتەن زىرىكتۈرۈپ قويىدىكەن، شۇڭا قارىسام electron دا تۈر يازغان ئادەمنىڭ 99% تى Vue دىن پايدىلىنىپ تۈر تاماملايدىكەن، شۇڭا مەنمۇ Vue ئۆگۈنۈشنى قارار قىلدىم. تۆۋەندە يۇقۇرقى كودتىكى ئۈنۈمنى Vue ئارقىلىق ئەمەلگە ئاشۇرغان مىسالنى كۆرۈپ باقايلى:

<div id="app" class="goods-container">
    <!-- v-for 循环渲染数组，key绑定唯一id -->
    <div class="goods-item" v-for="item in goods" :key="item.id">
        <p>商品：{{ item.name }}</p>
        <p>价格：{{ item.price }}元</p>
    </div>
</div>

<script>
    new Vue({
        el: '#app', // 挂载到#app容器
        data() {
            return {
                // 商品数组，和原生JS数据完全一致
                goods: [
                    { id: 1, name: '手机', price: 3999 },
                    { id: 2, name: '平板', price: 2599 },
                    { id: 3, name: '耳机', price: 299 }
                ]
            }
        }
    })
</script>

يۇقارقىدەك Vue بىزگە كۈشلۈك بولغان قېلىپ ماتورى (模板引起）تەمىنلەيدىكەن، ھەم بەت يۈزىنى يېڭىلىماي تۇرۇپ ئۇچۇر ئۆزگەرتىش قاتارلىق نۇرغۇن قۇلايلىق تەرەپلىرى بار ئىكەن، تۈر تاماملاش ۋاقتىنى بىر ھەسسە تىزلىتەلەيدىكەن، ( ھازىر مۇشۇنچىلىك چۈشەندۈرۈپ تۇراي) شۇڭا ئاۋال Vue ئۆگۈنۈپ ئاندىن Electron نى داۋاملىق ئۆگۈنۈش قارارىغا كەلدىمدە Vue2 دىن ئاتلاپ، بىۋاستە Vue3 تىن باشلاپ ئۆگۈنۈشنى باشلىدىم، شۇنىڭ بىلەن مەن كۆرگەن دەرىسنىڭ نۇرغۇن يەلىرىدە بىر قسىم ئۇقۇملارنى Vue2 بىلەن ئوخشاش دەپ ئاتلاپ ئۆتۈپ كەتتى، مەن Vue2 ئۆگەنمىگەندىكىن چۈشەنمىدىم، شۇنىڭ بىلەن يېرىمىغا كەلگەندە Vue2 دىن باشلاپ پىششىق ئۆگۈنۈپ مېڭىش قارارىغا كەلدىم. بۇنىڭدىن كىيىن بىلوگقا ئۈگۈش جەريانىدىكى يۇلۇققان مەسىلىلەرنى، قانداق ھەل قىلغانلىقىمنى، ئۈگۈنۈش خاتىرەمنى يوللاپ ماڭىمەن، (بۇ يەرگە يېزىش جەريانىدا ماڭا يەنە بىر تەكرار بولىدۇ).
ھازىر مەن كۆرىۋاتقان ماتىريال بولسا بىر پارچە كىتاپ، تۆتيۈز نەچچە بەت ئەتراپىدا، ئاندىن 146 قىسىملىق، جەمى 50 سائەت ئەتراپىدا چىققان بىر سىنلىق دەرىس، سىنلىق دەرىسنى ئاساس قىلىپ، قالدىسىغا كىتاپقا، ئورگان تورىدىكى ۋېنداڭسىغا سېلىشتۇرۇپ ئۆگۈنۋاتىمەن، بىلمىدىم قانچىلىك ۋاقىتتا تاماملىيالايمەنكىن تاڭ.