<script src='//cdn.jsdelivr.net/npm/vue'></script>- Sau, copiati codul JavaScript de la acea adresa, salvati-l intr-un fisier .js pe server, apoi includeti acel fisier in pagina.
Vue js foloseste o sintaxa de template cu acolade duble {{ }} ca inlocuitori pentru datele ce urmeaza sa fie adaugate.
Cu Vue.js se poate extinde codul HTML cu atribute numite directive. Acestea sunt atribute HTML cu prefixul v-, si confera functionalitate aplicatiilor HTML.
Vue.js ofera directive incorporate si directive definite de programator.
new Vue()
. O proprietate el: face legatura intre noul obiect Vue si elementul HTML care are id-ul adaugat la el:.<div id='app'> <h1>{{ message }}</h1> </div> <script> var vue_ob = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) </script>
Cand un obiect Vue e legat de un element HTML, acel element HTML se modifica cand datele din obiectul Vue se schimba:
<div id='app'> {{ message }} </div> <button id='btn'>Click</button> <script> var vue_ob = new Vue({ el: '#app', data: {message: 'Hello Vue!'} }) //When click on the #btn element, change message text document.getElementById('btn').addEventListener('click', (ev)=>{ vue_ob.message ='MarPlo - CoursesWeb'; }); </script>
v-model
leaga valoarea din diferite elemente HTML cu datele aplicatiei.
<div id='app'> <p>{{ msg }}</p> Add some text in this input:<br> <input v-model='msg'> </div> <script> var vue_ob = new Vue({ el: '#app', data: {msg: 'Hello Vue!'} }) </script>
v-for
se poate lega un array sau obiect cu o lista de elemente HTML; de exemplu pentru a crea o lista cu taguri LI:
<div id='app'> List created with Vue JS. <ul> <li v-for='li in list'>{{ li }}</li> </ul> </div> <script> var vue_ob = new Vue({ el: '#app', data: { list: ['Learn JavaScript', 'Learn Vue.js', 'Build Something Awesome'] } }) </script>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 { padding: 2px 0.2em; }
// preia primul Div cu class="cls", si afiseaza continutul var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }
We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.