Bind expressions in templates are very convenient, but they are actually only used for simple operations. The template is to describe the structure of the view. Putting too much logic into a template can make the template too heavy and difficult to maintain. This is why Vue.js restricts binding expressions to one expression. If more than one expression is required, the ** compute attributes should be used.
Basic examples
<div id="example"> a={{ a }}, b={{ b }}</div> var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // A getter for computed attribute b: function () { // `this` points to the vm instance return this.a + 1 } }})Here we declare a computed property b. The function we provide will be used as a getter for the property vm.b.
console.log(vm.b) // -> 2vm.a = 2console.log(vm.b) // -> 3
You can open the browser console and modify the vm. The value of vm.b always depends on the value of vm.a.
You can bind computed properties in a template like you would bind a normal property. Vue knows that vm.b depends on vm.a, so when vm.a changes, bindings that depend on vm.b will also be updated. And the best thing is that we create this dependency declaratively: the getters of computed properties are clean and have no side effects, so they are also easy to test and understand.
Compute properties vs. $watch
Vue.js provides a method $watch, which is used to observe data changes on Vue instances. $watch is tempting when some data needs to change based on other data - especially if you are from AngularJS. However, it is usually better to use computed properties instead of an imperative $watch callback. Consider the following example:
<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.fullName = val + ' ' + this.lastName})vm.$watch('lastName', function (val) { this.fullName = this.firstName + ' ' + val})The above code is a repetition of imperatives. Comparison with the calculation properties:
var vm = new Vue({ data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }})This is better, isn't it?
Calculate setter
The computed attribute is just a getter by default, but you can also provide a setter when needed:
// ...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.length - 1] } }}// ...Now when calling vm.fullName = 'John Doe', the setter will be called, and vm.firstName and vm.lastName will also be updated accordingly.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.