vue.1和vue.2区别是什么

vue.1和vue.2区别：1、在vue2中使用【v-for】指令时它可以添加重复的内容；2、vue2中跟vue1中有一个很大的区别就是没有过滤器；3、两者使用组件之间的通讯时也不同。

【相关文章推荐：vue.js】

vue.1和vue.2区别：

区别1：

在写代码的时候首先要引入的是vue2js文件。

html代码：

<div id="box">         <input type="button" value="添加" @click="add()">         <ul>             <li v-for="item in arr">{{item}}</li>         </ul>     </div>

 window.onload=function () {             new Vue({                 el:"#box",                 data:{                    arr:[1,2,3,4,5,6]                 },                 methods: {                     add:function () {                         this.arr.unshift("1")                     }                 }             })         }

但是，还有一点不同的地方就是没有$index了，在vue1中是有的，但我们可以手动添加$index

<div id="box">         <input type="button" value="添加" @click="add()">         <ul>             <li v-for="(val,index) in arr">{{val}}------->{{index}}</li>         </ul>     </div>

区别2：

区别3：

再者我们在使用组件之间的通讯时也不同，下面我们来看一下：

html代码：

<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代码：

 window.onload = function(){         new Vue({             el:"#div",             data:{                 emitData:{  //写为json 原理：js中对象的引用                     msg:"我是父组件数据"                 }             },             components:{                 'child-com':{                     props:['m'],                     template:"#tpl",                     methods:{                         change(){                             this.m.msg='变了';                         }                     }                 }             }         })     }

这不是vue2中的方法但是我们可以使用这种方法来解决问题。　

区别4：　

<template id="tpl">     <div><h3>3333333</h3><strong>strong</strong></div> </template>

区别5：　

 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("数据销毁完成")                 }             })         }

最后我们来看一下单一事件中管理组件通讯

html:

<div id="div">     <com-a></com-a>     <com-b></com-b>     <com-c></com-c> </div>

js代码：

<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>

相关免费学习推荐：JavaScript（视频）

以上就是vue.1和vue.2区别是什么的详细内容，更多内容请关注技术你好其它相关文章！