Ko te Vue.js e aro nui ana ki te waahanga tirohanga o te tono, e kiia ana ko te whanaketanga o mua. Kei te rongonui a Vue.js i ia ra i ia ra na te mea he tino ngawari ki te whakauru ki etahi atu kaupapa me nga whare pukapuka. He tino ngawari ki te whakauru me te whakamahi.
Ko te Vue.js he anga JavaScript ahu whakamua tuwhera puna whakamahia mo te whakawhanake atanga kaiwhakamahi tukutuku tauwhitiwhiti me nga tono wharangi kotahi (SPA). Ko te Vue.js ka kiia ko Vue ka kiia ko "view.js" ranei "tirohia".
Ko te Tono Wharangi Takitahi, ko te SPA ranei he tono tukutuku, paetukutuku ranei e whakarato ana i nga kaiwhakamahi he wheako tino maeneene, whakautu me te tere e rite ana ki te tono papamahi. Kei roto i te tono wharangi kotahi he tahua, he patene me nga poraka kei runga i te wharangi kotahi. Ina pao te kaiwhakamahi ki runga i tetahi o aua mea, ka kaha te tuhi ano i te wharangi o naianei, kaua ki te uta i nga wharangi hou katoa mai i te tūmau. Koinei te take i muri i tana tere urupare.
He mea hanga a Vue mo te whanaketanga o mua, na reira me hapai i te maha o nga konae HTML, JavaScript me CSS. Ko te Vue.js he mea ngawari ki nga kaiwhakamahi ki te whakawhānui i te HTML me nga huanga HTML e kiia ana ko nga tohutohu. Ka whakarato a Vue.js i nga tohutohu whakauru me te maha o nga tohutohu defiNa te kaiwhakamahi ki te whakapai ake i te mahi o nga tono HTML.
Kei raro nei te rarangi o nga ahuatanga tino nui o Vue.js:
Ko nga waahanga Vue.js tetahi o nga ahuatanga nui o tenei anga. Ka whakamahia hei whakawhānui i nga huānga HTML taketake ki te whakauru i te waehere ka taea te whakamahi. Ka taea e koe te hanga huānga ritenga ka taea te whakamahi i roto i nga tono Vue.js ka taea te whakamahi ano i muri mai ki te HTML.
Ka whakarato a Vue.js i nga tauira HTML-a-te-HTML ka taea te whakamahi hei hono i te DOM kua tukuna ki nga raraunga tauira Vue. Ko nga tauira Vue katoa he HTML whaimana ka taea te poroporoaki e nga kaitirotiro whai kiko me nga kaitoro HTML. Ka whakahiatohia e Vue.js nga tauira ki nga mahi whakaputa DOM Mariko. Ka tukuna e Vue nga waahanga ki te mahara DOM mariko i mua i te whakahou i te tirotiro. Ka taea hoki e Vue te tatau i te iti rawa o nga waahanga hei whakahoki ano me te whakamahi i te iti rawa o te whawhe DOM ina huri i te ahua tono.
Ka whakaratohia e Vue he punaha whakautu e whakamahi ana i nga mea JavaScript ngawari me te arotau i te tuku ano. I roto i tenei tukanga, ka aroturukihia e ia waahanga ona whakawhirinakitanga tauhohenga, na reira ka mohio te punaha ahea me nga waahanga hei whakahoki ano.
Ko te whakatere wharangi ka mahia ma te awhina a vue-router. Ka taea e koe te whakamahi i te puna vue-router e tautokohia ana mo to tono wharangi kotahi.
Ka taea e Vue te whakamahi i nga paanga whakawhiti rereke ina whakauruhia nga huānga, whakahou, tangohia ranei i te DOM.
He maha nga tikanga hei whakamahi i te Vue.js. Ka taea e koe te whakauru ma te haere ki tana pae whai mana, ka taea ranei te whakamahi i te konae Vue.js mai i te whare pukapuka CDN. Anei etahi huarahi hei whakamahi i a Vue.js i roto i to kaupapa.
Mena kei te hiahia koe ki te whakamahi i te tohu <script> o Vue.js tika ki to konae HTML, me tango e koe mai i te paetukutuku mana.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Me haere ki te paetukutuku mana Vue.js https://vuejs.org/v2/guide/installation.html ki te tango vue.js kia rite ki o hiahia.
Ka taea hoki e koe te whakamahi i te konae Vue.js mai i te CDN, i to tono. Whakamahia te hono https://unpkg.com/vue@3/dist/vue.global.js i roto i te huānga <script>, penei i raro nei:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Ko Vue.js tetahi o nga hangarau rorohiko hou e whakamahia whanuitia ana mo te whanaketanga paetukutuku me te hanga Tono Wharangi Kotahi (SPA). Ka taea e koe te whakaaro mai i te ingoa, ka whakamahia te nuinga mo te UI, te taha whakaatu ranei o te kaupapa.
Kia kite tatou i nga painga o te whakamahi i te Vue.js i to kaupapa:
Ko tetahi o nga painga nui o Vue.js he iti rawa te rahi. Ko te angitu o te anga JavaScript ka whakawhirinaki nui ki tona rahi me tenei mono JavaScript whakaongaonga he 18-21KB anake, na reira ka taea e koe te tango me te whakamahi i te waa poto.
Ko te anga Vue.js he hanganga tino ngawari, he tino ngawari ki te mohio. Koia tetahi o nga take i rongonui ai tenei anga. Mena kei te mohio koe ki te HTML me te JavaScript, ka taea e koe te tohu i roto i te Vue.js. Ka taea e nga kaiwhakamahi te taapiri i a Vue.js ki ta raatau kaupapa paetukutuku na te mea ngawari te hanga me te whakawhanake tono.
He maha nga waahanga a Vue.js mo nga mea katoa ka taea te whakauru tere ki nga tono o naianei. Ka taea e koe te whakauru ki tetahi tono kua tuhia ki te JavaScript.
Ko te ahua ngawari o Vue.js ka ngawari ki nga kaihanga o React.js, Angular.js, me etahi atu angamahi JavaScript hou ki te mohio. He maha nga waatea ki te whakamahi i nga pona mariko ki te tuhi i nga konae HTML, nga konae JavaScript me nga konae JavaScript parakore.
Ka taea e koe te hanga huānga ritenga ka taea te whakamahi ano i roto i nga tono Vue.js.
Ka whakarato a Vue.js i nga tuhinga tino ngawari, oti, me te whai kiko, no reira ka taea e nga kaiwhakawhanake he iti nei te mohio ki te HTML me te JavaScript ka taea te whakamahi ki te hotaka.
Ka whakamahia e Vue.js te DOM mariko e rite ana ki etahi atu anga o mua penei i a ReactJS, Ember, etc. Ko te DOM mariko he tohu rakau mahara-maamaa o te HTML DOM taketake me te whakahou me te kore e pa ki te DOM tuatahi.
Ko te Vue.js e whakarato ana i nga korero e rua-ara me tana hoahoanga Tauira Tirohanga Tirohanga Tauira (MVVM) e ngawari ana te whakahaere i nga poraka HTML.
Ka tae mai te angamahi me te punaha e taea ai e matou te whakaputa korero ki te DOM ma te whakamahi i te wetereo tauira ngawari me te ngawari.
Anei he tauira:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Ko te anga Vue.js ka taea e tatou defiKo enei huanga HTML e kiia ana ko nga tohutohu, ka whakamahia hei whakarato mahi ki nga tono HTML.
E rua nga momo tohutohu kei Vue.js:
Ka whakamahi a Vue.js i nga taiapa rua {{}} hei kaipupuri waahi mo nga raraunga, ko nga tohutohu a Vue.js he huanga HTML e whakamahi ana i te v- prefix.
Ka hono tetahi taupānga Vue ki tetahi huānga DOM kotahi ka tino whakahaere. I te tauira o runga ake nei, ko #app.
Ma te Vue ka taea e tatou te whakaaro ko te HTML te waahi urunga, a ko nga mea katoa ka puta i roto i te tauira Vue i hangaia.
Tirohia tetahi tauira ka ngana tatou ki te here huānga me te huanga:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> I tenei keehi, ko te huanga v-herea hou ko te tohutohu. Ka whakamahia nga tohutohu me te v- prefix hei tohu he huanga ahurei na Vue, a ka whakamahia hei whakamahi i te whanonga urupare motuhake ki te DOM kua tukuna.
Ko te hua o te tauira e whai ake nei
Ercole Palmeri
Ko te whakawhanake i nga pukenga motuka pai na roto i te tae ka whakarite i nga tamariki mo nga pukenga uaua ake penei i te tuhi. Ki te tae…
Ko te waahanga moana he mana ohaoha pono o te ao, kua whakatere ki te maakete 150 piriona ...
I te Mane kua hipa, i panuitia e te Financial Times tetahi mahi me OpenAI. Ka raihana a FT i tana kairipoata o te ao…
E hia miriona nga taangata e utu ana mo nga ratonga rerema, e utu ana i nga utu ohaurunga ia marama. Ko te whakaaro noa ko koe…
