As expressões de ligação nos modelos são muito convenientes, mas na verdade são usadas apenas para operações simples. O modelo é descrever a estrutura da visão. Colocar muita lógica em um modelo pode tornar o modelo muito pesado e difícil de manter. É por isso que o vue.js restringe expressões de ligação a uma expressão. Se mais de uma expressão for necessária, os atributos de computação ** devem ser usados.
Exemplos básicos
<div id = "exemplo"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({el: '#example', dados: {a: 1}, computado: {// um getter para atributo computado b: function () {// `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` 'Aqui declaramos uma propriedade computada b. A função que fornecemos será usada como um getter para a propriedade vm.b.
console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
Você pode abrir o console do navegador e modificar a VM. O valor da vm.b sempre depende do valor de vm.a.
Você pode vincular propriedades computadas em um modelo como se vincularia uma propriedade normal. O Vue sabe que o VM.B depende do VM.A; portanto, quando o VM.A muda, as ligações que dependem do VM.B também serão atualizadas. E o melhor é que criamos essa dependência declarativamente: os getters das propriedades computadas são limpas e não temos efeitos colaterais, por isso também são fáceis de testar e entender.
Propriedades de computação vs. $ relógio
O vue.js fornece um método $ relógio, usado para observar alterações de dados nas instâncias do VUE. $ watch é tentador quando alguns dados precisam alterar com base em outros dados - especialmente se você for do AngularJS. No entanto, geralmente é melhor usar propriedades computadas em vez de um retorno de chamada de relógio $ imperativo. Considere o seguinte exemplo:
<div id = "Demo"> {{fullName}} </div> var VM = new Vue ({el: '#demo', dados: {primeironame: 'foo', lastName: 'bar', fullName: 'foo bar'}}) vm. this.lastName}) vm. $ watch ('lastName', function (val) {this.fullname = this.firstname + '' + val})O código acima é uma repetição de imperativos. Comparação com as propriedades de cálculo:
var VM = new Vue ({Data: {FirstName: 'Foo', LastName: 'Bar'}, computado: {fullName: function () {return this.firstname + '' this.lastname}}})Isso é melhor, não é?
Calcule o setter
O atributo calculado é apenas um getter por padrão, mas você também pode fornecer um setter quando necessário:
// ... compute: {fullName: {// getter get: function () {return this.firstname + '' + this.lastName}, // setter set: function (newValue) {var names = newValue.split ('') this.firstname = names [0] this.LastName = names = names = names = names = names = names = names = names = names.Agora, ao ligar para vm.fullName = 'John Doe', o setter será chamado, e vm.firstname e vm.LastName também serão atualizados de acordo.
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
Para tutoriais nos componentes vue.js, clique no tutorial de aprendizado de componentes do Tópico Especial Vue.js para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.