Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the differences between vue.js2.0 and vue.js1.0, the article is very detailed, has a certain reference value, interested friends must read it!

The differences between vue.js2.0 and vue.js1.0 are: 1, vue2.0 allows only one root element per component, vue1.0 allows a component to have multiple root elements; 2, vue2.0 removes two implicitly declared variables $index and $key; 3, vue2.0 deprecates prop.

This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.

The differences are as follows:

1. 2.0 allows only one root element per component, and 1.0 allows a component to have multiple root elements.

2. Life cycle hook function

3 、 v-for

Parameter sequence change

V2 removes the implicitly declared variables $index and $key

Key replaces track-by

Key in v2 is specified using track-by in v1, and track-by does not bind to v-bind, but directly specifies the key name, such as:

V2:

Scope change

Props

In v1, the coerce method can be defined inside the prop to do some calculation before passing the value of prop to the component, and the value of prop obtained inside the component is the value returned by the coerce method.

PropG: {coerce: function (val) {return val +'/ / cast the value to string}}

V2 uses computed instead

TwoWay prop

V1 sets the twoWay property of prop to true, which can be passed in both directions.

.sync and .once

When binding prop in v1, you can use the .sync and .once modifiers

.sync displays bi-directional binding prop

Once the value of the .once prop is passed, the parent component's changes to the property will no longer be synchronized to the child component.

Modify prop

V1 can be modified. Prop,v2 has been deprecated.

Props of the root instance

The root instance in v1 can have a props attribute, and propsData is replaced in v2

Calculation attribute

The computed calculation attribute in v2 is cached by default, and a cache attribute can be added to the calculation attribute in v1. If it is set to false, cache verification will be turned off.

Vue instruction

V-bind

For the judgment of true and false values in v-bind instructions, v1 follows the general rules of js. In v2, only null, undefined and false are regarded as false, and 0 and 'are regarded as true values.

This rule is limited to v-bind instructions. V-if and v-show still follow the rules of js.

V-on

The v-on instruction in v1 can listen to native events, while v2 only listens to custom events. If you need to listen to native events, you need to add a .native modifier.

V-model

V-model with debounce parameter

Form elements in v1 that use the v-model directive can have the debounce attribute, which is used to set a minimum delay for updating the model.

This controls the frequency of status updates, not the time-consuming task itself.

Lazy, number parameters

The .marker and .number modifiers in v2 appear as tag attributes in v1

Initial value of v-model

The initial value of v-model in v2 is the value of the bound data, but in v1, the value of the current tag element is used as the initial value.

V-bind:style

V-bind:style in v1 can be added! important,v2 must be written as a string. As follows

/ / v1hello

/ / v2hello

V-el and v-ref

In v1, you can use v-el to specify a name for the DOM element and v-ref for the component to facilitate calling the element or component instance. These two instructions are discarded in v2 to unify the use of ref='name'.

V-show is used with v-else

V-show is allowed to be used with v-else in v1, as follows

/ / v1Foo

Not foo, but bar

/ / v2Foo

Not foo, but bar

These are all the contents of this article entitled "what are the differences between vue.js2.0 and vue.js1.0". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.