The difference between vue.1 and vue.2: 1. When using the [v-for] instruction in vue2, it can add repeated content; 2. There is a big difference between vue2 and vue1 in that there is no Filter; 3. The communication between the two components is also different.
[Related article recommendations: vue.js]
vue.1 and vue .2 Difference:
Difference 1:
When using the v-for directive in vue2, it can add duplicate content, just like you can add the same Let’s take a look at the content of the message.
The first thing to introduce when writing code is the vue2js file.
html code:
<div id="box">
<input type="button" value="添加" @click="add()">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>js code:
window.onload=function () {
new Vue({
el:"#box",
data:{
arr:[1,2,3,4,5,6]
},
methods: {
add:function () {
this.arr.unshift("1")
}
}
})
}However, there is another difference, that is, there is no $index, which is present in vue1. But we can manually add $index
<div id="box">
<input type="button" value="添加" @click="add()">
<ul>
<li v-for="(val,index) in arr">{{val}}------->{{index}}</li>
</ul>
</div>Difference 2:
A big difference between us in vue2 and vue1 is that there is no filter! ! ! When we use filters, we have to define them ourselves.
Difference 3:
Furthermore, we use communication between components differently. Let’s take a look:
HTML code:
<div id="div">
我是父组件---->{{emitData.msg}}<br>
<child-com :m="emitData"></child-com>
</div>
</body>
</html>
<template id="tpl">
<div>
<span>我是子组件----></span>
{{m.msg}}<br>
<input type="button" value="change" @click="change()"/>
</div>
</template>js code:
window.onload = function(){
new Vue({
el:"#div",
data:{
emitData:{ //写为json 原理：js中对象的引用
msg:"我是父组件数据"
}
},
components:{
'child-com':{
props:['m'],
template:"#tpl",
methods:{
change(){
this.m.msg='变了';
}
}
}
}
})
}This is not a 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.
<template id="tpl">
<div><h3>3333333</h3><strong>strong</strong></div>
</template>Difference 5:
The life cycle is also different. The life cycle in our vue2 is like this
window.onload=function () {
new Vue({
el:"#box",
data:{
msg:"lalalal"
},
beforeCreate () {
alert("实例创建之前")
},
created() {
alert("实例创建完成")
},
beforeMount() {
alert("数据编译之前")
},
mounted() {
alert("数据编译完成")
},
beforeUpdate:function () {
console.log("数据更新之前")
},
updated:function () {
console.log("数据解析完成")
},
beforeDestroy:function () {
alert("数据销毁之前")
},
destroyed:function () {
alert("数据销毁完成")
}
})
}Finally let’s take a look at the management component communication in a single event
html:
<div id="div">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>js code:
<script>
window.onload = function(){
const event=new Vue;
const A={
template:`
<div>
<span>我是A组件---------></span>{{msg1}}
<input type="button" value="把a组件的数据传给c" @click="send()">
</div>
`,
data(){
return{
msg1:"我是A组件的数据"
}
},
methods:{
send(){
event.$emit("a-data",this.msg1)
}
}
};
const B={
template:`
<div>
<span>我是B组件---------></span>{{msg2}}
<input type="button" value="把b组件的数据传给c" @click="send()">
</div>
`,
data(){
return{
msg2:"我是B组件的数据"
}
},
methods:{
send(){
event.$emit("b-data",this.msg2)
}
}
};
const C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收到A的数据--->{{a}}</span><br/>
<span>接收到B的数据--->{{b}}</span>
</div>
`,
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:"我是父组件数据"
},
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
})
}
</script>Related free learning recommendations: JavaScript(Video)
The above is the detailed content of What is the difference between vue.1 and vue.2. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
