vue core knowledge points
1, for a progressive frame Vue is understood
Meaning progressive stands for: Minimum proposition.
Vue may in some respects be as good as React, not as good as Angular, but it is gradual, there is no strong advocates, you can top the original large-scale systems, the one or two components use it to achieve when using jQuery; it can also be used throughout the entire family development barrel, when Angular use; you can also use it to view the entire lower with your own design with. You can use OO and where the underlying data logic design patterns set of ideas can also be functional, you can, it's just a lightweight view it, only their own thing to do, should not do not do , nothing more. Progressive meaning, my understanding is: do not do more than duty.2. What are the two core vue.js is?
The data driver and component
3, may I ask v-if , and v-show what is the difference?
The same point: both are in a DOM node determines whether to display the
difference:
a implementations:. V the -if element node is deleted or reconstructed according to the authenticity determination value after the data directly from the tree Dom. v the -show just modify css style element, which is the display of attribute values, elements always Dom tree.
. b compilation process: V the -if there is a local switching compilation process / unloading process of switching the destruction and reconstruction suitably event listener and inside the subassembly; V -show simply switching based css;
. c compiler conditions: v the -if inert, if the initial condition is false, do nothing; only when the condition becomes true first start locally compiled; v the -show under any conditions (initial conditions whether that is true) have been compiled and cached, and DOM element should always be reserved;
. d Performance consumption: V the -if higher switching consumption is not suitable for frequent handover; V -show rendering with high initial consumption amount suitable for frequent handover;
4, vue commonly used modifiers
a, modifier keys
Such as: .Delete (capture "Delete" and "backspace" key) on the usage and event modifier like mount v-on: the back, the syntax:v-on:keyup.xxx=’yyy’ <input class = 'aaa' v-model="inputValue"
Can be used as a modifier to achieve only trigger a mouse or keyboard events only when pressing the corresponding key listener
- .ctrl
- .alt
- .shift
- .meta
c, mouse button modifier
- .left
- .right
- .middle
These modifiers may limit handler responds only to a specific mouse button. Such as: the mouse wheel click the trigger Click the left mouse button click by default<button @click.middle ="onClick">A</button>
d、其他修饰符
- .lazy
By default,v-modeleachinputsynchronized with the data value after the event trigger input box, we can addlazya modifier, thereby into usechangeto synchronize events:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" > - .number
If the user wants to automatically input value into a numeric type, to bev-modeladded.numbermodifiers:
<input v-model.number="age" type="number">
This is often useful, because even at type="number"the time, HTML input element's value will always return the string. If this value can not be parseFloat()resolved, the original value is returned.
- .trim
To automatically filtered inclusive whitespace characters input by a user, the modifier may be added to trim v-model:
<input v-model.trim="msg">
Also preceded by a space before and after adding .trim spaces are removed
5, v-on you can monitor multiple ways?
can
6, the vue key effect values
Use to make a key that uniquely identifies each node
The key role is mainly to update the virtual efficient the DOM . Further vue at the transition with the same switching element tag name, to also use a key attribute, which also aims to allow vue distinguish between them,
Otherwise vue will replace its internal property without triggering transition effects.
7, Vue assembly data must be why the function
In new Vue()the, datais operating as a target, however component, the dataonly function of the form is present, the object can not be directly assigned to it.
When the data is a function option, each instance can maintain a separate copy of the object is returned, so that each instance of data do not affect each other, are independently
8, v-for the v-if priority
v-for priority than v-if high
9, vue neutron component invokes the parent component method
Reference: https://www.cnblogs.com/jin-zhe/p/9523782.html
The first method is a method in the subassembly to call the parent component by direct this. $ Parent.event of
The second method is to use the sub-assembly in $emita trigger event to a parent component, the parent component listens to this event on the line.
The third is the parent component sub-assembly method passed, the sub-assembly in calling this method directly
10, vue lifecycle hook function What?
Reference: https://www.jianshu.com/p/8b7373362b4c
Total is divided into eight stages before the creation / after, before loading / after update before / after the destruction before / after.
Create a front / rear
In beforeCreated stage, mount EL element vue $ instance data objects and data are undefined, yet initialized.
In phase created, the data object has data vue instance, $ EL yet.
Before loading / post
In beforeMount stage, vue $ el instances and data are initialized, but still before the dom mounted as a virtual node, data.message has not been replaced.
In the mounted stage, vue example of the mount is completed, data.message successfully rendered.
Before updating / after
When the data changes, it will trigger beforeUpdate and updated methods.
Destruction before / after
After performing the destroy method, changes to the data will no longer trigger periodic function, examples illustrate this point vue been unbound and event listeners as well as the dom, dom but the structure still exists
11, the spoken command vue among at least 4 and its use
v-if (to determine whether hidden), v-for (the traverse data out), v-bind (binding property), v-model (two-way binding)
12. What is the principle of two-way binding is vue
Reference: https://www.cnblogs.com/libin-1/p/6893712.html
vue two-way data binding is hijacked by a combination of data publishers - to achieve Subscriber Model manner.
There are other related vue face questions refer to:https://blog.csdn.net/liangjielaoshi/article/details/84064095