vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的，下面主要总结一下2.0相对于1.0的一些变化。
组件定义
在vue1.0中，我们有使用vue.extend()来创建组件构造器继而创建组件实例，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>我是全局组件</h3>'
});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
});
</script>
但是在vue2.0中，推出了一种更简洁的组件定义方法。
<template id="aaa">
<p>我是组件</p>
</template>
<div id="box">
<aaa></aaa>
{{msg}}
</div>
<script>
var Home={
template:'#aaa'
};
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
components:{
'aaa':Home
}
});
};
</script>
代码片段
在vue1.0中，我们可以将多个代码片段同时放在组件模板中，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:`<p>我是组件元素</p>
<p>我也是组件元素</p>
<p>我还是组件元素</p>
`
});
var vm=new Vue({
el:'#box',
});
</script>
但是当我们将vue.js改为2.0的时候，就会报错。
因为在vue2.0中，组件里面只能存在一个根元素，所以当有多个元素存在时，需要使用一个根元素进行包裹，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:`<div>
<p>我是组件元素</p>
<p>我也是组件元素</p>
<p>我还是组件元素</p>
</div>
`
});
var vm=new Vue({
el:'#box',
});
</script>
生命周期
在vue1.0中的生命周期函数主要有下图构成：
在vue2.0中，生命周期函数较之前有了比较大的改变：
我们可以通过一个具体的实例来理解这些函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
<script>
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
</script>
</body>
</html>
首先没有任何操作时，实例创建和模板编译。
当我们点击更新数据后
最后点击销毁组件
循环
我们先看一个基于vue1.0的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue1.0.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in list" >
{{val}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
</script>
</body>
</html>
当我们第一次点击时在数组中添加了一项，但是再次点击时，就会报错，因为在vue1.0的循环中，默认是不允许重复数据的，除非在循环中添加track-by，如下：
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in list" track-by="$index">
{{val}}
</li>
</ul>
</div>
但是在vue2.0中，默认就可以添加重复数据。当我们把上面例子中的vue.js换成2.0的，就不再会报错了。
自定义键盘事件
首先是在vue1.0中，我们是通过directive来自定义键盘事件的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue1.0.js"></script>
</head>
<body>
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
<script>
Vue.directive('on').keyCodes.ctrl=17;
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
</script>
</body>
</html>
但是在vue2.0中，我们自定义键盘事件的写法发生了变化。
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
<script>
Vue.config.keyCodes.ctrl=17;
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
</script>
过滤器
在之前总结过滤器的时候有提到过，在vue1.0中，存在很多系统再带的过滤器，但是现在在vue2.0中，删除了所有的内置过滤器，用户需要按需自定义过滤器。
vue2.0变化的更多相关文章
- vue2.0变化(转载)
原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每个组件模板template,不再支持片段代码 之前: <template& ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- VUE2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...
- Vue2.0中v-for迭代语法变化（key、index）【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0以后，有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- Cloth
https://www.youtube.com/watch?v=2zd1AI198I8Blender Tutorial For Beginners: Cloth Napkin 建模, 1透明玻璃杯, ...
- SharpZipLib 压缩ZIP导出
var uploadSectionDir = Path.Combine("Upload", "QQ", DateTime.Now.ToString(" ...
- 逍遥大佬分享mysql知识
设计表规则: 0),数据库名字以db_开始,编码UTF8 1),表名都以tb_开始 2),字段都是用小写,比如是否删除is_delete 3),表都是innodb,utf8格式的 4),最重要的,表名 ...
- static关键字的使用（有个深刻领悟）
没有实例化对象的时候进行可以调用static 属性 static方法 (用类名去调用) 非static定义的方法可以调用static的属性或方法. static定义的方法不能调用非static的方法 ...
- zabbix使用企业微信发送告警信息
用qq邮箱发送告警信息一点都不方便,看到网上说也可以使用微信发送告警信息,所以就试了一下. 首先先试着在虚拟主机上给微信发送信息. 我们需要注册企业微信,注册时有一个地方需要注意,就是注册时选择组织, ...
- Properties 类的使用
定义: 表示一个持久的集合,可以存在流中,或者从流中加载.是Hashtable子类,map集合方法都可以用. 方法的使用: /* * 集合对象 properties继承Hashtable实现了Map接 ...
- MongoDB之 写安全(Write Concern)
MongoDB Write Concern,简称MongoDB写入安全机制,是一种客户端设置,用于控制写入安全的级别.Write Concern 描述了MongoDB写入到mongod单实例,副本集, ...
- dva 知识点
dva中,路由模式从hashHistory换成 browserHistory: dva-cli创建的项目中,src/index.js相应部分修改如下: import browserHistory fr ...
- 获取TypeError：__init __（）缺少1个需要的位置参数：'on_delete'当试图添加父表后面的子表
解决办法:https://stackoverflow.com/questions/44026548/getting-typeerror-init-missing-1-required-position ...
- Jmeter学习—004—使用代理录制脚本—HTTP代理服务器（APP、web皆可）
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mmmmmmm_2niu/article/details/78136253记得我最开始使用jmeter ...