مىسال : Vue.js دىن پايدىلىنىپ ئىكراندا سالام دۇنيا دىگەن خەتنى كۆرسۈتۈش.
يېڭىدىن بىر html ھۆججىتى قۇرۇپ باش قىسىمىغا Vue.js كود ئاممىرىنى ئەكىرىمىز. تۆۋەندىكىدەك :
<script src="../vue.js/vue.global.3.3.4l.js"></script>
Body قىسمىغا بىر
<div>خەتكۈچى ئېنىقلاپ ئەمەلى مىسال ( 实例 ) گە ئاسىدىغان تۈپ نوقتا (根节点) قىلىمىز، ID قىممىتىغا app نى بىرىمىز. ( خالىغانچە قىممەت بەرسەك بولىدۇ ) تۆۋەندىكىدەك :
<body> <div id="app"></div> </body>
<script>خەتكۈچىدىن بىرنى ئېنىقلاپ JavaScript كود رايۇنى ئىچىدە Vue.js ئەمەلى مىسالىدىن بىرنى قۇرىمىز. تۆۋەندىكىدەك :
<script>
const vue = createApp({ // 创建 Vue.js 实例
data(){ // 定义实例数据选项
return { // 返回实例数据集
info : "سالام دۇنيا!" // 定义变量 info 的值
}
}
})
vue.mount('#app') // 绑定实例到 HTML 标签上
</script>Vue ئوبىكتىپىنىڭ قۇرۇلما ( 构造 ) فۇنكىسىيەسى
()createAppئارقىلىق ئەمەلى مىسالدىن بىرنى قۇرىمىز، پارامىتىرى ( 参数 ) بولسا بىر ئورۇنلاشتۇرما ئوبىكتىپ ( 配置对象 )، ئورۇنلاشتۇرما ئوبىكتىپ بىرقانچە ئورۇنلاشتۇرما تاللىغۇچ ( 配置选项 ) نى ئۆز ئىچىگە ئالىدۇ، بۇلارنىڭ ئىچىدە ئەڭ كۆپ ئىشلىتىدىغىنىمىز بولسا data تاللىغۇچى ( 选项 ) . data تاللىغۇچى ئەمەلى مىسالغا سانلىق مەلۇمات ( ئۇچۇر 数据) تەمىنلەيدۇ ھەم يەتكۈزەلەيدۇ. data بولسا بىر ئۇسۇل فونكىسىيەسى ( 方法函数 )، قايتۇرىدىغان قىممىتى بولسا ئۇچۇر ئوبىكتىپى ( 数据对象 )، ئۇچۇر ئوبىكتىپى بىرقانچە ئۇچۇر تىزىملىكى ( 数据列表 ) نى ئۆز ئىچىگە ئالسا بولىدۇ، ئۇچۇر تىزىملىكى ئاچقۇچ ۋە قىممەت ( 键值对 ) شەكلىدە ئىپادىلىنىدۇ.()createAppفۇنكىسىيەسىنىڭ قايتۇرىدىغان قىممىتى بولسا بىر Vue ئەمەلى مىسال ئوبىكتىبى، بۇ ئوبىكتىپنىڭ()mountفۇنكىسىيەسىنى قوزغىتىش (调用) ئارقىلىق ئەمەلىي مىسالنىڭ بۆلەك ( 组件 ) قىسمىنى DOM غا ئاسقىلى بولىدۇ، بۇ فۇنكىسىيەنىڭ بىر ھەرىپ بەلگە تىزمىسىدىكى CSS تاللىغۇچى، DOM دىكى بىر ئىلمىنىت بىلەن ماسلىشالايدۇ.<"div id="app>نىڭ ئىچىدە قوش چوڭ تىرناق {{}} ئارقىلىق، ھەركەتچان ھالەتتە بىر ئۆزگەرگۈچى مىقدارنى قىستۇرغىلى بولىدۇ. تۆۋەندىكىدەك :<div id="app"><h1>{{info}}</h1></div>يۇقارقى بىرقۇر HTML ھەرىپ بەلگە تىزمىسى Vue.js قېلىپى ( 模板 ) دەپمۇ ئاتىلىدۇ، بۇنىڭ ئىچىدە }} بىلەن {{ قېلىپ پەرىقلەندۈرۈش بەلگىسىنى ئىپادىلەپ JavaScript ئىپادىسى ( 表达式 ) نى قىستۇرۇشقا ئىشلىتىلىدۇ، Vue ئەمەلى مىسال ئۇچۇرلىرى ۋە ئۇسۇلىنى ( 方法 ) ئۆز ئىچىگە ئالسا بولىدۇ. ئىپادىنىڭ قىممىتى ئادەتتىكى يېزىق بولۇپ ئانالىز ( 解析 ) قىلىپ چىقىرىلىدۇ، ھەم قىستۇرۇلغان ئورۇندا ئىكراندا كۆرۈنىدۇ.
تور كۆرگۈچتە HTML ھۆججىتىنى ئىجرا قىلساق، باغلانغان قىممەت ھەركەتچان ھالەتتە ئىنكاس قايتۇرىدۇ ( 动态响应 )، ئۆزگەرگۈچى مىقدارنىڭ
قىممىتىدە ئۆزگۈرۈش بولغان ۋاقىتتا، كۆرسۈتۈلگەن مەزمۇنمۇ شۇ ۋاقىتتىلا ئۆزگۈرىدۇ.
ھەركەتچان ئۇچۇرنى كونتىرول قىلىش
مىسال : بۇ مىسالدا، ئالدىدىكى مىسالغا ئاساسەن بەت يۈزىگە بىر كىرگۈزۈش رامكىسى چىقىرىپ، رامكىغا خەت كىرگۈزگەن ۋاقىتتا، كىرگۈزۈلگەن خەتلەر ئىكراندا كىرگۈزگۈچنىڭ ئاستىدا ماس كىرگۈزگۈچ بىلەن ماس قەدەمدە يېڭىلىنىپ ماڭىدىغان بىر مىسالنى ئەمەلگە ئاشۇرىمىز. قەدەم باسقۇچلىرى تۆۋەندىكىچە :
ئاۋال ئالدىنقى مىسالدا سۆزلەنگەن HTML ھۆججىتىنى بىر نۇسقا كۆچۈرۋالىمىز، ھەم يېزىق كىرگۈزگۈچتىن بىرنى چىقىرۋالىمىز. تۆۋەندىكىدەك :
<div id="app"> <input v-model="info"> <h1>{{info}}</h1> </div>يۇقارقى كودتىكى input خەتكۈچىنىڭ ئىچىدە vue نىڭ v-model كوماندىسى ( 指令 ) نى ئىشلىتىش ئارقىلىق ئەمەلى تۈرنىڭ info دىگەن ئۆزگەرگۈچى مىقدارىغا باغلايمىز، بۇنداق بولغاندا كىرگۈزۈش رامكىسىدىكى قىممەت ئۆزگەرسىمۇ، ياكى ئۆزگەرگۈچى مىقدارنىڭ قىممىتى ئۆزگەرسىمۇ ئوخشاشلا قوش يۆلۈنۈشتە ماس قەدەمدە ئىنكاس قايتۇرۇپ يېڭىلىنالايدۇ.
تور كۆرگۈچتە مەزكۇر html ھۆججىتىنى ئىجرا قىلىپ، يېزىق رامكىسىغا خەت كىرگۈزگەندىن كىيىن ئۈنۈمىنى كۆرگۈلى بولىدۇ.
كېڭەيتمە :Vue.js دىكى دىيىلىۋاتقان ئىنكاسچانلىق ( 响应式 ) بولسا بايانات خارەكتىرلىق ( 声明式 ) ئۇسۇل ( 方法 ) ئارقىلىق ئۆزگۈرۈشكە ماسلىشىدىغان پىروگرامما ھالىتى. مەسىلەن : ئاۋال ئۆزگەرگۈچى مىقدار n نى ئېنىقلىغاندىن كىيىن ( 2=n )، n نىڭ ئاساسىدا نەيە بىر m دىگەن ئۆزگەرگۈچى مىقدارنى ئېنىقلايمىز، m نىڭ قىممىتى ئۆزگەرگۈچى مىقدار n نىڭ قىممىتىنىڭ 2 ھەسسىسىگە تەڭ ( 2*m=n )، ئىنكاسچان دىگىنىمىز ئۆزگەرگۈچى مىقدار n نىڭ قىممىتى ئۆزگەرگەن ۋاقىتتا، ئۆزگەرگۈچى مىقدار m نىڭ قىممىتىمۇ ئاپتۇماتىك ئۆزگۈرىدۇ. بۇ يەردە ئۆزگەرگۈچى مىقدار n نى كۆزىتىدۇ ( 监听数据 )، ھەم بىرلا ۋاقىتتا ھەم ھادىسە كۆزىتىدىغان فۇنكىسىيە ( 事件监听函数 ) نىڭ ئىچىدە ئۆزگەرگۈچى مىقدار m نىڭ قىممەت ئۆزگۈرىشىگە ئىنكاس قايتۇرىدۇ، يەنى ئۆزگەرگۈچى مىقدار m غا ئۆزگەرگۈچى مىقدار n نىڭ قىممىتى ئاساسىدا قىممەت بەرگەنلىكىمىز ئۈچۈن n نىڭ قىممىتى ئۆزگەرگەن ۋاقىتتا m نىڭ قىممىتىمۇ ئاپتۇماتىك ئۆزگۈرىدۇ.