Preface
This article is not a tutorial, it is just a tutorial document on Vue's official website while recording and summarizing some problems encountered and thought notes during the learning process.
1. Like vue and avalon, they do not support properties that do not exist at the beginning of the VM.
It can be supported in Angular because angular uses dirty checking to achieve two-way binding, vue and avalon both use setter and getter to achieve two-way binding
For example, the following code will not display the word "xxcanghai" after one second.
<div >
<h1>{{}}</h1>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
obj:{}
}
});
setTimeout(function(){
="xxcanghai";//invalid },1000);
</script>
If the initial value is given, it can take effect, as follows:
<div >
<h1>{{}}</h1>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
obj:{
text:"default Text" //Give initial value }
}
});
setTimeout(function(){
="xxcanghai";//efficient },1000);
</script>
However, the better thing about Vue than avalon is that Vue only has invalid assignments to attributes that do not exist during initialization, but the display will not report an error. Avalon cannot be displayed at all, and an error will be reported when the above first piece of code is run (I don’t know whether the latest avalon will modify this problem)
Fortunately, the $set method is provided in vue to solve the problem of this assignment failure, as follows:
<div i<div >
<h1>{{}}</h1>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
obj: {}
}
});
setTimeout(function() {
v.$set("", "xxcanghai");//efficient }, 1000);
</script>
Although this way of using strings to represent variable names will lead to the inability to use strongly typed precompiled checks (TypeScript), it can at least solve the problem.
Note: Vue2.0 has abandoned the usage of vm.$set and should use the () global method.
2. Attributes and v-model in the input element are preferred.
The following code: When the value attribute in the text box conflicts with v-model, the value attribute of input will be taken as priority and the properties of v-model are overridden
The final output is also "inputText"
<div >
<input type="text" v-model="a" value="inputText">
</div>
<script>
var v = new Vue({
el: '#app',
data: {
a: "vueText"
}
});
();//inputText
</script>
The above conclusions for input of checkbox type are also applicable, as follows:
<div >
<input type="checkbox" v-model="isCheck" checked>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
isCheck: false
}
});
();//true
</script>
The v-model of the checkbox is set to false and does not select it. At the same time, the checked property is selected. The final effect isChecked attributes are preferred, the check box is selected, and the property is rewritten to true.
3. The difference between putting functions in VM in data attributes and methods attributes, and the difference between parentheses and no parentheses when calling functions
When Vue is instantiated, there is a special attribute, namely methods. I read that in the official document, all functions in VMs are placed in the methods attribute. After testing, the functions are written in data and methods and can run normally. So what is the difference between the two?
Through the officialdemoIt can be seen，When binding a function, you can either have brackets or no brackets.，For functions with parameters, they must be called with brackets，But what is the difference between a parenthesed call and a non-parsed call for a function without arguments？ The following tests:
<div >
<button @click="dataFn"></button>
<!--Output：<button>,[MouseEvent]-->
<button @click="dataFn()">()</button>
<!--Output：Vue,[]-->
<button @click="methodsFn"></button>
<!--Output：Vue,[MouseEvent]-->
<button @click="methodsFn()">()</button>
<!--Output：Vue,[]-->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
dataFn: function() {
(this,arguments);
}
},
methods: {
methodsFn: function() {
(this,arguments);
}
}
});
//xxcanghai@blog park</script>
Through the above code comparison, we can get the following conclusions:
- If you want to obtain the Event object in the event response function, you cannot add brackets when binding the event. See examples 1 and 3 above.
- If this is to point to Vue instantiation object in the function, the function should be called with brackets. At the same time, all functions in the methods property, no matter how they are called, this points to the current Vue instantiation object.
- The final conclusion is that all functions in VMs should be placed in methods, and the binding of events should be unbranched. That is, in Example 3 above, the optimal solution is.
PS: Of course, you can also use the built-in $event of vue to display the event object to ensure that the function can be written anywhere and this and event can be used normally.
<div > <button @click="dataFn($event)">($event)</button> <!--Output：Vue,[MouseEvent]--> <button @click="methodsFn($event)">($event)</button> <!--Output：Vue,[MouseEvent]--> </div>
Related notes
Vue study notes-1(https:///article/)
Vue study notes-2(https:///article/)
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.