Vue.js у асноўным сканцэнтраваны на частцы візуалізацыі прыкладання, якую таксама называюць інтэрфейснай распрацоўкай. Vue.js становіцца папулярным з кожным днём, таму што яго вельмі лёгка інтэграваць з іншымі праектамі і бібліятэкамі. Яго вельмі проста ўсталяваць і выкарыстоўваць.
Vue.js - гэта прагрэсіўная платформа JavaScript з адкрытым зыходным кодам выкарыстоўваецца для распрацоўкі інтэрактыўных вэб-карыстальніцкіх інтэрфейсаў і аднастаронкавых прыкладанняў (SPA). Vue.js звычайна называюць Vue і вымаўляюць як "view.js" або "прагляд".
Аднастаронкавае прыкладанне або SPA - гэта вэб-прыкладанне або вэб-сайт, які забяспечвае карыстальнікам вельмі плаўную, спагадную і хуткую працу, падобную да настольнай праграмы. Аднастаронкавае прыкладанне змяшчае меню, кнопкі і блокі на адной старонцы. Калі карыстальнік націскае на адну з іх, яна дынамічна перапісвае бягучую старонку, а не загружае цалкам новыя старонкі з сервера. Гэта прычына яго хуткасці рэагавання.
Vue у асноўным распрацаваны для распрацоўкі інтэрфейсу, таму ён павінен апрацоўваць шмат файлаў HTML, JavaScript і CSS. Vue.js дазваляе карыстальнікам лёгка пашыраць HTML з дапамогай атрыбутаў HTML, якія называюцца дырэктывамі. Vue.js забяспечвае ўбудаваныя дырэктывы і мноства дырэктыў defiкарыстальнікам для паляпшэння функцыянальнасці прыкладанняў HTML.
Ніжэй прыведзены спіс найбольш важных функцый Vue.js:
Кампаненты Vue.js з'яўляюцца адной з важных функцый гэтага фрэймворка. Яны выкарыстоўваюцца для пашырэння асноўных элементаў HTML для інкапсуляцыі шматразовага кода. Вы можаце ствараць карыстальніцкія элементы шматразовага выкарыстання ў праграмах Vue.js, якія пазней можна паўторна выкарыстоўваць у HTML.
Vue.js прадастаўляе шаблоны на аснове HTML, якія можна выкарыстоўваць для асацыяцыі візуалізаванага DOM з дадзенымі асобніка Vue. Усе шаблоны Vue з'яўляюцца сапраўдным HTML, які можа быць прааналізаваны сумяшчальнымі са спецыфікацыямі браўзерамі і аналізатарамі HTML. Vue.js кампілюе мадэлі ў функцыі рэндэрынгу Virtual DOM. Vue адлюстроўвае кампаненты ў віртуальную памяць DOM перад абнаўленнем браўзера. Vue таксама можа вылічыць мінімальную колькасць кампанентаў для паўторнай візуалізацыі і прымяніць мінімальную колькасць маніпуляцый DOM пры змене стану прыкладання.
Vue забяспечвае сістэму хуткага рэагавання, якая выкарыстоўвае простыя аб'екты JavaScript і аптымізуе паўторны рэндэрынг. У гэтым працэсе кожны кампанент адсочвае свае рэактыўныя залежнасці, таму сістэма дакладна ведае, калі і якія кампаненты паўторна візуалізаваць.
Навігацыя па старонках ажыццяўляецца з дапамогай vue-router. Вы можаце выкарыстоўваць афіцыйна падтрымліваемую бібліятэку vue-router для вашай аднастаронкавай праграмы.
Vue дазваляе выкарыстоўваць розныя эфекты пераходу, калі элементы ўстаўляюцца, абнаўляюцца або выдаляюцца з DOM.
Ёсць некалькі метадаў выкарыстання Vue.js. Вы можаце ўсталяваць яго, перайшоўшы на яго афіцыйны сайт, або вы таксама можаце пачаць выкарыстоўваць файл Vue.js з бібліятэкі CDN. Вось некалькі спосабаў выкарыстання Vue.js у вашым праекце.
Калі вы хочаце выкарыстоўваць тэг <script> Vue.js непасрэдна ў файл HTML, вам трэба загрузіць яго з афіцыйнага сайта.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Давайце пяройдзем на афіцыйны сайт Vue.js https://vuejs.org/v2/guide/installation.html для загрузкі vue.js у адпаведнасці з вашымі патрэбамі.
Вы таксама можаце выкарыстоўваць файл Vue.js з CDN у сваім дадатку. Выкарыстоўвайце спасылку https://unpkg.com/vue@3/dist/vue.global.js ўнутры элемента <script>, як паказана ніжэй:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js - адна з найноўшых праграмных тэхналогій, якая шырока выкарыстоўваецца для вэб-распрацоўкі і стварэння аднастаронкавых прыкладанняў (SPA). Як вы можаце здагадацца з назвы, ён у асноўным выкарыстоўваецца для карыстацкага інтэрфейсу або дысплея ў праекце.
Давайце паглядзім перавагі выкарыстання Vue.js у вашым праекце:
Адной з самых вялікіх пераваг Vue.js з'яўляецца тое, што ён вельмі малы па памеры. Поспех фреймворка JavaScript шмат у чым залежыць ад яго памеру, і гэты захапляльны плагін JavaScript займае ўсяго 18-21 КБ, так што вы можаце вельмі лёгка спампаваць і выкарыстоўваць яго ў самыя кароткія тэрміны.
Структура Vue.js мае вельмі простую структуру і вельмі лёгкая для разумення. Гэта адна з прычын папулярнасці гэтай рамкі. Калі вы знаёмыя з HTML і JavaScript, вы можаце лёгка кадаваць у Vue.js. Карыстальнікі могуць лёгка дадаць Vue.js у свой вэб-праект дзякуючы яго простай структуры і распрацоўваць прыкладанні.
Vue.js мае шмат кампанентаў для ўсяго і можа быць вельмі хутка інтэграваны з існуючымі праграмамі. Вы можаце інтэграваць яго з любым дадаткам, напісаным на JavaScript.
Гнуткая прырода Vue.js таксама палягчае разуменне распрацоўшчыкам React.js, Angular.js і любых іншых новых фрэймворкаў JavaScript. Гэта забяспечвае вялікую гнуткасць выкарыстання віртуальных вузлоў для запісу файлаў HTML, файлаў JavaScript і чыстых файлаў JavaScript.
Вы можаце ствараць уласныя элементы, якія можна шматразова выкарыстоўваць у праграмах Vue.js.
Vue.js забяспечвае вельмі простую, поўную і падрабязную дакументацыю, таму распрацоўшчыкі, якія мала ўяўляюць HTML і JavaScript, могуць выкарыстоўваць яе для праграмавання.
Vue.js выкарыстоўвае віртуальны DOM, аналагічны іншым існуючым структурам, такім як ReactJS, Ember і г.д. Віртуальны DOM - гэта палегчанае дрэвападобнае прадстаўленне зыходнага HTML DOM у памяці, якое абнаўляецца, не закранаючы першапачатковы DOM.
Vue.js забяспечвае двухбаковую сувязь са сваёй архітэктурай Model View View Model (MVVM), якая спрашчае апрацоўку блокаў HTML.
Фреймворк пастаўляецца з сістэмай, якая дазваляе нам дэкларатыўна адлюстроўваць дадзеныя ў DOM з дапамогай простага і зразумелага сінтаксісу мадэлі.
Вось прыклад:
<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>Структура Vue.js дазваляе нам definire атрыбуты HTML, званыя дырэктывамі, якія выкарыстоўваюцца для забеспячэння функцыянальнасці прыкладанняў HTML.
У Vue.js ёсць два тыпы дырэктываў:
Vue.js выкарыстоўвае падвойныя дужкі {{}} у якасці запаўняльнікаў для даных, а дырэктывы Vue.js з'яўляюцца атрыбутамі HTML, якія выкарыстоўваюць прэфікс v-.
Праграма Vue падключаецца да аднаго элемента DOM і цалкам кіруе ім. У прыведзеным вышэй прыкладзе гэта #app.
З дапамогай Vue мы можам разглядаць HTML як кропку ўваходу, а ўсё астатняе адбываецца ўнутры створанага асобніка Vue.
Давайце паглядзім прыклад, дзе мы спрабуем звязаць элемент і атрыбут:
<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> У гэтым выпадку новым атрыбутам v-bind з'яўляецца дырэктыва. Дырэктывы выкарыстоўваюцца з прэфіксам v-, каб паказаць, што яны з'яўляюцца унікальнымі атрыбутамі, прадастаўленымі Vue, і выкарыстоўваюцца для прымянення спецыяльных адаптыўных паводзін да адлюстраванага DOM.
Вынік прыкладу наступны
Ercole Palmeri
Ваенна-марскі сектар - гэта сапраўдная глабальная эканамічная сіла, якая перайшла да 150-мільярднага рынку...
У мінулы панядзелак Financial Times абвясціла аб здзелцы з OpenAI. FT ліцэнзуе сваю журналістыку сусветнага ўзроўню...
Мільёны людзей плацяць за струменевыя паслугі, плацячы штомесячную абаненцкую плату. Распаўсюджана меркаванне, што вы…
Coveware ад Veeam працягне прадастаўляць паслугі рэагавання на інцыдэнты кібервымагальніцтва. Coveware будзе прапаноўваць судова-медыцынскую экспертызу і магчымасці выпраўлення…
