> For the complete documentation index, see [llms.txt](https://wiki.girlsgoit.md/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.girlsgoit.md/frontend-dinamic/vue.js.md).
# Vue.js
## Documentația oficială (in engleză)
{% embed url="" %}
## Instanța Vue
Orice aplicație Vue începe cu crearea unei noi instanțe Vue cu funcția `Vue`:
```javascript
import Vue from "vue";
new Vue({
//opțiuni
});
```
O aplicație Vue constă din o rădăcină Vue instance creată cu `new Vue()`, organizată în mod opțional într-un arbore de componente imbricare, componente reutilizabile.
Instanța trebuie să fie legată de un element html din pagina principală (index.html), și să determine ce element va fi randat:
```markup
...
```
```javascript
import Vue from "vue";
new Vue({
el: '#app',
template: '{{ hi }}
'
});
```
{% hint style="info" %}
Observați cum instanța Vue definește `el` care arată către element-ul html cu id-ul `#app`
{% endhint %}
O metodă alternativă, care lucrează identic, să definim element-ul de care ne legăm, e prin funcția `$mount()`:
```javascript
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: function(h) {
return h(App);
}
}).$mount("#app");
```
De asemenea observați că în loc de template folosim funcția `render(h)` în exemplul de mai sus. În acest mod putem să randăm în loc de html arbitrar un component (componentul primar) , în acest caz - `App`.
Componentele Vue sunt explicate mai detaliat în [Componente Vue](/frontend-dinamic/vue.js/componente-vue.md)
## Includerea într-o pagină arbitrară
Dacă avem o singură pagină `html`, și dorim să includem Vue.js în ea, cel mai simplu mod e să introducem un script în pagina noastră:
```markup
```
Un exemplu cum arată o pagină `html` cu Vue inclus:
```markup
My first Vue app
{{ message }}
```
În codul de mai sus observăm câteva elemente importante:
Am definit in pagină un element `div` cu un `id="app"`. Acest id va fi identificatorul care va fi căutat când inițializăm aplicația Vue.
```markup
...
```
După asta avem un script, care definește aplicația noastră. Observați cum am definit `el: '#app'`, care corespunde elementului `div` cu acest id, creat mai sus:
```markup
```