# 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
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://wiki.girlsgoit.md/frontend-dinamic/vue.js.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.