VueJS - Instâncias
Para começar com VueJS, precisamos criar a instância de Vue, que é chamada de root Vue Instance.
Sintaxe
var app = new Vue({
// options
})Vejamos um exemplo para entender o que precisa ser parte do construtor Vue.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})Para Vue, existe um parâmetro chamado el. Leva o id do elemento DOM. No exemplo acima, temos o id#vue_det. É o id do elemento div, que está presente em .html.
<div id = "vue_det"></div>Agora, tudo o que vamos fazer afetará o elemento div e nada fora dele.
A seguir, definimos o objeto de dados. Tem os valores primeiro nome, sobrenome e endereço.
O mesmo é atribuído dentro do div. Por exemplo,
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>O valor do Nome: {{nome}} será substituído dentro da interpolação, ou seja, {{}} pelo valor atribuído no objeto de dados, ou seja, Ria. O mesmo vale para o sobrenome.
Em seguida, temos métodos onde definimos uma função mydetails e um valor de retorno. É atribuído dentro do div como
<h1>{{mydetails()}}</h1>Portanto, dentro de {{}} a função mydetails é chamada. O valor retornado na instância Vue será impresso dentro de {{}}. Verifique a saída para referência.
Resultado
Agora, precisamos passar opções para o construtor Vue que são principalmente dados, template, elemento para montar, métodos, callbacks, etc.
Vamos dar uma olhada nas opções a serem repassadas ao Vue.
#data- Este tipo de dado pode ser um objeto ou uma função. O Vue converte suas propriedades em getters / setters para torná-lo reativo.
Vamos dar uma olhada em como os dados são passados nas opções.
Exemplo
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>Resultado
console.log(vm.fname); // imprime Raj
console.log(vm.$data); imprime o objeto completo como mostrado acima
console.log(vm.$data.fname); // imprime Raj
Se houver um componente, o objeto de dados deve ser referido a partir de uma função, conforme mostrado no código a seguir.
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>No caso de um componente, os dados são uma função, que é usada com Vue.extend conforme mostrado acima. Os dados são uma função. Por exemplo,
data: function () {
return _obj
}Para referir-se aos dados do componente, precisamos criar uma instância dele. Por exemplo,
var myComponentInstance = new Component();Para obter os detalhes dos dados, precisamos fazer o mesmo que fizemos com o componente pai acima. Por exemplo.
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);A seguir estão os detalhes exibidos no navegador.
Props- O tipo de adereços é uma matriz de string ou objeto. Requer uma sintaxe baseada em array ou em objetos. Eles são considerados atributos usados para aceitar dados do componente pai.
Exemplo 1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})Exemplo 2
Vue.component('props-demo-advanced', {
props: {
// just type check
height: Number,
// type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})propsData - Isso é usado para teste de unidade.
Type- array de string. Por exemplo, {[chave: string]: qualquer}. Ele precisa ser passado durante a criação da instância Vue.
Exemplo
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})Computed- Tipo: {[tecla: string]: Função | {get: Function, set: Function}}
Exemplo
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
// get only, just need a function
aSum: function () {
return this.a + 2;
},
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>Computado tem duas funções aSum e aSquare.
A função aSum apenas retorna this.a+2. Função aSquare novamente duas funçõesget e set.
A variável vm é uma instância de Vue e chama aSquare e aSum. Além disso, vm.aSquare = 3 chama a função set de aSquare e vm.aSquare chama a função get. Podemos verificar a saída no navegador que se parece com a imagem a seguir.
Methods- Os métodos devem ser incluídos com a instância Vue, conforme mostrado no código a seguir. Podemos acessar a função usando o objeto Vue.
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>Os métodos fazem parte do construtor Vue. Vamos fazer uma chamada para o método usando o objeto Vuevm.asquare (), o valor da propriedade a é atualizado no asquarefunção. O valor de a é alterado de 1 para 25 e o mesmo é visto refletido no console do navegador a seguir.
