O que é Vue.js?
Vue.js permite estender HTML com atributos HTML chamados diretivas
As diretivas Vue.js oferecem funcionalidade para aplicativos HTML
Vue.js fornece diretivas integradas e diretivas definidas pelo usuário
Diretivas Vue.js
Vue.js usa chaves duplas {{ }}como espaços reservados para dados.
As diretivas Vue.js são atributos HTML com o prefixo v-
Exemplo de visualização
No exemplo abaixo, um novo objeto Vue é criado com new Vue() .
A propriedade el: liga o novo objeto Vue ao elemento HTML com id="app" .
Exemplo
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vinculação Vue.js
Quando um objeto Vue está vinculado a um elemento HTML, o elemento HTML mudará quando o objeto Vue mudar:
Exemplo
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vinculação bidirecional Vue.js
A v-modeldiretiva vincula o valor dos elementos HTML aos dados do aplicativo.
Isso é chamado de ligação bidirecional:
Exemplo
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Loop Binding
Usando a v-fordiretiva para vincular um array de objetos Vue a um "array" de elemento HTML:
Exemplo
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>