Yesterday after reading the article of the great God, deeply ashamed, and continue to crossing Web documents, however, this is not really no way, the introduction of some perfunctory:
1), calculated properties: Not to say computed is a computed attribute keyword, VM instances can be like proxy data proxy computed, you can directly put its properties as text interpolation into the HTML tag.
2) What does the getter here mean?
Console.log () Why do you use it?
The value of Vm.reversedmessage depends on Vm.message, which in turn is true?
- After a half-day of information, know the above explanation of the whole point: Getter and setter method What is the point? For a long while, I have to summarize the following: Getter is used to get the property value of data, and can be modified after the output (combined with the above example), but does not affect the data property values.
- Console.log () is in the browser console to print a view of the use of information functions (the foundation is not strong AH), some netizens introduced very detailed: http://blog.csdn.net/bcbobo21cn/article/details/51810601
- In turn, the value of vm.reversedmessage depends on Vm.message, but the value of vm.reversedmessage is not modified individually, and the Console.log () is used to view the information as follows:
It is clear that after changing the value of Vm.reversedmessage, the value of vm.message is not changed, and then it is printed itself, as well as unmodified.
What is not clear is why the undefined appear below?
3), simple understanding getter, is the return value (get value), Setter is set property value. The example that can be given on the website is not the same as the offline test:
Code such as:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Vue Test Example-Rookie tutorial (runoob.com)</title></Head><style>. Static{background:#444;Color:#eee;width:100px;Height:100px; }</style><Body><DivID= "Demo">{{FullName}}</Div><Scriptsrc= "Js/vue.js"></Script><Script> varVMS= NewVue ({el:'#demo', data: {firstName:'Foo', LastName:'Bar', FullName:'Foo Bar'}, computed: {fullName: {//GetterGet:function () { return This. FirstName+ ' ' + This. LastName},//SetterSet:function(newvalue) {varnames=Newvalue.split (' '); This. FirstName=names[0]; This. LastName=Names[names.length- 1]; } } } })</Script></Body></HTML>
View CodeFrom the browser's console on the left, it can be seen that the setter has not been called, and Vm.firstname and Vm.lastname have not been updated. What the hell's the problem?
Wait until the back wide eyes found in the data also set the FullName, commented out the data set in the FullName, then run and print Vm.firstname and vm.lastname, their values did change, as shown in the image on the right:
So I guess: when the attribute name in data is the same as the attribute name in the computed attribute computed, the attribute name in data is the main, and the computed is invalid.
Copy Summary:
Computed properties Keywords: computed.
Computed properties are useful when dealing with some complex logic.
Computed properties are cached based on their dependencies. A computed property is evaluated only if its dependent dependency has changed.
Computed properties of Vue.js (2.x)