Vue.js спечели репутацията си на прогресивна JavaScript рамка. Можете да използвате Vue.js за изграждане на едностранични приложения (SPA) или за разработване на специфични потребителски интерфейси.

Тук ще научите основите на Vue.js, включително как да създадете Vue компонент и да работите с обекта с опции за изобразяване на динамични данни.

Vue.js е един от най-популярните рамки на JavaScript. За да започнете с Vueи за да го добавите към вашата HTML страница, копирайте маркера на скрипта по-долу и го поставете в секцията head:

<сценарийsrc="">сценарий>

Използването на CDN връзката е отлична опция за подобряване на статичен HTML или добавяне на функционалност към вашето приложение.

Трябва обаче да инсталирате Vue.js чрез npm, за да използвате повече от неговите разширени функции, като например синтаксиса на компонента за един файл (SFC), които са полезни при изграждането на пълноценни приложения на Vue.

Създаване на приложение Vue

Достъпът до библиотеката Vue чрез CDN връзката предоставя Vue обект, включително .createApp() метод.

Както подсказва името, можете да създадете приложение Vue, като използвате този метод.

Например:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<сценарий>
 const приложение = Vue.createApp();
сценарий>
тяло>
html>

Тук създаденото приложение се съхранява в ап променлива. След като създадете екземпляра на приложението, трябва да го изобразите с помощта на .mount() метод. Този метод казва къде да монтирате приложението в Обектен модел на документ (DOM).

Така:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">див>
<сценарий>
 const приложение = Vue.createApp();
 app.mount("#app");
сценарий>
тяло>
html>

За да използвате Vue's .mount() метод, трябва да предоставите DOM елемент или селектор като аргумент. В този пример монтирахме приложението Vue, използвайки DOM елемента с #приложение ДОКУМЕНТ ЗА САМОЛИЧНОСТ.

Важно е да се отбележи, че приложението Vue контролира само елементи, които са посочени с помощта на документ за самоличност. Освен това приложението няма контрол над нищо извън тези елементи, включително събития при кликване или друга интерактивност.

Последната стъпка от създаването на приложение Vue е да извикате .mount() метод след завършване на всички конфигурации на приложението.

Обектът Options във Vue

Във Vue.js използвате Настроики обект като конфигурационен обект за създаване на екземпляр или компонент на Vue.

Това е съществена част от приложението Vue, тъй като дефинира поведението и данните за всеки екземпляр или компонент. The Настроики обектът се състои от няколко свойства, представящи различни аспекти на екземпляра или компонента.

Някои от често използваните имоти в Настроики обект са:

• данни: Това свойство дефинира обекта с данни за приложенията Vue. Това е функция, която връща обект, който съдържа свойствата на данните и техните начални стойности.
• методи: The методи свойството на обекта Options притежава жизненоважни функции за активиране на динамично изобразяване.
• шаблон: Това свойство дефинира HTML шаблона за екземпляра или компонента на Vue. Това е низ, съдържащ HTML маркирането, което компилаторът на шаблони на Vue може да анализира.

Обърнете внимание, че когато използвате свойство на шаблон, компилаторът Vue ще рендира само съдържание, дефинирано в шаблона.

Ето пример за приложение Vue с данни, методи, и шаблон Имоти:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<h1 @щракнете="обратно съобщение" >{{ текст }}h1>
див>
<сценарий>
конст приложение = Vue.createApp({
// шаблон: '
Добре дошли във вашето приложение Vue
',
 данни() {
връщане {
 текст: „Това е вашето приложение Vue“
 };
 },
 методи: {
 reverseMessage () {
това.текст = това.text.split('').reverse().join('')
 }
 }
 });
ап.монтиране("#приложение");
сценарий>
тяло>
html>

Тази програма изобразява основно приложение Vue, което показва текста „Това е вашето приложение Vue“, използвайки интерполация на текст и позволява на потребителите да кликнат върху него, за да обърнат съобщението.

