Pangunahing nakatuon ang Vue.js sa visualization na bahagi ng application, na tinatawag ding front-end development. Ang Vue.js ay nagiging sikat araw-araw dahil napakadaling isama sa iba pang mga proyekto at library. Ito ay napakasimpleng i-install at gamitin.
Ang Vue.js ay isang progresibong JavaScript framework open source ginagamit para sa pagbuo ng mga interactive na web user interface at mga single page application (SPA). Ang Vue.js ay karaniwang tinutukoy bilang Vue at binibigkas bilang "view.js" o "view".
Ang Aplikasyon ng Isang Pahina o SPA ay isang web application o website na nagbibigay sa mga user ng isang napakakinis, tumutugon at mabilis na karanasan katulad ng isang desktop application. Ang nag-iisang application na pahina ay naglalaman ng isang menu, mga pindutan at mga bloke sa isang pahina. Kapag nag-click ang isang user sa isa sa mga ito, dynamic nitong isinusulat muli ang kasalukuyang page sa halip na mag-load ng mga bagong page mula sa isang server. Ito ang dahilan sa likod ng bilis ng pagtugon nito.
Ang Vue ay karaniwang binuo para sa frontend development, kaya kailangan nitong pangasiwaan ang maraming HTML, JavaScript at CSS file. Pinapadali ng Vue.js para sa mga user na i-extend ang HTML gamit ang mga HTML attribute na tinatawag na mga direktiba. Nagbibigay ang Vue.js ng mga built-in na direktiba at maraming mga direktiba defigabi ng user upang mapabuti ang functionality ng mga HTML na application.
Nasa ibaba ang listahan ng pinakamahalagang feature ng Vue.js:
Ang mga bahagi ng Vue.js ay isa sa mahahalagang feature ng framework na ito. Ginagamit ang mga ito upang i-extend ang mga pangunahing elemento ng HTML upang i-encapsulate ang reusable code. Maaari kang lumikha ng magagamit muli na mga custom na elemento sa mga application ng Vue.js na maaaring magamit muli sa HTML sa ibang pagkakataon.
Nagbibigay ang Vue.js ng mga template na nakabatay sa HTML na maaaring magamit upang iugnay ang na-render na DOM sa data ng halimbawa ng Vue. Ang lahat ng mga template ng Vue ay wastong HTML na maaaring i-parse ng mga spec-compliant na browser at HTML parser. Kino-compile ng Vue.js ang mga modelo sa mga function ng pag-render ng Virtual DOM. Inire-render ng Vue ang mga bahagi sa virtual na memorya ng DOM bago i-refresh ang browser. Maaari ding kalkulahin ng Vue ang pinakamababang bilang ng mga bahagi na muling ire-render at ilapat ang pinakamababang halaga ng pagmamanipula ng DOM kapag binabago ang estado ng aplikasyon.
Nagbibigay ang Vue ng sistema ng pagtugon na gumagamit ng mga simpleng bagay ng JavaScript at nag-o-optimize ng muling pag-render. Sa prosesong ito, sinusubaybayan ng bawat bahagi ang mga reaktibong dependency nito, kaya alam ng system kung kailan at kung aling mga bahagi ang muling ire-render.
Ginagawa ang page navigation sa tulong ng vue-router. Maaari mong gamitin ang opisyal na sinusuportahang vue-router library para sa iyong solong page na application.
Binibigyang-daan ka ng Vue na gumamit ng iba't ibang mga transition effect kapag ang mga elemento ay ipinasok, na-update o inalis mula sa DOM.
Mayroong ilang mga paraan upang magamit ang Vue.js. Maaari mo itong i-install sa pamamagitan ng pagpunta sa opisyal na site nito o maaari mo ring simulan ang paggamit ng Vue.js file mula sa CDN library. Narito ang ilang paraan para magamit ang Vue.js sa iyong proyekto.
Kung gusto mong gamitin ang tag <script> ng Vue.js nang direkta sa iyong HTML file, kailangan mong i-download ito mula sa opisyal na website.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Pumunta tayo sa opisyal na website ng Vue.js https://vuejs.org/v2/guide/installation.html upang i-download ang vue.js ayon sa iyong mga pangangailangan.
Maaari mo ring gamitin ang Vue.js file mula sa CDN, sa iyong application. Gamitin ang link na https://unpkg.com/vue@3/dist/vue.global.js sa loob ng elemento <script>, tulad ng nasa ibaba:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Ang Vue.js ay isa sa mga pinakabagong teknolohiya ng software na malawakang ginagamit para sa web development at pagbuo ng Single Page Applications (SPA). Bilang maaari mong hulaan mula sa pangalan, ito ay kadalasang ginagamit para sa UI o display side ng proyekto.
Tingnan natin ang mga benepisyo ng paggamit ng Vue.js sa iyong proyekto:
Isa sa pinakamalaking bentahe ng Vue.js ay napakaliit nito. Ang tagumpay ng isang JavaScript framework ay nakadepende nang husto sa laki nito at ang kapana-panabik na JavaScript plugin na ito ay 18-21KB lamang, kaya napakadali mong mada-download at magamit ito sa lalong madaling panahon.
Ang balangkas ng Vue.js ay may napakasimpleng istraktura at napakadaling maunawaan. Isa ito sa mga dahilan ng pagiging popular ng balangkas na ito. Kung pamilyar ka sa HTML at JavaScript, madali kang makakapag-code sa Vue.js. Madaling maidagdag ng mga user ang Vue.js sa kanilang proyekto sa web dahil sa simpleng istraktura nito at bumuo ng mga application.
Ang Vue.js ay may maraming bahagi para sa lahat at maaaring isama nang napakabilis sa mga umiiral nang application. Maaari mo itong isama sa anumang application na nakasulat sa JavaScript.
Ang flexible na katangian ng Vue.js ay nagpapadali din para sa mga developer ng React.js, Angular.js, at anumang iba pang bagong JavaScript frameworks na maunawaan. Nagbibigay ito ng maraming kakayahang umangkop upang gumamit ng mga virtual na node upang magsulat ng mga HTML file, JavaScript file at purong JavaScript file.
Maaari kang lumikha ng mga custom na elemento na magagamit muli sa mga application ng Vue.js.
Nagbibigay ang Vue.js ng napakasimple, kumpleto at detalyadong dokumentasyon, kaya ang mga developer na may kaunting ideya tungkol sa HTML at JavaScript ay magagamit ito sa pagprograma.
Gumagamit ang Vue.js ng virtual na DOM na katulad ng iba pang umiiral na mga framework tulad ng ReactJS, Ember, atbp. Ang virtual DOM ay isang magaan na in-memory tree na representasyon ng orihinal na HTML DOM at ina-update nang hindi naaapektuhan ang paunang DOM.
Nagbibigay ang Vue.js ng two-way na komunikasyon kasama ang arkitektura nito na Model View View Model (MVVM) na nagpapasimple sa pangangasiwa ng mga HTML block.
Ang framework ay may kasamang system na nagbibigay-daan sa amin na deklaratibong mag-render ng data sa DOM gamit ang simple at prangka na syntax ng modelo.
Narito ang isang halimbawa:
<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>Ang Vue.js framework ay nagpapahintulot sa amin na defiNire HTML attributes na tinatawag na directives, na ginagamit para magbigay ng functionality sa HTML applications.
Mayroong dalawang uri ng mga direktiba sa Vue.js:
Gumagamit ang Vue.js ng double braces {{}} bilang mga placeholder para sa data, at ang mga direktiba ng Vue.js ay mga HTML attribute na gumagamit ng v- prefix.
Ang isang Vue app ay kumokonekta sa isang elemento ng DOM at ganap na kinokontrol ito. Sa halimbawa sa itaas, ito ay #app.
Sa Vue maaari nating isaalang-alang ang HTML bilang entry point, at lahat ng iba pa ay nangyayari sa loob ng nilikhang halimbawa ng Vue.
Tingnan natin ang isang halimbawa kung saan sinusubukan nating mag-binding ng elemento at katangian:
<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> Sa kasong ito, ang bagong katangian ng v-bind ay ang direktiba. Ang mga direktiba ay ginagamit na may v- prefix upang isaad na ang mga ito ay mga natatanging katangian na ibinigay ng Vue, at ginagamit upang maglapat ng espesyal na tumutugon na gawi sa nai-render na DOM.
Ang resulta ng halimbawa ay ang sumusunod
Ercole Palmeri
Milyun-milyong tao ang nagbabayad para sa mga serbisyo ng streaming, na nagbabayad ng buwanang bayad sa subscription. Karaniwang opinyon na ikaw ay…
Ang Coveware ng Veeam ay patuloy na magbibigay ng mga serbisyo sa pagtugon sa insidente ng cyber extortion. Mag-aalok ang Coveware ng mga kakayahan sa forensics at remediation...
Binabago ng predictive maintenance ang sektor ng langis at gas, na may makabago at proactive na diskarte sa pamamahala ng halaman.…
Ang UK CMA ay naglabas ng babala tungkol sa gawi ng Big Tech sa merkado ng artificial intelligence. doon…
