1. Vue commonly used modifiers and their functions
.stop : Equivalent to event.stopPropagation() in JavaScript, preventing event bubbling
.prevent : Equivalent to event.preventDefault() in JavaScript, preventing the execution of the preset behavior (if the event can be canceled, cancel the event without stopping the further propagation of the event):
.capture: Contrary to the direction of event bubbling, event capture is from outside to inside
.self ! Only trigger events within its own scope, not including child elements
.once : will only fire once.
2. Principles of v-if, v-show, v-html
v-if will call the addlfCondition method, the corresponding node will be ignored when generating vnode, and will not be rendered when rendering. Modify the show attribute value in the attribute, which is often called display;
v-html will first remove all nodes under the node, call the html method, and add the innerHTML attribute through addProp. In the final analysis, set innerHTML to the value of v-html.
3. The difference between v-if and v-show
Means: v-if is to dynamically add or delete DOM elements to the DOM tree: V-show is to control the display and hiding by setting the display style attribute of the DOM element
Compilation process: vi switching has a partial compilation/unloading process, during which the internal event listeners and sub-components are properly destroyed and rebuilt; Vshow is simply based on css switching:
compile-condition: v-if is lazy, does nothing if the initial condition is false; local compilation only starts when the condition becomes true for the first time: v-show is in any condition, regardless of whether the first condition is If true, both are compiled, then cached, and DOM elements are preserved:
Performance consumption: v-if has higher switching consumption: v-show has higher initial rendering consumption
. Usage scenario: v-if is suitable for operating conditions and is unlikely to change: v-show is suitable for frequent switching
4. How is v-model implemented? What is the actual syntactic sugar?
(1) The value that acts on the form element and dynamically binds the input points to the messgae variable, and dynamically sets the message to the target value when the input event is triggered:
<input v-model="sth" />
// 等同于
<input
v-bind:value="message"
v-on:input="message=$event.target.value"
>
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中，value => sth;
//在:value中,sth => value;(2) Act on the component
In custom components, v-model will use prop named value and event named input by default
The essence is a syntactic sugar for parent-child component communication, which is realized through prop and s.emit. So the parent component v-model syntactic sugar can essentially be modified as
<child :value="message" @input="function(e){message = e}"></child>In the implementation of the component, the prop name received by the sub-component and the event name dispatched can be configured through the v-model attribute. example
// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>
// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>
props:{value:aa,}
methods:{
onmessage(e){
$emit('input',e.target.value)
}
}
By default, v-model on a component will use value as prop and input as event. But some input types like radio buttons and checkbox buttons may want to use the value prop for different purposes. Conflicts in these cases can be avoided by using the model option. js listens to the input data change of the input input box, using oninput, this event will be triggered immediately after the data is changed. $emit the data through the input event and accept it in the parent component. The parent component sets the value of v-model to the value from input $emit.