The данни() функцията връща обект с едно извикано свойство текст. The @щракване директива се използва за прикачване на a reverseMessage() метод към елемент, който обръща текст Имот.

При стартиране на тази програма създаденото приложение Vue ще изглежда така:

Щракването върху текста ще го обърне.

Имайте предвид, че програмата коментира свойството на шаблона, за да позволи изобразяването на съдържанието в приложението Vue. Ако остане без коментар, това приложение Vue ще показва само свойство на шаблон:

Има и други подобни имоти реквизит и изчислено, който можете също да използвате за създаване на мощни и гъвкави Vue приложения, когато конфигурирате обекта Options.

Интерполация на текст във Vue

Интерполацията на текст във Vue е функция, която ви позволява да обвързвате данни към HTML елементи динамично. С други думи, това ще ви позволи директно да изведете стойността на свойствата на данните на екземпляр на Vue в HTML.

За да постигнете интерполация на текст във Vue, трябва да увиете името на свойството на данните в двойни фигурни скоби. Vue интерпретира съдържанието вътре в двойните фигурни скоби като JavaScript изрази и допълнително ги замества с получената им стойност.

Например:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<h1>{{ съобщение }}h1>
<стр>Добре дошла {{ name }}стр>
див>
<сценарий>
 const app = Vue.createApp({
 данни() {
 връщане {
 съобщение: „Това е вашето приложение Vue.“,
 име: "Благороден",
 };
 },
 });
 app.mount("#app");
сценарий>
тяло>
html>

В този пример интерполацията на текст обвързва съобщение и име свойства на обекта с данни, върнат в екземпляра на Vue към и елементи. След като приложението Vue се монтира, то показва стойностите на съобщение и име свойства в HTML на съответните им позиции.

Можете също така да покажете резултата от извикване на метод или да извършите основни JavaScript операции в двойните къдрави скоби:

html>
<htmlезик="bg">
<глава>
<заглавие>Приложение Vueзаглавие>
<сценарийsrc=" https://unpkg.com/vue@3/dist/vue.global.js">сценарий>
глава>
<тяло>
<дивдокумент за самоличност="приложение">
<h1>{{ съобщение }}h1>
<h3>Добре дошли {{ name.toUpperCase() }}h3>
<стр>Във вашето име има {{ nameLength() }} букви.стр>
див>
<стр>не тукстр>
<сценарий>
 const app = Vue.createApp({
 данни() {
 връщане {
 съобщение: „Това е вашето приложение Vue“,
 име: "Благороден Окафор",
 };
 },
 методи: {
 nameLength() {
 върне this.name.length - 1;
 },
 },
 });
 app.mount("#app");
сценарий>
тяло>
html>

В този пример приложението Vue има a данни обект, който съдържа две свойства: съобщение и име.

В приложението Vue трите HTML елемента показват данни, използвайки екземпляра на Vue. The h1 елемент показва стойността на съобщение собственост, докато на h3 елемент показва стойността на име имот с а toUpperCase() метод, приложен към него.

The стр елемент показва върнатия резултат от nameLength() метод, дефиниран в методи обект на приложението Vue. The nameLength() метод връща дължината на име собственост, извадена от единица.

За достъп до стойност от обекта с данни в обекта с методи, трябва да използвате това ключова дума. това ключовата дума се отнася до текущия екземпляр на Vue и ви позволява да получите достъп до неговите свойства и методи от екземпляра на Vue. Като се използва това, можете да извлечете стойността на име собственост и извършване на всички необходими манипулации върху нея с помощта на методи.

Това приложение Vue демонстрира как да обвържете данни с HTML елементи с помощта на интерполация на текст и как да дефинирате и извиквате методи в екземпляр на Vue.

Изградете своя преден край с помощта на Vue

В тази статия научихте как да започнете да работите с Vue и да интерполирате текст със синтаксиса за шаблони на Vue. Имате достъп до няколко други функции във Vue, като директиви и кукички за жизнения цикъл, което го прави отличен избор за изграждане на динамични приложения отпред.