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

This article introduces the relevant knowledge of "what's the difference between vuejs2 and 1". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Differences: 1, the use of v-for instructions in vue2 can add repetitive content, vue1 is not; 2, vue2 has a filter, vue1 is not; 3, different communication between components; 4, different life cycle, and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Difference 1:

When using the v-for instruction in vue2, it can add repetitive content, just as you can add the same message content. Let's take a look at it.

The first thing to introduce when writing code is the vue2js file.

Html Code:

{{item}}

Js Code:

_ window.onload=function () {new Vue ({el: "# box", data: {arr: Methods: {add:function () {this.arr.unshift ("1")})}

However, one difference is that there is no $index, which is available in vue1, but we can add $index manually

{{val}}-> {{index}}

Difference 2:

There is a big difference between vue2 and vue1 in that there is no filter! We have to define it ourselves when we use the filter.

Difference 3:

In addition, we are also different when using communication between components, so let's take a look at:

Html Code:

I am the parent component-> {{emitData.msg}}

I am a subcomponent-> {{m.msg}}

Js Code:

_ window.onload = function () {new Vue ({el: "# div", data: {emitData: {/ / written as json principle: reference to the object in js msg: "I am the parent component data"}} Components: {'child-com': {props: [' m'], template: "# tpl", methods: {change () {this.m.msg=' has changed' })}

This is not the method in vue2, but we can use this method to solve the problem.

Difference 4:

One of the most basic differences is that when we define a template, we should wrap the template in a big box.

3333333strong

Difference 5:

The lifecycle is also different. The lifecycle in our vue2 is like this.

_ window.onload=function () {new Vue ({el: "# box", data: {msg: "lalalal"}, beforeCreate () {alert ("before instance creation")} Created () {alert ("instance creation complete")}, beforeMount () {alert (before data compilation)}, mounted () {alert ("data compilation complete")} BeforeUpdate:function () {console.log (before data update)}, updated:function () {console.log (data parsing completed)} BeforeDestroy:function () {alert (before data destruction)}, destroyed:function () {alert (data destruction completed)})}

Finally, let's take a look at managing component communication in a single event.

Html:

Js Code:

_ window.onload = function () {const event=new Vue Const A = {template: `I am component A-> {{msg1}}`, data () {return {msg1: "I am the data of component A"}} Methods: {send () {event.$emit ("a-data", this.msg1)} Const B = {template: `I am component B-> {{msg2}}`, data () {return {msg2: "I am the data of component B"}} Methods: {send () {event.$emit ("b-data", this.msg2)} Const C = {template: `I am the data received by C component A-> {{a}} received B data-> {{b}}`, data () {return {a: "a" B: "b"}}, mounted () {event.$on ("a-data", function (a) {this.a=a .bind (this); event.$on ("b-data", function (b) {this.b=b} .bind (this))}} New Vue ({el: "# div", data: {msg: "I am the parent component data"}, components: {"com-a": a, "com-b": B "com-c": C}})} "what's the difference between vuejs2 and 1"? that's it. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.