Do you know the basic concepts of vue? Friends who are not very clear can get familiar with it first.
Vue Basic Tutorial
(Pronunciation /vjuː/, similar to view) is a progressive framework for building user interfaces.
Vue focuses only on view layers and adopts a design developed from bottom to up.
Vue's goal is to implement responsive data binding and combined view components with the simplest API possible.
This article has compiled the new features of vue2.2.0+ for you and listed the key points of each version in detail. This is the knowledge that this article focuses on, and you can refer to it and learn it.
Attach the official website first:/v2/guide/
Version 2.2.0+
v-for
In version 2.2.0+, key is now necessary when using v-for in components.
Mouse Modifier
.left
.right
.middle
These modifiers restrict the processing function to respond only to specific mouse buttons.
model
Allows a custom component to customize props and events when using v-model. By default, a v-model on a component will use value as prop and input as event, but some input types such as radio box and checkbox buttons may want to use value prop to achieve different purposes. Use the model option to avoid conflicts arising from these situations.
('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
checked: {
type: Number,
default: 0
}
},
data:function(){
return{
_value:
}
},
template:`
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change',$)"
></input>`
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
The above code is equivalent to:
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
Note: The checked property should be declared in props
provide/inject
This pair of options needs to be used together to allow an ancestor component to inject a dependency into all its descendants, regardless of the depth of the component hierarchy and always take effect during the time when the upstream and downstream relationship is established.
/v2/api/#provide-inject
Version 2.3.0
Bind inline styles
Starting from 2.3.0, you can provide an array of multiple values for properties in style bindings, which are often used to provide multiple prefixed values, such as:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Writing this way will only render the last value in the array that is supported by the browser. In this case, if the browser supports flexbox without browser prefix, then it will only render
display: flex
。
Event modifier
Vue also provides the .passive modifier corresponding to the passive option in addEventListener.
<!-- Default behavior of scrolling events (That is, scrolling behavior) Will trigger immediately --> <!-- And won't wait `onScroll` Finish --> <!-- This includes `()` The situation --> <div v-on:="onScroll">...</div>
This .passive modifier can especially improve the performance of the mobile side.
Note: The third parameter in addEventListener in the new standard is no longer true (event capture) fasle (event bubble), but an object:
('click',callback,
{
capture:false,//Whether to catch the event passive:false,// Whether to allow default behavior, it is very useful to zoom in and out on the mobile touch screen when zooming in and out on the mobile side once:false// Remove the event once it is executed})
Note: Do not use .passive with .prevent, because .prevent will be ignored
v-bind
Modifier .sync (2.3.0+) syntax sugar, expands to a v-on listener that updates the parent component's binding value
/v2/guide/#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
Version 2.4.0
v-on
Starting from 2.4.0, v-on also supports objects that bind an event/listener key-value pair without parameters, such as $listeners. Note that when using object syntax, no modifiers are supported.
Note: v-bind can be bound to an object containing key-value pairs when there are no parameters. where class and style cannot represent objects and arrays.
Version 2.5.0
Key modifier
You can also directly convert any valid key name exposed to kebab-case (short horizontal line naming) as a modifier:
<input @-down="onPageDown">
There are some keys ( .esc and all arrow keys) that have different key values in IE9, and their built-in alias should be preferred if you want to support IE9. In the above example, the processing function is only $ === 'PageDown' is called when
.exact modifier (system modifier key)
The .exact modifier allows you to control events triggered by precise combinations of system modifiers.
<!-- even though Alt or Shift It will also trigger when pressed together --> <button @="onClick">A</button> <!-- There are and only Ctrl Triggered only when pressed --> <button @="onCtrlClick">A</button> <!-- 没有任何系统修饰符Triggered only when pressed --> <button @="onClick">A</button>
slot-scope
Used to represent an element or component as a scoped slot. The value of the feature should be a legal JavaScript expression that can appear at the parameter position of the function signature. This means that in supported environments, you can also use ES2015 deconstruction in expressions. It replaces scope in 2.5.0+.
On 2.5.0+, slot-scope is no longer restricted to the <template> element, but can be used on any element or component within the slot.
Summarize