Las expresiones de enlace en plantillas son muy convenientes, pero en realidad solo se usan para operaciones simples. La plantilla es describir la estructura de la vista. Poner demasiada lógica en una plantilla puede hacer que la plantilla sea demasiado pesada y difícil de mantener. Es por eso que Vue.js restringe las expresiones vinculantes a una expresión. Si se requiere más de una expresión, se deben utilizar los atributos ** de cómputo.
Ejemplos básicos
<div id = "ejemplo"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({el: '#Example', Data: {A: 1}, COMPUTADO: {// A Getter para el atributo calculado b: function () {// `this` señala a la instancia VM devuelve esto.a + 1}}})Aquí declaramos una propiedad calculada b. La función que proporcionamos se utilizará como obteniendo la propiedad vm.b.
console.log (vm.b) // -> 2vm.a = 2console.log (vm.b) // -> 3
Puede abrir la consola del navegador y modificar la VM. El valor de VM.B siempre depende del valor de VM.A.
Puede unir las propiedades calculadas en una plantilla como si vinculara una propiedad normal. Vue sabe que VM.B depende de VM.A, por lo que cuando VM.A cambia, los enlaces que dependen de VM.B también se actualizarán. Y lo mejor es que creamos esta dependencia declarativamente: los obtenedores de las propiedades calculadas son limpios y no tienen efectos secundarios, por lo que también son fáciles de probar y comprender.
Propiedades de cómputo vs. $ reloj
Vue.js proporciona un Method $ Watch, que se utiliza para observar los cambios de datos en las instancias VUE. $ Watch es tentador cuando algunos datos deben cambiar según otros datos, especialmente si es de AngularJS. Sin embargo, generalmente es mejor usar propiedades calculadas en lugar de una devolución de llamada imperativa de $ Watch. Considere el siguiente ejemplo:
<div id = "demo"> {{fullName}} </div> var vm = new vue ({el: '#Demo', data: {firstName: 'foo', lastName: 'bar', fullName: 'foo bar'}}) vm. $ watch ('firstName', function (val) {this.fulLeName = Val + '' '' ' this.lastName}) vm. $ watch ('lastName', function (val) {this.fullName = this.firstname + '' + val})El código anterior es una repetición de imperativos. Comparación con las propiedades de cálculo:
var vm = new Vue ({Data: {FirstName: 'foo', lastName: 'Bar'}, calculado: {fullName: function () {return this.firstname + '' ' + this.lastName}}})Esto es mejor, ¿no?
Calcular setter
El atributo calculado es solo un getter de forma predeterminada, pero también puede proporcionar un setter cuando sea necesario:
// ... Compute: {fullName: {// getter get: function () {return this.firstname + '' ' + this.lastName}, // setter set: function (newValue) {var nombres = newValue.ssplit (' '' ') this.firstName = nombres [0] this.lastName = nombres [nombres.lenggth - 1]}} //Ahora, cuando llame a vm.fullName = 'John Doe', se llamará al setter, y VM.FirstName y vm.lastName también se actualizarán en consecuencia.
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Para obtener tutoriales en los componentes Vue.js, haga clic en el tema especial Vue.js Component Learning Tutorial para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.