vue2与vue1的区别
2018-06-24 01:39:18来源:未知 阅读 ()
在前面的学习过程中我们已经对vue1有了一定的了解,下面我们来学习一下vue2,看一下vue1与vue2有什么区别。
区别1:
在vue2中使用v-for指令时它可以添加重复的内容,就像可以添加相同的留言内容,下面我们来看一下
在写代码的时候首先要引入的是vue2js文件。
html代码:
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div>
js代码:
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:
我们在vue2中跟vue1中有一个很大的区别就是没有过滤器!!!我们用着过滤器的时候要要自己定义。
区别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:
对于生命周期也是有所不同的,我们vue2中的生命周期是这样的
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>
以上就我所了解的vue2。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- HTML 5的革新——语义化标签section和article的区别 2020-06-01
- 前端开发和后端开发的区别?这两者哪个更累? 2020-05-22
- XHTML?它与 HTML的区别?如何转换 2020-03-31
- CSS3--3种隐藏元素方法的区别 2020-03-20
- HTML5与HTML4的区别 2020-01-19
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash