<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>
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);He will sleep there. - El va dormi acolo.
Él dormirá allí. - El va dormi acolo.