Mae Vue.js yn canolbwyntio'n bennaf ar ran delweddu'r cais, a elwir hefyd yn ddatblygiad pen blaen. Mae Vue.js yn dod yn boblogaidd o ddydd i ddydd oherwydd mae'n hawdd iawn integreiddio â phrosiectau a llyfrgelloedd eraill. Mae'n syml iawn i osod a defnyddio.
Mae Vue.js yn fframwaith JavaScript blaengar ffynhonnell agored a ddefnyddir ar gyfer datblygu rhyngwynebau defnyddwyr gwe rhyngweithiol a chymwysiadau un dudalen (SPAs). Cyfeirir at Vue.js yn gyffredin fel Vue a'i ynganu fel "view.js" neu "view".
Mae Cymhwysiad Tudalen Sengl neu SPA yn gymhwysiad gwe neu wefan sy'n rhoi profiad llyfn, ymatebol a chyflym iawn i ddefnyddwyr sy'n debyg i raglen bwrdd gwaith. Mae rhaglen un dudalen yn cynnwys dewislen, botymau a blociau ar un dudalen. Pan fydd defnyddiwr yn clicio ar un ohonynt, mae'n ailysgrifennu'r dudalen gyfredol yn ddeinamig yn hytrach na llwytho tudalennau newydd cyfan o weinydd. Dyma'r rheswm y tu ôl i'w gyflymder ymatebol.
Mae Vue yn cael ei ddatblygu yn y bôn ar gyfer datblygu frontend, felly mae'n rhaid iddo drin llawer o ffeiliau HTML, JavaScript a CSS. Mae Vue.js yn ei gwneud hi'n hawdd i ddefnyddwyr ymestyn HTML gyda phriodoleddau HTML a elwir yn gyfarwyddebau. Mae Vue.js yn darparu cyfarwyddebau adeiledig a llawer o gyfarwyddebau defigan y defnyddiwr i wella ymarferoldeb cymwysiadau HTML.
Isod mae rhestr o nodweddion pwysicaf Vue.js:
Mae cydrannau Vue.js yn un o nodweddion pwysig y fframwaith hwn. Fe'u defnyddir i ymestyn elfennau HTML sylfaenol i grynhoi cod amldro. Gallwch greu elfennau arferiad amldro mewn cymwysiadau Vue.js y gellir eu hailddefnyddio yn HTML yn ddiweddarach.
Mae Vue.js yn darparu templedi seiliedig ar HTML y gellir eu defnyddio i gysylltu'r DOM wedi'i rendro â data enghraifft Vue. Mae holl dempledi Vue yn HTML dilys y gellir eu dosrannu gan borwyr sy'n cydymffurfio â manylebau a pharswyr HTML. Mae Vue.js yn llunio modelau i swyddogaethau rendro Rhith-DOM. Mae Vue yn rendro cydrannau i gof DOM rhithwir cyn adnewyddu'r porwr. Gall Vue hefyd gyfrifo'r nifer lleiaf o gydrannau i'w hail-rendro a chymhwyso'r lleiafswm o drin DOM wrth newid cyflwr y cais.
Mae Vue yn darparu system ymatebolrwydd sy'n defnyddio gwrthrychau JavaScript syml ac yn gwneud y gorau o ail-rendro. Yn y broses hon, mae pob cydran yn cadw golwg ar ei dibyniaethau adweithiol, felly mae'r system yn gwybod yn union pryd a pha gydrannau i'w hail-rendro.
Mae llywio tudalen yn cael ei wneud gyda chymorth vue-router. Gallwch ddefnyddio'r llyfrgell vue-router a gefnogir yn swyddogol ar gyfer eich rhaglen un dudalen.
Mae Vue yn caniatáu ichi ddefnyddio gwahanol effeithiau pontio pan fydd elfennau'n cael eu mewnosod, eu diweddaru neu eu tynnu o'r DOM.
Mae sawl dull o ddefnyddio Vue.js. Gallwch ei osod trwy fynd i'w safle swyddogol neu gallwch ddechrau defnyddio'r ffeil Vue.js o'r llyfrgell CDN hefyd. Dyma rai ffyrdd o ddefnyddio Vue.js yn eich prosiect.
Os ydych chi am ddefnyddio'r tag <script> o Vue.js yn uniongyrchol i'ch ffeil HTML, mae angen i chi ei lawrlwytho o'r wefan swyddogol.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Gadewch i ni fynd i wefan swyddogol Vue.js https://vuejs.org/v2/guide/installation.html i lawrlwytho vue.js yn ôl eich anghenion.
Gallwch hefyd ddefnyddio'r ffeil Vue.js o CDN, yn eich cais. Defnyddiwch y ddolen https://unpkg.com/vue@3/dist/vue.global.js y tu mewn i'r elfen <script>, fel isod:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js yw un o'r technolegau meddalwedd diweddaraf a ddefnyddir yn eang ar gyfer datblygu gwe ac adeiladu Cymwysiadau Tudalen Sengl (SPA). Fel y gallwch chi ddyfalu o'r enw, fe'i defnyddir yn bennaf ar gyfer UI neu ochr arddangos y prosiect.
Gadewch i ni weld manteision defnyddio Vue.js yn eich prosiect:
Un o fanteision mwyaf Vue.js yw ei fod yn fach iawn o ran maint. Mae llwyddiant fframwaith JavaScript yn dibynnu llawer ar ei faint a dim ond 18-21KB yw'r ategyn JavaScript cyffrous hwn, felly gallwch chi ei lawrlwytho a'i ddefnyddio'n hawdd iawn mewn dim o amser.
Mae gan fframwaith Vue.js strwythur syml iawn ac mae'n hawdd iawn ei ddeall. Mae'n un o'r rhesymau dros boblogrwydd y fframwaith hwn. Os ydych chi'n gyfarwydd â HTML a JavaScript, gallwch chi godio'n hawdd yn Vue.js. Gall defnyddwyr ychwanegu Vue.js yn hawdd at eu prosiect gwe oherwydd ei strwythur syml a datblygu cymwysiadau.
Mae gan Vue.js lawer o gydrannau ar gyfer popeth a gellir eu hintegreiddio'n gyflym iawn â chymwysiadau presennol. Gallwch ei integreiddio ag unrhyw raglen a ysgrifennwyd yn JavaScript.
Mae natur hyblyg Vue.js hefyd yn ei gwneud hi'n hawdd i ddatblygwyr React.js, Angular.js, ac unrhyw fframweithiau JavaScript newydd eraill ei ddeall. Mae'n darparu llawer o hyblygrwydd i ddefnyddio nodau rhithwir i ysgrifennu ffeiliau HTML, ffeiliau JavaScript a ffeiliau JavaScript pur.
Gallwch greu elfennau wedi'u teilwra y gellir eu hailddefnyddio mewn cymwysiadau Vue.js.
Mae Vue.js yn darparu dogfennaeth syml, gyflawn a manwl iawn, felly gall datblygwyr nad oes ganddynt lawer o syniad am HTML a JavaScript ei ddefnyddio i raglennu.
Mae Vue.js yn defnyddio DOM rhithwir tebyg i fframweithiau presennol eraill fel ReactJS, Ember, ac ati. Mae'r DOM rhithwir yn gynrychiolaeth coeden mewn cof ysgafn o'r HTML DOM gwreiddiol ac fe'i diweddarir heb effeithio ar y DOM cychwynnol.
Mae Vue.js yn darparu cyfathrebu dwy ffordd gyda'i bensaernïaeth Model View View Model (MVVM) sy'n symleiddio'r broses o drin blociau HTML.
Daw'r fframwaith gyda system sy'n ein galluogi i roi data datganiadol i'r DOM gan ddefnyddio cystrawen enghreifftiol syml a syml.
Dyma enghraifft:
<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>Mae fframwaith Vue.js yn caniatáu inni wneud hynny definire priodoleddau HTML a elwir yn gyfarwyddebau, a ddefnyddir i ddarparu ymarferoldeb i gymwysiadau HTML.
Mae dau fath o gyfarwyddeb yn Vue.js:
Mae Vue.js yn defnyddio braces dwbl {{}} fel dalfannau ar gyfer data, ac mae cyfarwyddebau Vue.js yn briodoleddau HTML sy'n defnyddio rhagddodiad v-.
Mae ap Vue yn cysylltu ag un elfen DOM ac yn ei reoli'n llawn. Yn yr enghraifft uchod, mae'n #app.
Gyda Vue gallwn ystyried yr HTML fel y pwynt mynediad, ac mae popeth arall yn digwydd y tu mewn i'r enghraifft Vue a grëwyd.
Gadewch i ni weld enghraifft lle rydyn ni'n ceisio rhwymo elfennau a phriodoleddau:
<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> Yn yr achos hwn, y nodwedd v-bind newydd yw'r gyfarwyddeb. Defnyddir cyfarwyddebau gyda rhagddodiad v i ddangos eu bod yn briodoleddau unigryw a ddarperir gan Vue, ac fe'u defnyddir i gymhwyso ymddygiad ymatebol arbennig i'r DOM wedi'i rendro.
Canlyniad yr enghraifft yw'r canlynol
Ercole Palmeri
Ddydd Llun diwethaf, cyhoeddodd y Financial Times gytundeb ag OpenAI. Mae FT yn trwyddedu ei newyddiaduraeth o safon fyd-eang…
Mae miliynau o bobl yn talu am wasanaethau ffrydio, gan dalu ffioedd tanysgrifio misol. Mae’n farn gyffredin eich bod chi…
Bydd Coveware gan Veeam yn parhau i ddarparu gwasanaethau ymateb i ddigwyddiadau cribddeiliaeth seiber. Bydd Coveware yn cynnig galluoedd fforensig ac adfer…
Mae gwaith cynnal a chadw rhagfynegol yn chwyldroi'r sector olew a nwy, gyda dull arloesol a rhagweithiol o reoli planhigion.…
